🔲

CSS Grid Generator

Visually configure CSS Grid layout - set columns, rows, gap, and alignment - then copy the ready-to-use CSS code.

Live Preview

About CSS Grid Generator

CSS Grid is a two-dimensional layout system that gives you precise control over rows and columns simultaneously. This generator lets you configure the key container properties and immediately see the result, then copy the CSS for use in your project.

Key Properties

  • grid-template-columns - Defines the column track sizes. Use fr units for flexible widths, repeat() for repeating patterns, or fixed pixel/percent values.
  • grid-template-rows - Defines the row track sizes. auto means rows size to their content.
  • column-gap / row-gap - Sets the spacing between tracks.
  • justify-items / align-items - Aligns grid items within their cells.

How to Use

  1. Set the number of Columns and Rows.
  2. Define column widths using fr, px, %, or auto units.
  3. Set gap (gutter) between grid cells.
  4. Click cells in the preview to span them across columns or rows.
  5. Click Copy CSS to get the grid-template and placement styles.

How It Works

The tool generates a display: grid container with grid-template-columns, grid-template-rows, and gap properties. Cell spanning uses grid-column and grid-row shorthand values.

Example

A classic 3-column layout: grid-template-columns: 1fr 2fr 1fr gives a narrow sidebar, wide main content, and narrow right sidebar. Add gap: 1.5rem for spacing.

FAQ

fr is the "fraction unit". repeat(3, 1fr) creates three equal-width columns that share the available space. 2fr 1fr creates two columns where the first is twice as wide as the second.
Use CSS Grid for two-dimensional layouts where you need to control both rows and columns. Use Flexbox for one-dimensional layouts - a single row of buttons, a navigation bar, or stacking items in a column.