Flex Grid

FlexGrid uses Flexbox to create a multi-column layout.

Create Grids without worrying about leftover items

FlexGrid automatically expands leftover items so they don’t feel like orphans.

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

Center leftover items for better presentation

FlexGrid lets you center leftover items instead of expanding them. This can be amazing for presentation when building landing pages or dashboards

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

Span multiple columns

Each child in FlexGrid can also span multiple columns. Use this to create any layout you wish.

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

Responsive grids without media or container queries

FlexGrid lets you determine the minimum width of each item. Once defined, FlexGrid does the rest and creates a responsive layout for you.

<div class="Masonry md:[--cols:2] lg:[--cols:3]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Resize to see this work!

Intro

FlexGrid lets you create grid layouts with Flexbox. You can use this over SimpleGrid in these situations:

You want the final row of grid items to expand automatically
You don’t want to use media queries or container queries

Basic Usage

FlexGrids API is similar to SimpleGrid. You can define the number of columns in FlexGrid with --cols.

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

Expanding items

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

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

Centering Items

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

<div class="FlexGrid 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="FlexGrid [--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="FlexGrid [--cols:3] [--gap:2rem]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Responsive Behaviour

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

<div class="FlexGrid [--item-width:10rem] [--cols:4]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</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="FlexGrid md:[--cols:3] lg:[--cols:4]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Here’s the CSS for FlexGrid.

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

Note

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

.FlexGrid {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap, 1rem);

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

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

FlexGrid

CSS Variables

CSS Variable	Default	Description
`--gap`	`1rem`	Gap between columns
`--cols`	`1`	Number of columns
`--item-width`	`1`	Minimum `width` of each item.

Children

CSS Variables

CSS Variable	Default	Description
`--span`	`1`	Number of columns that the child should occupy.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.