CSS Grid Generator

Generate CSS Grid layouts visually with customizable rows, columns, gaps, and alignment. Edit track sizes and copy ready-to-use CSS code.

1
2
3
4
5
6
7
8
9

Grid Properties

#f0f0f0

Track Sizes

C1
C2
C3
R1
R2
R3

Use values like 1fr, 2fr, 100px, auto, minmax(100px, 1fr), repeat(3, 1fr)

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 10px;
}
All layout generation happens in your browser. No data is sent to any server.

How to Use This Tool

  1. 1

    Set grid dimensions

    Choose the number of columns (1-8) and rows (1-8) for your grid layout.

  2. 2

    Customize track sizes

    Edit individual column and row sizes using CSS values like 1fr, 200px, auto, or minmax().

  3. 3

    Adjust alignment & gaps

    Use justify-items, align-items, justify-content, and align-content to control alignment. Set column and row gaps.

  4. 4

    Copy the CSS

    The generated CSS updates in real-time. Click Copy to copy the complete grid CSS to your clipboard.

Frequently Asked Questions

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex web layouts using rows and columns. It is ideal for page layouts, card grids, and dashboard designs.
What does fr unit mean?
The fr (fractional) unit represents a fraction of the available space in the grid container. 1fr means one equal share. 2fr takes twice the space of 1fr.
When should I use Grid vs Flexbox?
Use CSS Grid for two-dimensional layouts (both rows and columns). Use Flexbox for one-dimensional layouts (a single row or column). They can also be combined.
Is my data secure?
Yes. All layout generation happens entirely in your browser using JavaScript. No data is sent to any server.