Grid Flex

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>

The astro-island and astro-slot selectors help to alleviate styling frustrations when using Astro.

This montrosity took an incredible amount of trial and error to make. 🫠

.grid-flex {
  --_cols: var(--cols);
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap, 1rlh);
  max-width: 100%;

  > *,
  > *:where(astro-island, astro-slot) > *,
  > :where(.contents) > * {
    --one-column: var(--gap, 1rlh) * (var(--_cols, 1) - 1);
    flex: var(--grow, var(--span, 1)) var(--span, 1)
      calc(
        (100% - var(--one-column)) / var(--_cols, 1) * var(--span, 1) +
          (var(--span, 1) - 1) * var(--gap, 1rlh)
      );
    min-width: min(100%, var(--item-width, 3rlh));
    max-width: 100%;
  }
}

Grid Flex CSS Variables

Children CSS Variables