Splendid layouts

Basic Usage

You can create a gallery with grid-gallery. By default, grid-gallery uses auto-fill.

<div class="grid-gallery">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

If you wish to be explicit, you can create the grid with:

  • grid-gallery-fit: Uses auto-fit
  • grid-gallery-fill: Uses auto-fill
<div class="grid-gallery-fill"> ... </div>
<div class="grid-gallery-fit"> ... </div>
Tip

Here’s the difference between auto-fill and auto-fit:

  • auto-fill: Fills the row with as many columns as possible by creating new columns.
  • auto-fit: Fits the currently available columns into the given space by stretching each column.

Changing the width of each item

You can change the width of each item with the --item-width variable.

<div class="grid-gallery-fit [--item-width:150px]">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Allowing items to span multiple columns

If you wish for grid items to span multiple colums, you can use the span variable.

<div class="grid-gallery-fit">
  <div>...</div>
  <div class="[--span:2]">...</div>
  <div class="[--span:3]">...</div>
  ...
</div>

Gap between grid items

You can change the gap between items with the gap property or the --gap variable.

<div class="grid-gallery gap-8">
  <div>...</div>
  <div>...</div>
</div>