CSS Grid Generator
Create CSS Grid layouts with interactive preview.
click Cell To Expand
/* Contenedor */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 8px;
}Visual CSS Grid layout generator
CSS Grid Layout is the most powerful two-dimensional layout system in CSS. It allows controlling rows and columns simultaneously, ideal for full page layouts, image galleries, and dashboards.
Our visual generator lets you define columns and rows, customize size templates using fr, px, %, or auto units, adjust gaps, and expand individual cells to span multiple columns or rows.
The preview updates in real time showing exactly how your grid will look. Click any cell to select it and use expansion controls. The generated CSS is ready to copy and use.
Frequently asked questions
What does the "fr" unit mean?
The "fr" (fraction) unit represents a fraction of the available space in the grid container. For example, "1fr 2fr" creates two columns where the second is twice as wide as the first. It is similar to flex-grow but more intuitive for defining proportions.
Does CSS Grid replace Flexbox?
No, they complement each other. Grid is better for two-dimensional layouts (rows and columns), while Flexbox excels in one-dimensional layouts (a single row or column). It is common to use Grid for the overall page structure and Flexbox for aligning content within each section.
How do I make a cell span multiple columns?
In our tool, click on the cell and use the "+" buttons to expand it. In CSS, this is achieved with "grid-column: span 2" (for 2 columns) or "grid-row: span 2" (for 2 rows). You can also specify exact positions with "grid-column: 1 / 3".
Want to learn more? Read our complete guide →