CSS Grid Generator

Design CSS Grid layouts visually. Define columns, rows, gaps, and item placement with live preview.

How it works: Define your grid structure with columns and rows. Adjust track sizes, gaps, and item placement. Copy the generated CSS when your layout is ready.

3
2
8px
8px
11fr
21fr
31fr
11fr
21fr
Item 1
Item 2
Item 3
Item 4
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that lets you create complex web layouts with rows and columns simultaneously. Unlike Flexbox which works in one dimension, Grid gives you complete control over both axes, making it perfect for page layouts, dashboards, and image galleries.

How to Use the Grid Generator

Start by setting the number of columns and rows. Adjust track sizes using fr (fractional), px, or auto units. Use the gap controls to add spacing between cells. Click on grid items to make them span multiple columns or rows. The generated CSS updates in real time — copy it when you're ready.

Grid Template Columns and Rows

The grid-template-columns and grid-template-rows properties define the track sizes. The fr unit distributes available space proportionally — 1fr 2fr gives the second column twice the width. Use auto for content-based sizing, minmax() for responsive ranges, and repeat() for repeating patterns.

Common CSS Grid Patterns

  • 12-column layout: repeat(12, 1fr) for maximum flexibility
  • Dashboard: sidebar (250px) + main (1fr) with header and footer spanning full width
  • Photo gallery: auto-fill with minmax(200px, 1fr) for responsive columns
  • Blog layout: 1fr 3fr for sidebar and content
  • Holy grail: header, 3-column body, footer using grid-template-areas
  • Card grid: auto-fit with minmax for responsive equal cards