CSS Grid Generator

CSS Grid is a two-dimensional layout system that allows you to create complex layouts with rows and columns.

Key advantages:

• Control over both rows and columns simultaneously
• Named grid areas for semantic layouts
• Flexible track sizing (fr units, auto, minmax)
• Item placement and overlapping
• Responsive design without media queries (with auto-fit/fill)

• Grid Container: Element with display: grid
• Grid Item: Direct children of grid container
• Grid Line: Dividing lines (numbered from 1)
• Grid Track: Space between two lines (column or row)
• Grid Cell: Single unit of the grid
• Grid Area: Rectangular space spanning multiple cells

• fr (fraction): Distributes available space (e.g., 1fr 2fr = 1/3 and 2/3)
• px, em, rem: Fixed sizes
• %: Percentage of container
• auto: Fits content
• minmax(min, max): Size between min and max
• repeat(count, size): Repeating pattern

Example: repeat(3, 1fr) creates three equal columns

Example: 200px 1fr 2fr creates fixed first column, flexible others

Named areas let you define layout visually in CSS:

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";
                

Then assign items to areas:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
                

Rules: Areas must be rectangular, use dots (.) for empty cells

Auto-fit responsive grid:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                

Creates columns that are at least 250px, wrapping to new rows as needed.

Media query approach:

/* Mobile */
grid-template-columns: 1fr;

/* Tablet */
@media (min-width: 768px) {
  grid-template-columns: repeat(2, 1fr);
}

/* Desktop */
@media (min-width: 1024px) {
  grid-template-columns: repeat(3, 1fr);
}
                

Use Grid for:

• Two-dimensional layouts (rows AND columns)
• Fixed grid structures
• Page layouts
• Overlapping elements

Use Flexbox for:

• One-dimensional layouts (row OR column)
• Navigation bars
• Flexible components
• Content-driven sizing

Best practice: Use both! Grid for page layout, Flexbox for components.

• Start with a preset layout to see common patterns
• Adjust columns and rows to match your design
• Click "Create New Area" then drag on the grid to define regions
• Give meaningful names to areas (header, sidebar, main, etc.)
• Experiment with track sizes (fr, px, auto, minmax)
• Copy the generated CSS and use it in your project
• Test responsive behavior by resizing the preview