Django-Spellbook

Flexbox & Grid Utilities

Control layout with powerful flexbox and grid utilities.

Flex Direction

Control the direction of flex items.

Available classes:

  • sb-flex: Enable flexbox
  • sb-flex-row: Items in a row
  • sb-flex-col: Items in a column
  • sb-flex-row-reverse: Reversed row
  • sb-flex-col-reverse: Reversed column

Responsive variants:

  • sb-sm:flex-row: Row on small screens and up
  • sb-md:flex-row: Row on medium screens and up
  • sb-lg:flex-row: Row on large screens and up
  • (Same pattern for -col variants)

Justify Content

Control how items are positioned along the main axis.

Available classes:

  • sb-justify-start: Items at start
  • sb-justify-end: Items at end
  • sb-justify-center: Items at center
  • sb-justify-between: Space between items
  • sb-justify-around: Space around items
  • sb-justify-evenly: Space evenly distributed

Align Items

Control how items are positioned along the cross axis.

Available classes:

  • sb-items-start: Items at start
  • sb-items-end: Items at end
  • sb-items-center: Items at center
  • sb-items-baseline: Items along baseline
  • sb-items-stretch: Items stretch to fill

Gap

Control space between items.

Available classes:

  • sb-gap-1: 0.25rem gap
  • sb-gap-2: 0.5rem gap
  • sb-gap-3: 1rem gap
  • sb-gap-4: 1.5rem gap
  • sb-gap-6: 2rem gap

Flex Grow/Shrink

Control how items grow and shrink.

Available classes:

  • sb-grow: Allow item to grow
  • sb-grow-0: Prevent growing
  • sb-shrink: Allow item to shrink
  • sb-shrink-0: Prevent shrinking

Grid

Create grid layouts.

Available classes:

  • sb-grid: Enable grid
  • sb-grid-cols-1: One column
  • sb-grid-cols-2: Two columns
  • sb-grid-cols-3: Three columns
  • sb-grid-cols-4: Four columns

Responsive grid:

  • sb-md:grid-cols-2: Two columns on medium screens
  • sb-md:grid-cols-3: Three columns on medium screens
  • sb-md:grid-cols-4: Four columns on medium screens
ℹ️

Common Pattern: Making a responsive layout with a row on large screens and a column on small screens.

 
<div class="sb-flex sb-flex-col sb-md:flex-row sb-items-center sb-justify-between sb-gap-4">
    <div>Stacks on mobile, side by side on desktop</div>
    <div>With equal spacing between</div>
</div>

Continue to Spacing Utilities