Grid
LiftKit is more than just a collection of buttons and cards—it's a design system that empowers you to create your own unique components. Instead of pre-made UI elements, LiftKit provides the building blocks: variables and guidelines that shape the look and feel of your designs. Whether you're going for sleek minimalism or bold brutalism, LiftKit adapts to your creative vision, giving you the freedom to craft any aesthetic, from scratch, with ease.
Choose a Starter Kit
Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.
Quickstart
Get a feel for LiftKit by following along with this short tutorial.
Figure 1. Animation demonstrating state layer implementation.
Overview
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.
Building a Grid
You build grids by combining 3 class names:
- .display__grid, which is always the first class
- .col__[x], where [x] equals the number of columns you want (1-12)
- .gap__[y], where [y] equals the size of the gaps between columns and rows.
.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;
}