CSS Grid Generator
This free CSS grid generator turns a drawing into grid code. Use it as an online CSS grid layout generator or grid maker: set the columns, rows and gap, drag across cells to draw named areas, and copy the CSS and HTML that match. It runs in your browser, nothing is uploaded, and there is nothing to sign up for.
How to use the CSS grid generator
Start with the three sliders: Columns and Rows each run from 1 to 24, and Gap runs from 0 to 128 pixels. Then press on a cell in the grid and drag across to the opposite corner of the area you want. Let go and the cells become one named area. When the layout looks right, tap the CSS or HTML block, or its Copy button, to put that code on your clipboard.
Draw grid areas with grid-template-areas
Each area you draw gets a name, area-1, area-2 and so on. Rename it
in the Areas list to something like header, sidebar or
main. Names are cleaned up so they are valid CSS: lowercase letters, digits, hyphens
and underscores, starting with a letter. The CSS output lists the grid row by row in
grid-template-areas, writes a dot for every cell no area covers, and adds one
grid-area rule per name. The HTML output has one child element for each area.
Areas must be rectangles and cannot overlap. If a drag touches an existing area the box turns red and the area is not created. Delete an area with the bin icon to free its cells.
Columns, rows and gap
The columns and rows start as equal tracks, written as repeat(3, 1fr) for a
three-column grid. The Gap value becomes the gap property on the
container. The drawing keeps the gap small so a large grid still fits the screen; the code
carries the real value. If you shrink the grid, areas are trimmed to fit and any area that
starts outside it is removed.
Track sizes: fr, px, % and minmax()
Open Advanced sizing to set every column and row yourself instead of equal
tracks. Each field takes one track size: 1fr, 2fr, 240px,
25%, auto, min-content, max-content,
minmax(100px, 1fr) or fit-content(300px). A field that is not valid
CSS turns red and the code uses 1fr for it, so the output is always valid.
Make the generated grid responsive
The output is plain CSS with no libraries, so you can adapt it freely. For a layout that
adjusts to the screen, use fr and minmax() tracks rather than fixed
pixels, and redefine grid-template-areas inside a media query to stack the areas
into a single column on narrow screens.
Frequently asked questions
What is a CSS grid generator?
A CSS grid generator is a visual tool that writes CSS Grid code for you. You set the number of columns, rows and the gap, mark out which cells belong to which named area, and it outputs the matching display: grid rules, grid-template-areas and HTML. It saves you from counting rows and columns by hand.
How do I use grid-template-areas?
Give every region of your layout a name, then draw the layout as rows of quoted names in grid-template-areas, using a dot for an empty cell. Each child element then claims its region with grid-area set to the same name. Drag across cells here and the tool writes both halves for you: the template string and one grid-area rule per area.
How do I make a CSS grid layout?
Set display: grid on a container, define the columns and rows with grid-template-columns and grid-template-rows, and add a gap. Then place the children, either by line numbers or by named areas. The generator above does all of that from a drawing, so you can copy the finished CSS and HTML instead of writing it.
What does the fr unit mean in CSS grid?
One fr is one share of the free space left in the grid after fixed sizes and gaps are taken out. With 1fr 2fr, the second column gets twice the width of the first. The default output is repeat(columns, 1fr), which makes every track equal. Open Advanced sizing to type your own fr values.
What is minmax() in CSS grid?
minmax(min, max) sets a track that is never smaller than min and never larger than max. For example minmax(100px, 1fr) keeps a column at least 100px wide and lets it grow to share the remaining space. You can type it into any column or row in Advanced sizing, and the code uses it as written.
How do I add a gap between rows and columns in CSS grid?
Use the gap property on the grid container, for example gap: 16px. It puts the same space between every row and every column and none around the outside edge. Move the Gap slider here from 0 to 128px and the gap line in the CSS updates. To set rows and columns separately, change it to row-gap and column-gap in your own code.
Recommended
-
Web Design Sketchbook (dot grid wireframe pad)Sketch the next layout on paper before you drag it out here
-
CSS: The Definitive Guide (Meyer & Weyl)The reference that explains every grid property in your code
-
15.6" Portable Monitor (USB-C)Keep the preview on a second screen while you tweak the grid
Helps keep the tools free. ✨
Images are for illustration only. As an Amazon Associate I earn from qualifying purchases.
