Grid
To create a CSS Grid-based layout in missing.css, use the .grid
class.
By default, the grid will have equal-width columns but uneven rows.
To override these, you have the .grid-even-rows
and .grid-variable-cols
classes.
To specify the row and column an element should occupy, use the data-cols
and data-rows
attributes:
data-cols="1"
- Element will take up first column, next available row
data-cols="1 3"
- Element will take up columns 1 to 3 (both 1 and 3 included), next available row
data-cols="1 3" data-rows="2 3"
- Element will take up a 3×2 space, with a 1 column gap above
Note that our column specifications are based on rows, not lines.
This means data-cols="1 2"
spans two columns,
as opposed to grid-column: 1 / 2
which spans only one.
We support columns up to 12.
To change the layout based on viewport size,
add @s
(small, ≤768px) or @l
(large, ≥1024px) to the end of the attributes:
data-cols@s="1" data-cols="1 2" data-cols@l="1 3"
- Element will take 1 column in small screens, 2 columns on medium screens and 3 on large screens
<div class="grid grid-even-rows">
<div class="box info" data-cols="1 2" data-rows="1 2">Sidebar </div>
<div class="box info" data-cols="2 4" data-rows="1 3">Main </div>
<div class="box info" data-cols="5 6" data-rows="2" data-cols@s="2 4" data-rows@s="4">Auxiliary</div>
</div>
Sidebar
Main
Aux