Splendid layouts

No more grid orphans

grid-flex automatically expands orphan items so they no longer feel left-out.

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

Center leftover items for better presentation

Instead of expanding orphan items, grid-flex lets you center leftover items as well. This can be great for presenting certain elements when building landing pages or dashboards.

Span multiple columns

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

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

Create responsive grids without media or container queries

grid-flex lets you size each item with --item-width, just like grid-gallery. Once defined, grid-flex does the rest and creates a responsive layout for you.

Resize to see this work!