info

Get Help from a LiftKit Expert

arrow_forward
Get Help

Grid

Choose a Starter Kit

Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.

Webflow 'w' Logo
Webflow

open_in_new

Figma 'F' logo
Figma

open_in_new

Github mark icon
GitHub

open_in_new

Quickstart

Get a feel for LiftKit by following along with this short tutorial.

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:

  1. .display__grid, which is always the first class
  2. .col__[x], where [x] equals the number of columns you want (1-12)
  3. .gap__[y], where [y] equals the size of the gaps between columns and rows.
Class Name CSS Properties
.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;

Give Us Feedback

Click or tap to reveal form.
expand_more
check_circle
Success! An email has been sent to you with more details.
Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.
error
Error: Something went wrong. Email info@chainlift.io directly for assistance.

On This Page

Heading
Heading