What is CSS Grid and how do I create a grid layout?

CSS Grid is a two-dimensional layout system that arranges items in rows and columns. Set display: grid on a container, define columns with grid-template-columns, optionally define rows with grid-template-rows, and add a gap. This CSS grid generator builds those rules for you and shows the result live.

What does grid-template-columns: repeat(3, 1fr) mean?

It creates three equal-width columns. The fr unit is a fraction of the free space in the container, and repeat(3, 1fr) is shorthand for 1fr 1fr 1fr. You can mix units, for example 200px 1fr 2fr for a fixed column followed by two flexible columns where the last one is twice as wide.

What is the difference between auto-fit and auto-fill?

Both create as many columns as fit, such as repeat(auto-fit, minmax(240px, 1fr)). With auto-fill, empty tracks keep their space when there are few items. With auto-fit, empty tracks collapse so the existing items stretch to fill the row.

How do I make an item span multiple columns or rows?

Use grid-column and grid-row with the span keyword, for example grid-column: 1 / span 2 to start at line 1 and span two columns, or grid-row: span 2. In this builder, select an item and use the Column start, Column span, Row start and Row span sliders.

What is the difference between gap, row-gap and column-gap?

gap is the shorthand for row-gap and column-gap. gap: 16px sets both, and gap: 24px 16px sets row gap 24px and column gap 16px. Gaps only appear between tracks, not around the outside of the grid.

When should I use CSS Grid instead of Flexbox?

Use Grid when you need to control rows and columns together, such as page layouts, dashboards, galleries and bento grids. Use Flexbox for one-dimensional rows or columns, such as navigation bars and button groups. They work well together.

How do I use CSS Grid in Tailwind CSS?

Use grid with grid-cols-3, grid-rows-2 and gap-4, and place items with col-span-2, row-span-2, col-start-2 and similar classes. For custom tracks use arbitrary values such as grid-cols-[200px_1fr]. The Tailwind output box generates the markup with these classes.

CSS Grid Layout Builder: Visual Grid Generator

CSS Grid Layout Builder

Save on Google

Free online CSS Grid generator. Set the columns, rows, gaps and alignment, place and span items, preview the grid live and click any item to edit it, then copy the CSS, HTML or Tailwind classes. Everything runs in your browser. Nothing is stored or uploaded.

Inputs

Quick presets

Grid container

Columns: 3

Rows: 2

Column gap: 16px

Row gap: 16px

Container height: 300px

grid-template-columns

grid-template-rows

Add the container height to the CSS

Alignment and flow

justify-items

align-items

justify-content

align-content

grid-auto-flow

Grid items

Click an item in the preview, or pick it below. Set Start to auto to let the browser place it.

Edit item 1

Column start: auto

Column span: 1

Row start: auto

Row span: 1

Output

Live preview

CSS output

HTML output

Tailwind CSS markup

Related tools

Tool	What it does
PX to REM / EM Converter	Convert pixel values to rem and em.
CSS Glassmorphism Generator	Frosted-glass blur and transparency effects.
CSS Neumorphism (Soft UI) Generator	Soft extruded shadows for UI elements.
CSS Box Shadow & Glow Stacker	Layer multiple shadows and glows.
CSS Mesh & Multi-Gradient Generator	Build mesh and multi-stop gradients.
CSS Grid Layout Builder	Design grids visually and copy the CSS.
CSS clamp() Calculator	Fluid typography and spacing values with clamp().

44 CSS Grid layout presets

Equal columns, sidebar and page layouts, bento grids, galleries, responsive card grids, dashboards, forms and a calendar. Search by name, filter by type, then click Apply to load a layout into the builder above, or Copy CSS to use it as it is.

Search presets

Showing 44 of 44 presets

Name	Type	Settings
3-Column Cards	Equal columns	`columns: repeat(3, 1fr); rows: repeat(2, 1fr); 6 items`
1-Column Grid	Equal columns	`columns: repeat(1, 1fr); rows: repeat(2, 1fr); 2 items`
2-Column Grid	Equal columns	`columns: repeat(2, 1fr); rows: repeat(2, 1fr); 4 items`
4-Column Grid	Equal columns	`columns: repeat(4, 1fr); rows: repeat(2, 1fr); 8 items`
5-Column Grid	Equal columns	`columns: repeat(5, 1fr); rows: repeat(2, 1fr); 10 items`
6-Column Grid	Equal columns	`columns: repeat(6, 1fr); rows: repeat(2, 1fr); 12 items`
8-Column Grid	Equal columns	`columns: repeat(8, 1fr); rows: repeat(2, 1fr); 16 items`
10-Column Grid	Equal columns	`columns: repeat(10, 1fr); rows: repeat(2, 1fr); 20 items`
12-Column Grid	Equal columns	`columns: repeat(12, 1fr); rows: repeat(2, 1fr); 24 items`
Left Sidebar	Sidebar	`columns: 250px 1fr; rows: repeat(1, 1fr); 2 items`
Right Sidebar	Sidebar	`columns: 1fr 250px; rows: repeat(1, 1fr); 2 items`
Two Sidebars	Sidebar	`columns: 200px 1fr 200px; rows: repeat(1, 1fr); 3 items`
Narrow Left Rail	Sidebar	`columns: 80px 1fr; rows: repeat(1, 1fr); 2 items`
Sidebar 1 to 3	Sidebar	`columns: 1fr 3fr; rows: repeat(1, 1fr); 2 items`
Content and Aside 2 to 1	Sidebar	`columns: 2fr 1fr; rows: repeat(1, 1fr); 2 items`
Sidebar with Header	Sidebar	`columns: 250px 1fr; rows: 80px 1fr; 3 items`
Sidebar Header Footer	Sidebar	`columns: 250px 1fr; rows: 80px 1fr 60px; 4 items`
Holy Grail Layout	Page layout	`columns: 200px 1fr 200px; rows: 80px 1fr 60px; 5 items`
Header Content Footer	Page layout	`columns: repeat(1, 1fr); rows: 80px 1fr 60px; 3 items`
Centered Content Column	Page layout	`columns: 1fr minmax(0, 720px) 1fr; rows: repeat(1, 1fr); 1 item`
Hero and Features	Page layout	`columns: repeat(3, 1fr); rows: 2fr 1fr; 4 items`
Feature Row 1 and 2	Page layout	`columns: repeat(3, 1fr); rows: repeat(2, 1fr); 4 items`
Bento 4x3 Classic	Bento	`columns: repeat(4, 1fr); rows: repeat(3, 1fr); 6 items`
Bento 3x3	Bento	`columns: repeat(3, 1fr); rows: repeat(3, 1fr); 5 items`
Bento Hero Left	Bento	`columns: repeat(3, 1fr); rows: repeat(2, 1fr); 3 items`
Bento Wide Top	Bento	`columns: repeat(4, 1fr); rows: repeat(2, 1fr); 4 items`
Bento Tall Left	Bento	`columns: repeat(3, 1fr); rows: repeat(2, 1fr); 4 items`
Bento Dashboard Tiles	Bento	`columns: repeat(4, 1fr); rows: repeat(4, 1fr); 5 items`
Gallery 4x2 One Wide	Gallery	`columns: repeat(4, 1fr); rows: repeat(2, 1fr); 7 items`
Gallery 3x3 Featured	Gallery	`columns: repeat(3, 1fr); rows: repeat(3, 1fr); 6 items`
Gallery Tall and Wide	Gallery	`columns: repeat(4, 1fr); rows: repeat(3, 1fr); 10 items`
Auto-fit Cards 160px	Auto-fit cards	`columns: repeat(auto-fit, minmax(160px, 1fr)); rows: auto; 6 items`
Auto-fit Cards 200px	Auto-fit cards	`columns: repeat(auto-fit, minmax(200px, 1fr)); rows: auto; 6 items`
Auto-fit Cards 240px	Auto-fit cards	`columns: repeat(auto-fit, minmax(240px, 1fr)); rows: auto; 6 items`
Auto-fit Cards 280px	Auto-fit cards	`columns: repeat(auto-fit, minmax(280px, 1fr)); rows: auto; 6 items`
Auto-fit Cards 320px	Auto-fit cards	`columns: repeat(auto-fit, minmax(320px, 1fr)); rows: auto; 6 items`
Auto-fill Cards 240px	Auto-fit cards	`columns: repeat(auto-fill, minmax(240px, 1fr)); rows: auto; 6 items`
Dashboard 12 Column	Dashboard	`columns: repeat(12, 1fr); rows: 80px 120px 1fr 1fr; 7 items`
Analytics 3x3	Dashboard	`columns: repeat(3, 1fr); rows: repeat(3, 1fr); 4 items`
Admin Layout	Dashboard	`columns: 240px 1fr; rows: 64px 1fr; 3 items`
Kanban 4 Columns	Dashboard	`columns: repeat(4, 1fr); rows: repeat(1, 1fr); 4 items`
Label and Input Form	Form	`columns: max-content 1fr; rows: auto; 8 items`
Two Column Form	Form	`columns: repeat(2, 1fr); rows: auto; 5 items`
Calendar 7x5	Calendar	`columns: repeat(7, 1fr); rows: repeat(5, 1fr); 35 items`

What is CSS Grid?

CSS Grid is a layout system that places items in rows and columns at the same time. You turn an element into a grid with display: grid, describe its tracks with grid-template-columns and grid-template-rows, add space with gap, and position children by line numbers or spans such as grid-column: 1 / span 2.

This CSS Grid layout builder lets you do all of that visually. Choose the number of columns and rows or type your own track sizes (for example 250px 1fr or repeat(auto-fit, minmax(240px, 1fr))), click items to span them across tracks, test the alignment properties, and copy the finished CSS, HTML or Tailwind markup. It is a good fit for page layouts, dashboards, galleries and bento grids.

How to use this CSS Grid builder

Start with a quick preset, or pick any layout from the presets table with Apply.
Set the number of columns and rows, the gaps and the container height, or type your own track sizes.
Choose alignment and auto-flow options to see how items and tracks move.
Click an item in the preview, then set its Column start, Column span, Row start and Row span. Add or remove items as needed.
Press Copy CSS, Copy HTML or Copy Tailwind markup, or use Open Link and the share buttons to send the exact grid to a teammate.

CSS Grid guide: tracks, responsive grids, placement and accessibility

#	Topic	What to know	What to do
1	fr, px and auto tracks	fr shares the free space, px is fixed, and auto sizes to the content. Mixing them is how you build a fixed sidebar next to a flexible main area.	Use something like 250px 1fr for a sidebar layout, and 1fr units for evenly flexible columns.
2	Responsive grids without media queries	repeat(auto-fit, minmax(240px, 1fr)) creates as many columns as fit and stretches them to fill the row.	Use auto-fit for card grids. Use auto-fill if you want empty column slots to stay reserved.
3	gap, not margins	gap adds space between tracks only, so there is no extra margin on the outer edges.	Set row and column gaps with the sliders, or use one gap value for both.
4	Implicit tracks	Items placed outside the defined rows or columns create extra implicit tracks sized by grid-auto-rows and grid-auto-columns.	Define enough rows and columns, or set grid-auto-rows when the number of items can grow.
5	Placement and spanning	grid-column and grid-row place an item with a start line and a span, for example 1 / span 2. Items can overlap if their areas intersect.	Use Column start and Column span on an item, and leave start at auto to let the browser place it.
6	justify vs align	justify-items and align-items position items inside their own cell. justify-content and align-content position the whole grid inside the container when the tracks are smaller than it.	Use the Alignment selects to test each property and see the difference live.
7	Accessibility and reading order	Grid can move items visually without changing the HTML order, but keyboard focus and screen readers follow the HTML order.	Keep the source order logical and avoid large visual reordering of interactive content.

Frequently asked questions

#	Question	Answer
1	What is CSS Grid and how do I create a grid layout?	CSS Grid is a two-dimensional layout system that arranges items in rows and columns. Set display: grid on a container, define columns with grid-template-columns, optionally define rows with grid-template-rows, and add a gap. This CSS grid generator builds those rules for you and shows the result live.
2	What does grid-template-columns: repeat(3, 1fr) mean?	It creates three equal-width columns. The fr unit is a fraction of the free space in the container, and repeat(3, 1fr) is shorthand for 1fr 1fr 1fr. You can mix units, for example 200px 1fr 2fr for a fixed column followed by two flexible columns where the last one is twice as wide.
3	What is the difference between auto-fit and auto-fill?	Both create as many columns as fit, such as repeat(auto-fit, minmax(240px, 1fr)). With auto-fill, empty tracks keep their space when there are few items. With auto-fit, empty tracks collapse so the existing items stretch to fill the row.
4	How do I make an item span multiple columns or rows?	Use grid-column and grid-row with the span keyword, for example grid-column: 1 / span 2 to start at line 1 and span two columns, or grid-row: span 2. In this builder, select an item and use the Column start, Column span, Row start and Row span sliders.
5	What is the difference between gap, row-gap and column-gap?	gap is the shorthand for row-gap and column-gap. gap: 16px sets both, and gap: 24px 16px sets row gap 24px and column gap 16px. Gaps only appear between tracks, not around the outside of the grid.
6	When should I use CSS Grid instead of Flexbox?	Use Grid when you need to control rows and columns together, such as page layouts, dashboards, galleries and bento grids. Use Flexbox for one-dimensional rows or columns, such as navigation bars and button groups. They work well together.
7	How do I use CSS Grid in Tailwind CSS?	Use grid with grid-cols-3, grid-rows-2 and gap-4, and place items with col-span-2, row-span-2, col-start-2 and similar classes. For custom tracks use arbitrary values such as grid-cols-[200px_1fr]. The Tailwind output box generates the markup with these classes.