CSS Grid Generator
Build CSS Grid layouts visually. Adjust columns, rows, gaps, alignment, and per-item placement, then copy the generated CSS or Tailwind code.
Advertisement
Presets
Grid Properties
Live Preview
Generated Code
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}Advertisement
How to Use the CSS Grid Generator
The CSS Grid Generator is a visual layout builder that lets you design two-dimensional grid layouts without writing code from scratch. Start by choosing a preset layout — Holy Grail, Sidebar, Dashboard, Photo Gallery, or Card Grid — to load a common pattern, then customize it to fit your needs. Or build your grid from the ground up by adding columns and rows with the controls on the left.
Each column and row track can be set to any CSS Grid unit: fr (fractional units that share available space), px (fixed pixel widths), % (percentage of the container), or auto (sized to content). Use the "+ Add" button to add more tracks, or click the × button to remove one. Adjust column gap and row gap with the sliders to control spacing between cells.
The justify-items and align-items dropdowns control how items are positioned within their grid cells. "stretch" makes items fill the entire cell, while "start", "center", and "end" align them within their allocated space. These properties are especially useful when items don't need to fill their entire cell.
Click any numbered item in the live preview to select it and reveal per-item placement controls. You can set grid-column-start, grid-column-end, grid-row-start, and grid-row-end to make items span multiple columns or rows. This is how you create layouts where a header spans the full width or a sidebar stretches across several rows.
When your layout looks right, toggle between CSS and Tailwind output modes and copy the generated code. The CSS output includes the container properties and any per-item overrides as separate class rules. The Tailwind output maps everything to utility classes using arbitrary value syntax like grid-cols-[1fr_200px_1fr] and col-[1/3]. Share your layout with others using the Share button, which encodes the entire grid configuration into a URL.
CSS Grid is the most powerful layout system in CSS. It handles complex page structures — dashboards, holy grail layouts, magazine-style designs, photo galleries — that would require nested containers and hacks with older techniques. This generator helps you visualize how grid properties interact so you can build layouts faster and with more confidence.
Frequently Asked Questions
What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system built into CSS. Unlike Flexbox, which works along a single axis, Grid lets you control both rows and columns simultaneously. You define a grid container with display: grid, then specify tracks using grid-template-columns and grid-template-rows. Items placed inside the container automatically flow into grid cells, or you can explicitly position them using line numbers.
What is the difference between CSS Grid and Flexbox?
Flexbox is one-dimensional — it lays items out along a single row or column. CSS Grid is two-dimensional — it handles rows and columns at the same time. Use Flexbox for component-level layouts like navigation bars, button groups, and centering content. Use Grid for page-level layouts, dashboards, and any design that needs precise control over both horizontal and vertical placement.
What is the fr unit in CSS Grid?
The fr (fraction) unit represents a share of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. The browser calculates available space after accounting for fixed-size tracks (px, %, etc.) and gaps, then distributes the remaining space proportionally among fr tracks.
What are grid-template-areas?
grid-template-areas is an alternative way to define grid layouts using named regions. You assign names to grid areas and then reference those names in grid-area on child elements. For example, you could name areas “header”, “sidebar”, “main”, and “footer”, then visually lay them out in a string template. This generator focuses on the numeric line-based approach, which gives you finer control over item placement.
How do I make a responsive CSS Grid layout?
There are several approaches. You can use the minmax() function with auto-fill or auto-fit to create columns that wrap automatically: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). You can also use media queries to change the number of columns at different breakpoints. The fr unit naturally adapts to available space, making it inherently flexible.
What does minmax() do in CSS Grid?
The minmax() function sets a minimum and maximum size for a grid track. For example, minmax(200px, 1fr) creates a track that is at least 200 pixels wide but can grow to fill available space. Combined with repeat(auto-fill, ...), it creates responsive grids that automatically adjust the number of columns based on container width without any media queries.