CSS Grid Generator
Build grid layouts visually and copy the code.
Start with a layout
Or build your own below.
Preview
Drag across cells to add an item
Generated code
Copy and paste directly into your project.
CSS
Advertisement
Banner adResponsive
CSS Grid Generator – Build Grid Layouts Visually
Design CSS grid layouts visually. Set columns, rows and gaps, drag across cells to place items, then copy the CSS, HTML or Tailwind code.
Related tools
What is CSS Grid Generator?
Lay out a page with CSS Grid without writing the code by hand. Add columns and rows, size each track in fr, px, % or auto, set the gaps, then drag across the cells to place items that span several columns or rows. Runs of equal tracks are written with repeat(). Start from a layout such as holy grail, sidebar, cards or bento, and copy the CSS, the matching HTML or a Tailwind version.
- css grid
- grid layout
- grid-template-columns
- gap
- layout
Features
What you get with CSS Grid Generator.
Drag to Place Items
Drag across cells to create an item that spans columns and rows.
Flexible Tracks
Size every column and row in fr, px, % or auto, with separate gaps.
Layout Presets
Start from holy grail, sidebar, cards, bento or magazine layouts.
CSS, HTML & Tailwind
Copy the styles, the markup, or a Tailwind version.
How to use CSS Grid Generator
Follow these steps to get the best results.
Set up the grid
Choose a preset or set the number of columns and rows, their sizes and the gaps.
Place your items
Drag across cells to add an item, then fine-tune its start and span with the sliders.
Copy the code
Pick CSS, HTML or Tailwind and paste it into your project.
Output.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 16px; }
Advertisement
In-feed adResponsive
Frequently asked questions
Common questions about CSS Grid Generator.
fr is a fraction of the free space left in the grid. Three columns of 1fr share the width equally, while 2fr 1fr gives the first column twice as much space as the second.
px is a fixed size and % is relative to the grid container. auto sizes the track to its content, and fr shares whatever space is left after fixed and auto tracks are sized.
Each item is placed between grid lines. grid-column: 1 / 3 starts at line 1 and ends at line 3, so it covers two columns. Dragging across cells in this tool sets those lines for you.
Rows sized auto fit their content, and the items here have none. The preview gives them a small minimum height so you can still see and edit them.
Yes. The Tailwind tab gives complete markup using grid-cols-[...], grid-rows-[...], gap and the col-start, col-end, row-start and row-end utilities.
Advertisement
Mobile banner adResponsive
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.