How do I make a 3 column grid in CSS?

Set display: grid and grid-template-columns: repeat(3, 1fr). The tool writes it inside a .container rule with the row template and the gap. The Tailwind format gives an HTML snippet whose outer div has the classes grid grid-cols-3 grid-rows-3 gap-[10px] for the default 3 by 3, with nine numbered placeholder divs inside.

What does 1fr mean in CSS Grid?

An fr is a share of the space left over after fixed tracks: 1fr 2fr splits it 1 to 2, and 1fr 1fr 1fr gives three equal tracks. A flex factor cannot be negative. Outside minmax(), 1fr means minmax(auto, 1fr) (MDN).

Do the 375px, 768px and 1440px buttons test a responsive layout?

No. They are labeled Max width and only cap the width of the preview box; the page is not resized and no media query is written. Check a breakpoint in your own page.

How does the Tailwind output differ from the CSS?

Tailwind’s grid-rows-N is repeat(N, minmax(0, 1fr)) (its docs), while the CSS here writes repeat(N, 1fr), and 1fr alone means minmax(auto, 1fr), so the two are close but not identical. A custom track list becomes an arbitrary property with underscores for spaces, such as [grid-template-columns:200px_1fr_1fr].

Can I place or span items in the grid?

Yes, by grid lines. Type a cell number under Item placement and set column and row start and end lines from 1 to 13, or leave one empty for auto. Lines are the edges between tracks, so on a 3-column grid column 1 to 3 covers two columns: the CSS gets .item-1 { grid-column: 1 / 3; } and the Tailwind cell col-start-1 col-end-3. Row 2 to 4 gives grid-row: 2 / 4, and an end with no start gives auto / 4. The span keyword and grid-area are not written.

CSS Grid Generator

Set 1 to 12 columns and rows, a gap up to 50 px or a track list such as 1fr 2fr auto, place items by grid line, and copy the CSS, Tailwind or SCSS. How it works

Presets

A preset replaces the grid size, gap, tracks and item placements. Alignment and the export format stay.

Grid Size

3cols

3rows

Gap Mode

Gap (10px)

Alignment and flow

Justify items

Align items

Justify content

Align content

Auto flow

Content alignment only shows when the tracks leave free space, for example fixed widths. Only the properties you change are written.

Item placement

Selected item (1 to 9, or click a cell)

Pick an item to set which grid lines it starts and ends at.

About the CSS Grid Generator

repeat(3, 1fr) for both columns and rows with a 10px gap is where this CSS grid generator starts: grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px 10px;. Set 1 to 12 columns and rows and a gap of 0 to 50 px, or type your own track lists, start from one of eight layout presets, place any cell by its grid lines, set justify and align for items and content and the auto-flow, and copy the code as CSS, Tailwind, SCSS or variables.

What the track list boxes do with typed text

Typed	Result
1fr 2fr auto 200px	Accepted as 1fr 2fr auto 200px
repeat(auto-fit, minmax(200px, 1fr))	Accepted as repeat(auto-fit, minmax(200px, 1fr))
[sidebar] 200px [content] 1fr	Accepted as [sidebar] 200px [content] 1fr
100px 1fr 100px	Accepted as 100px 1fr 100px
3	"3" is not a track size. Use 1fr, 200px, 20%, auto, minmax(), repeat() or fit-content().
minmax(1fr, 2fr)	"minmax(1fr, 2fr)" is not a track size. Use 1fr, 200px, 20%, auto, minmax(), repeat() or fit-content().
-1fr	"-1fr" is not a track size. Use 1fr, 200px, 20%, auto, minmax(), repeat() or fit-content().
repeat(0, 1fr)	"repeat(0, 1fr)" is not a track size. Use 1fr, 200px, 20%, auto, minmax(), repeat() or fit-content().
repeat(3, 1fr	Check the brackets: every ( needs a matching ).

While a list is refused, the code and the preview use the default repeat() for that axis.

How to use this tool

Pick a preset, such as Sidebar layout or Card gallery, or set the number of columns and rows with the plus and minus buttons (1 to 12 each).
Choose a shared gap, or independent row and column gaps, from 0 to 50 px.
Open Track Definition to type your own column and row lists, such as 200px 1fr 1fr. An empty box keeps the default repeat().
To make a cell cover more than one track, type its number under Item placement and set its column and row start and end lines (1 to 13, empty for auto).
Set Justify items, Align items, Justify content, Align content and Auto flow if you need them; each one left at its default writes nothing.
Pick CSS, Tailwind, SCSS or Variables and copy the code.

Frequently asked questions

How do I make a 3 column grid in CSS?: Set display: grid and grid-template-columns: repeat(3, 1fr). The tool writes it inside a .container rule with the row template and the gap. The Tailwind format gives an HTML snippet whose outer div has the classes grid grid-cols-3 grid-rows-3 gap-[10px] for the default 3 by 3, with nine numbered placeholder divs inside.
What does 1fr mean in CSS Grid?: An fr is a share of the space left over after fixed tracks: 1fr 2fr splits it 1 to 2, and 1fr 1fr 1fr gives three equal tracks. A flex factor cannot be negative. Outside minmax(), 1fr means minmax(auto, 1fr) (MDN).
What can I type in the track boxes?: Lengths, percentages, fr values, auto, min-content, max-content, minmax(), fit-content(), repeat() with a positive count, auto-fill or auto-fit, and [line-names], up to 200 characters with the brackets balanced. The check names the first bad token, such as "3" is not a track size, and minmax(1fr, 2fr) is refused because the minimum of minmax() cannot be an fr value.
Do the 375px, 768px and 1440px buttons test a responsive layout?: No. They are labeled Max width and only cap the width of the preview box; the page is not resized and no media query is written. Check a breakpoint in your own page.
How does the Tailwind output differ from the CSS?: Tailwind’s grid-rows-N is repeat(N, minmax(0, 1fr)) (its docs), while the CSS here writes repeat(N, 1fr), and 1fr alone means minmax(auto, 1fr), so the two are close but not identical. A custom track list becomes an arbitrary property with underscores for spaces, such as [grid-template-columns:200px_1fr_1fr].
Can I place or span items in the grid?: Yes, by grid lines. Type a cell number under Item placement and set column and row start and end lines from 1 to 13, or leave one empty for auto. Lines are the edges between tracks, so on a 3-column grid column 1 to 3 covers two columns: the CSS gets .item-1 { grid-column: 1 / 3; } and the Tailwind cell col-start-1 col-end-3. Row 2 to 4 gives grid-row: 2 / 4, and an end with no start gives auto / 4. The span keyword and grid-area are not written.

Sketching a grid container

Set 1 to 12 columns and 1 to 12 rows and a gap of 0 to 50 px (one value, or a row gap and a column gap), or open Track Definition and type your own tracks, such as 200px 1fr 1fr for a sidebar layout or repeat(auto-fit, minmax(200px, 1fr)) for cards that wrap.

Eight presets fill in a start: empty 3 x 3, 4 x 4 and 6 x 6 grids, two or three columns, a sidebar layout and two card galleries. Gallery, wide first card spans card 1 over two columns, so card 6 sits alone in an implicit third row beside two empty cells.

Item placement stretches a cell by its grid lines, 1 to 13: column 1 to 3 covers two columns, a .item-1 rule with grid-column: 1 / 3. CSS, SCSS and Variables give the container rule and one .item-N rule per placed cell; Tailwind gives an HTML snippet with the grid classes and one numbered <div> per cell, a placed one carrying col-start-1 col-end-3. Your settings stay in this browser, and Clear Saved Values removes them.

Tracks, gaps and the checks

grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px 10px;

That is the first render: three equal columns and rows and a 10 px gap. A fr track takes a share of the space left over, so 1fr 2fr splits it 1 to 2 (MDN).

A typed track list must be valid CSS, or the code and preview keep the default repeat() and the field names the first bad token. It reads lengths, percentages, fr (never negative), auto, min-content, max-content, minmax(), fit-content(), repeat() with a positive count, auto-fill or auto-fit, and [line-names], up to 200 characters, with the brackets balanced.

Alignment and Auto flow add a line only when you change them from the default: Justify content space-between writes justify-content: space-between; (Tailwind justify-between), and Auto flow column dense writes grid-auto-flow: column dense; (grid-flow-col-dense).

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.