CSS Grid Generator
CSS Grid layouts create two-dimensional grid systems. Properties: display: grid, grid-template-columns (column sizes), grid-template-rows (row sizes), gap (spacing), grid-template-areas (named regions). Example: grid-template-columns: 200px 1fr 1fr creates 3 columns (fixed 200px, two flexible). fr unit divides available space. repeat(3, 1fr) creates 3 equal columns. Grid items use grid-column, grid-row to span cells. Advantages: precise 2D layouts, responsive design, no floats/positioning hacks. Browser support: all modern browsers. Use for page layouts, dashboards, galleries.
Create CSS Grid layouts visually with a drag-and-drop editor. Set rows, columns, gap, and merge cells to create grid areas. Customize column widths (fr, px, auto, minmax) and row heights. Generate grid-template-areas and grid-template-columns/rows CSS code. Includes presets for Holy Grail, Dashboard, Gallery, Card Grid, and Sidebar + Content layouts.
Presets
Grid Setup
Column Widths
Row Heights
Grid Preview (drag to create areas)
Generated CSS (grid-template-areas)
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 8px;
}How to Use
- Enter your value in the input field
- Click the Calculate/Convert button
- Copy the result to your clipboard
Frequently Asked Questions
- What is CSS Grid?
- CSS Grid is a two-dimensional layout system in CSS that lets you arrange elements in rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid allows you to control both axes at once, making it ideal for complex page layouts like dashboards, galleries, and holy grail layouts.
- What is the difference between grid-template-areas and grid-template-columns/rows?
- grid-template-areas lets you define named regions of the grid using a visual ASCII-art-like syntax, making layouts easier to understand and maintain. grid-template-columns and grid-template-rows define the size of tracks (columns and rows) and you position items using grid-column and grid-row line numbers. Both approaches produce the same result — use whichever is more readable for your layout.
- What does "fr" mean in CSS Grid?
- The "fr" unit stands for "fraction" and 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 distributes leftover space after fixed-size tracks (px, auto) are calculated.
- When should I use minmax() in CSS Grid?
- Use minmax() when you want grid tracks to be flexible but within constraints. For example, minmax(200px, 1fr) creates a column that is at least 200px wide but can grow to fill available space. This is especially useful for responsive card grids and content areas.
- How do I make a CSS Grid layout responsive?
- Use fr units for flexible columns, minmax() for minimum sizes, auto-fit or auto-fill with repeat() for automatic column counts, and media queries for breakpoint-specific layouts. The grid-template-areas property also makes it easy to rearrange named areas at different screen sizes.
- Can I merge cells in CSS Grid?
- Yes, you can span grid items across multiple cells using grid-column and grid-row properties (e.g., grid-column: 1 / 3 spans two columns). With grid-template-areas, you merge cells by repeating the same area name across adjacent cells in the template string.