Splendid layouts

Use subgrid easily without creating boilerplate code

When you use subgrid, you would normally need to define the subgrid on grid-template-columns, grid-template-rows, inheriting gap, and all the configuration nonsense.

We do that all for you with subgrid.

index.html
<div class="subgrid">...</div>
output.css
.subgrid {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  gap: inherit;
  /* ... and other properties ... */
}

Arrange grid items neatly on both axes

Just use subgrid-rows and specify the number of elements in the subgrid as the --rowspan variable and everything will be neatly arranged.

index.html
<div class="grid-simple [--cols:2]">
  <div class="subgrid-rows [--rowspan:3]"> ... </div>
  <div class="subgrid-rows [--rowspan:3]"> ... </div>
</div>
Title 1
Short description: Lorem ipsum dolor sit.
Title 2
Medium desc: Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Make stuff you can’t do with display: contents

Subgrids let you create nested grids that can’t be created with display: contents. This allows your layouts to be much easier to make.

Display: Contents
Two rows
Grid item
Nested 1
Nested 2
Nested 3 can’t start on the same column as Nested 1
subgrid
1 Row
Grid item
Nested 1
Nested 2
Nested 3 starts on the same column as Nested 1

Want nested subgrids? No problem!

Go crazy and creative and make as many whacky grids as you would like. subgrid can support them all — and still keep you sane.

This was created with 6 subgrid rows
Short
Medium
Long
Medium
Medium
Medium
Long
Medium
Short

This is a pretty complex 10-column grid. It’s created with 2 nested subgrid-column

AG1
AG2
AG4
AG5
AG6
AG7
AG8
AG9
AG10
AG3