How do I make a CSS grid layout?

Type the column tracks in the Columns field, one size per space, and the row tracks in the Rows field. Three equal columns is 1fr 1fr 1fr; a fixed sidebar beside a fluid column is 200px 1fr. Set the column and row gaps, then place each item by its grid lines: a 3 column grid has 4 column lines, so an item across the whole width runs from line 1 to line 4. The preview updates as you type and the CSS and HTML under it are ready to copy.

Why does the generator give me HTML as well as CSS?

The container rule uses .grid, and each item has a rule such as .grid__item-2. The matching HTML contains those classes in the same order. Paste the CSS into your stylesheet and the HTML into your page to keep the tracks, gaps and placements. The preview colors, labels, padding and minimum sizes are omitted, so your content and surrounding styles affect the final dimensions.

What track sizes can I use?

A number with fr, px or % (1fr, 240px, 25%), the intrinsic keywords auto, min-content and max-content, and minmax(a, b) with a minimum and a maximum, for example minmax(160px, 1fr). A size outside that set is refused by its position, so Column 3 is 10em tells you which track to fix rather than writing a rule that silently does nothing. Gaps take 0 or a number with px, rem, em or %.

Two of my items are on top of each other. Is that an error?

Grid items can share cells. The preview outlines overlapping pairs with a dashed edge and names them underneath. With the supplied markup and no custom stacking rules, the item written later in the HTML paints on top. An overlap can be intentional, as in Badge over a hero; change the item lines if you want separate cells.

How big a grid can it build?

Up to 24 column tracks, 24 row tracks and 50 placed items. Larger counts are refused with an explanation. Placement lines must be whole numbers inside the defined grid: a 3 column grid has lines 1 to 4. Tracks or gaps too large to read as finite numbers are refused.

What are grid lines, and why do items start at 1?

Lines are the edges between tracks. This tool uses positive grid line numbers starting at 1, so a grid with 3 columns has 4 column lines, and grid-column: 1 / 4 spans all three. CSS also supports negative line numbers, but this generator accepts only positive lines inside the tracks you define.

Is anything uploaded?

Grid inputs are processed in your browser and are not uploaded. No account is needed to build a grid or copy the CSS and HTML. When browser storage is available, the tracks, gaps and item placements are saved on this device. Once a draft is saved, Start over appears above the tool and clears it. If storage is blocked, you can still use the generator, but the draft will not be remembered.

How do I make a bento grid?

Load Bento layout to start with four equal fluid columns, three 120px rows and six tiles with different spans. Edit each tile's column and row start and end lines to change the arrangement. The example keeps four columns at every width; it does not add mobile breakpoints.

Does this generate responsive CSS grids?

Fractional tracks such as 1fr share available space, and percentages follow the container size. minmax(0px, 1fr) lets a track shrink below its content width. The number of columns and the item placements remain fixed. This generator does not write media queries or repeat(auto-fit, ...), so it does not automatically change to fewer columns on small screens.

Can I generate named grid areas or Tailwind classes?

The output uses plain CSS with grid-template-columns, grid-template-rows, grid-column and grid-row. You can define rectangular item spans using line numbers. Named grid-template-areas, the grid-area shorthand, Tailwind and Bootstrap class output are not available.

Does this create Flexbox layouts?

This generator writes display: grid and explicit row and column placements. It does not write Flexbox rules. Grid controls both axes; Flexbox arranges items along one main axis with optional wrapping.

Can I place items by dragging them?

Item placement uses labelled number fields for column and row start and end lines. The preview updates when you edit those fields. Drag and drop placement is not available.

CSS Grid Generator

Build a CSS grid layout by setting column and row tracks, gaps and item spans. The preview updates as you type, and the generated CSS includes a container rule plus one rule for each item in the matching HTML. Load Bento layout for six tiles with mixed spans, Sidebar page for a fixed sidebar and fluid main column, Three card row for equal columns, or Badge over a hero for an intentional overlap. Overlapping items are outlined and named. The copied code includes the grid declarations; the preview adds its own colors, labels, padding and minimum sizes.

Tracks, gaps and items3 items

Columns

Rows

One track per space, up to 24 each way. Sizes: 1fr, 240px, 25%, auto, min-content, max-content, minmax(160px, 1fr).

Column gap

Row gap

Items, in grid lines

Item 1

Item 2

Item 3

Preview3 by 2

Item 1column 1 / 4, row 1 / 2

Item 2column 1 / 2, row 2 / 3

Item 3column 2 / 4, row 2 / 3

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}

.grid__item-1 {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.grid__item-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.grid__item-3 {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

Columns: 3

Rows: 2

Items: 3

Overlaps: 0

A 3 column by 2 row grid, 16px between the columns and 16px between the rows, holding 3 items. No two items overlap. Copy both CSS and HTML to keep these tracks, gaps and item placements. Preview decoration and minimum sizes are not included.

Bento layoutSix tiles with mixed spans; four columns stay in place as their widths change
4 columns, 3 rows, 6 items
Sidebar pageA fixed sidebar, a fluid main column, and a header and footer across both
2 columns, 3 rows, 4 items
Three card rowThree equal columns with a wider gap, each card in one cell
3 columns, 1 row, 3 items
Badge over a heroA badge placed on top of a full width hero, which is an overlap on purpose
4 columns, 1 row, 2 items, 1 overlapping pair

The class names in the CSS are the ones in the HTML, so paste both to keep the item placements. Up to 24 tracks each way and 50 items. When browser storage is available, the tracks, gaps and placements are saved in this browser. Start over appears above the tool once a draft is saved and clears it.

Accuracy. The track, gap and placement declarations are the ones the preview is rendered from. Preview colors, labels, padding and minimum sizes are not exported. Overlapping items are reported rather than refused. The container declarations are in the rule named .grid and the one rule per item beside it.

Common questions

How do I make a CSS grid layout?: Type the column tracks in the Columns field, one size per space, and the row tracks in the Rows field. Three equal columns is 1fr 1fr 1fr; a fixed sidebar beside a fluid column is 200px 1fr. Set the column and row gaps, then place each item by its grid lines: a 3 column grid has 4 column lines, so an item across the whole width runs from line 1 to line 4. The preview updates as you type and the CSS and HTML under it are ready to copy.
Why does the generator give me HTML as well as CSS?: The container rule uses .grid, and each item has a rule such as .grid__item-2. The matching HTML contains those classes in the same order. Paste the CSS into your stylesheet and the HTML into your page to keep the tracks, gaps and placements. The preview colors, labels, padding and minimum sizes are omitted, so your content and surrounding styles affect the final dimensions.
What track sizes can I use?: A number with fr, px or % (1fr, 240px, 25%), the intrinsic keywords auto, min-content and max-content, and minmax(a, b) with a minimum and a maximum, for example minmax(160px, 1fr). A size outside that set is refused by its position, so Column 3 is 10em tells you which track to fix rather than writing a rule that silently does nothing. Gaps take 0 or a number with px, rem, em or %.
Two of my items are on top of each other. Is that an error?: Grid items can share cells. The preview outlines overlapping pairs with a dashed edge and names them underneath. With the supplied markup and no custom stacking rules, the item written later in the HTML paints on top. An overlap can be intentional, as in Badge over a hero; change the item lines if you want separate cells.
How big a grid can it build?: Up to 24 column tracks, 24 row tracks and 50 placed items. Larger counts are refused with an explanation. Placement lines must be whole numbers inside the defined grid: a 3 column grid has lines 1 to 4. Tracks or gaps too large to read as finite numbers are refused.
What are grid lines, and why do items start at 1?: Lines are the edges between tracks. This tool uses positive grid line numbers starting at 1, so a grid with 3 columns has 4 column lines, and grid-column: 1 / 4 spans all three. CSS also supports negative line numbers, but this generator accepts only positive lines inside the tracks you define.
Is anything uploaded?: Grid inputs are processed in your browser and are not uploaded. No account is needed to build a grid or copy the CSS and HTML. When browser storage is available, the tracks, gaps and item placements are saved on this device. Once a draft is saved, Start over appears above the tool and clears it. If storage is blocked, you can still use the generator, but the draft will not be remembered.
How do I make a bento grid?: Load Bento layout to start with four equal fluid columns, three 120px rows and six tiles with different spans. Edit each tile's column and row start and end lines to change the arrangement. The example keeps four columns at every width; it does not add mobile breakpoints.
Does this generate responsive CSS grids?: Fractional tracks such as 1fr share available space, and percentages follow the container size. minmax(0px, 1fr) lets a track shrink below its content width. The number of columns and the item placements remain fixed. This generator does not write media queries or repeat(auto-fit, ...), so it does not automatically change to fewer columns on small screens.
Can I generate named grid areas or Tailwind classes?: The output uses plain CSS with grid-template-columns, grid-template-rows, grid-column and grid-row. You can define rectangular item spans using line numbers. Named grid-template-areas, the grid-area shorthand, Tailwind and Bootstrap class output are not available.
Does this create Flexbox layouts?: This generator writes display: grid and explicit row and column placements. It does not write Flexbox rules. Grid controls both axes; Flexbox arranges items along one main axis with optional wrapping.
Can I place items by dragging them?: Item placement uses labelled number fields for column and row start and end lines. The preview updates when you edit those fields. Drag and drop placement is not available.

The track, gap and placement declarations are the ones the preview is rendered from. Preview colors, labels, padding and minimum sizes are not exported. Overlapping items are reported rather than refused.