🔲

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.

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.