Subgrid
subgrid lets you use CSS subgrid easily without the configuration headaches.
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.
<div class="subgrid">...</div>.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.
<div class="grid-simple [--cols:2]"> <div class="subgrid-rows [--rowspan:3]"> ... </div> <div class="subgrid-rows [--rowspan:3]"> ... </div></div>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.
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 is a pretty complex 10-column grid. It’s created with 2 nested subgrid-column