Figure 1. Animation demonstrating state layer implementation.
Grids are content blocks that arrange content in, you guessed it, grid.
LiftKit doesn’t currently have advanced utility classes for things like grid-template-columns or grid spans. Instead, it simply provides a quick shorthand for setting grids by numbers of columns, with rows always determined automatically.
You build grids by combining 3 class names:
.grid {
display: grid;
gap: var(--wholestep);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.grid.col__2 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
.grid.col__3 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}
.grid.col__4 {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
.grid.col__5 {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto;
}
.grid.col__6 {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto;
}
.grid.col__7 {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto;
}
.grid.col__8 {
grid-template-columns: repeat(8, 1fr);
grid-template-rows: auto;
}
.grid.col__9 {
grid-template-columns: repeat(9, 1fr);
grid-template-rows: auto;
}
.grid.col__10 {
grid-template-columns: repeat(10, 1fr);
grid-template-rows: auto;
}
.grid.col__11 {
grid-template-columns: repeat(11, 1fr);
grid-template-rows: auto;
}
.grid.col__12 {
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
}