Intro

grid-flex lets you create grid layouts with Flexbox. You’d want to use this over grid-simple if:

• You don’t want leftover grid items to look like orphans.
• You don’t want to use media queries or container queries to create responsive layouts.

Basic Usage

grid-flexs API is similar to grid-simple. You can define the number of columns in grid-flex with --cols.

<div class="grid-flex [--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

If there are not enough items in the row, grid-flex automatically expands each item with flex-grow.

<div class="grid-flex [--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Centering Items

To center the last row instead of expanding them, set --grow to 0. Once you do this, you can use the justify-center to center the items.

<div class="grid-flex justify-center [--cols:3] [--grow:0]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Spanning multiple columns

You can span an item across multiple columns with the --span property.

<div class="grid-flex [--cols:6]">
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div class="[--span:3]">...</div>
</div>

Changing gap between items

You can change the gap between items with the --gap variable. The gap property will not work.

<div class="grid-flex [--cols:3] [--gap:2rem]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Responsive Behaviour

grid-flex places items in a new row when the size of the item hits the value stated in --item-width.

<div class="grid-flex [--item-width:10rem] [--cols:4]"> ... </div>

Manual Responsive Behaviour

If you don’t wish to use --item-width, you can still create manual breakpoints via --cols and Tailwind responsive modifiers.

<div class="grid-flex md:[--cols:3] lg:[--cols:4]"> ... </div>