Home
Tools
Responsive Grid System

Responsive Grid System

Build responsive websites your way

Decide the number of columns you want in a row & set the gap you want to use. Some sweet maths will do the heavy lifting for you.

Start here

Number of columns (2 to 12)

Gap between columns (px)

Your Calculated Grid Size

Here's your row of 4 columns with your gap of 20px.

1 of 4

2 of 4

3 of 4

4 of 4

Code

HTML

1<div class="flex-container-4 flex-gap-20">
2  <div class="flex-item-1">1 of 4</div>
3  <div class="flex-item-2">2 of 4</div>
4  <div class="flex-item-3">3 of 4</div>
5  <div class="flex-item-4">4 of 4</div>
6</div>

CSSGrid Container

1.flex-container-4 {
2  display: flex;
3  flex-wrap: wrap;
4  --flex-items: 4;
5}
6
7.flex-gap-20 {
8  gap: 20px;
9  --flex-gap: 20px;
10}

CSSGrid Items

1.flex-item {
2  flex-basis: calc(((100% / var(--flex-items) * var(--flex-item-span)) - (var(--flex-gap) * (var(--flex-items) - var(--flex-item-span)) / var(--flex-items))));
3}
4
5.flex-item-1 {
6  --flex-item-span: 1;
7}
8
9.flex-item-2 {
10  --flex-item-span: 2;
11}
12
13.flex-item-3 {
14  --flex-item-span: 3;
15}
16
17.flex-item-4 {
18  --flex-item-span: 4;
19}

How it works

.flex-container-X

creates a flexible container that arranges items horizontally with wrapping. This is equivalent to using flex "flex-wrap" in Tailwind CSS. You'll use this as your main wrapper to contain your grid items.

.flex-gap-X

sets the spacing between grid items, where X is the gap size in pixels. This creates consistent spacing throughout your grid layout without needing to manage margins on individual items.

.flex-item

calculates the precise width for grid items using CSS custom properties. It determines the flex-basis by considering the total number of items, the item span, and gap spacing to create perfectly aligned grid layouts with consistent spacing.

.flex-item-X

creates a flexible grid item with a specific width fraction, where X represents the number of columns this item should span. This allows for precise control over item sizing within your responsive grid layout.