CSS Grid Generator

How to Use the CSS Grid Generator

The CSS Grid Generator lets you create layouts using either an Equal Grid or a Custom Grid. Your settings are reflected in the preview on the right in real time, and you can copy the completed CSS and HTML directly.

Create an Equal Grid

An Equal Grid is ideal for arranging multiple items consistently, such as card lists, article lists, and image galleries.

Under “Column Settings,” choose one of the following two options.

Fixed Columns

Items are arranged evenly across the specified number of columns.

For example, setting the number of columns to three generates the following CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

1fr is a unit that distributes the available space inside the Grid container. repeat(3, 1fr) creates three columns of equal width.

Auto Wrap

Use Auto Wrap when you want the number of columns to change automatically according to the container width.

For example, setting the minimum column width to 240px produces CSS like this:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

minmax(240px, 1fr) keeps each column at least 240px wide and distributes any remaining space evenly.

Auto Fit and Auto Fill handle empty columns differently when there are fewer items.

• Auto Fit: Collapses empty columns and expands the occupied columns.
• Auto Fill: Keeps empty columns and maintains the column width even when there are fewer items.

When there are enough items to occupy every available column, Auto Fit and Auto Fill may look the same.

Change the Number of Items

For an Equal Grid, use “Number of Items” to change how many items appear in the preview.

This value is not included in the Grid CSS, but the HTML tab generates markup for the specified number of items.

For example, when the number of items is three, the generated HTML is:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

Create a Custom Grid

A Custom Grid lets you set the number of columns and rows, define each column and row size separately, and place items across any range.

For “Column Sizes” and “Row Sizes,” you can enter CSS Grid values such as:

1fr
200px
12rem
30%
auto
minmax(160px, 1fr)

For example, setting all three columns to 1fr gives each column the same width.

grid-template-columns: repeat(3, 1fr);

Setting the first column to 240px and the remaining columns to 1fr combines a fixed-width column with flexible columns.

grid-template-columns: 240px 1fr 1fr;

Place Items

Under “Item Placement” in the Custom Grid settings, drag across the grid to define the area where an item should be placed.

You can drag an existing item to move it to different cells. You can also drag any of its four edges to change the rows and columns it occupies.

Select an item to fine-tune its start and end positions numerically using “Column Start / Column End” and “Row Start / Row End.”

For example:

Column Start: 2
Column End: 4
Row Start: 1
Row End: 3

generates the following CSS:

.grid-item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

CSS Grid uses grid line numbers, rather than cell numbers, to define an item's area. 2 / 4 means that the item occupies the area from the second grid line to the fourth grid line.

You can also remove the selected item using the “Delete” button shown in the settings panel.

Adjust Row and Column Gaps

Use “Row Gap” and “Column Gap” to adjust the spacing between rows and columns.

As shown below, the first gap value controls row spacing, and the second controls column spacing.

gap: 16px 24px;

When both values are the same, the generator outputs the shorter form:

gap: 16px;

Adjust Item Alignment

“Justify Items” and “Align Items” control where each item is positioned within its grid area.

• Justify Items: Horizontal alignment in the inline direction
• Align Items: Vertical alignment in the block direction

Select Start, Center, End, or Stretch, and compare the result in the preview.

Check the Layout in the Preview

Your settings are reflected in the preview on the right in real time. Adjust the customization options while checking the result.

Change “Preview Width” above the preview to inspect the layout at different Grid container widths. This is especially useful with Auto Wrap because you can see how the number of columns changes as the preview becomes narrower or wider.

Preview Width is only used for checking the layout and is not included in the generated CSS.

Change the Class Names (Optional)

Open “Advanced Settings” to change the class names used for the Grid container and its items.

For example:

Container Class Name: cards
Item Class Name: card

These names are reflected in both the generated CSS and HTML.

<div class="cards">
  <div class="card">1</div>
  <div class="card">2</div>
</div>

Copy the CSS and HTML

Switch between the “CSS” and “HTML” tabs to check the generated code.

The CSS tab contains the styles required for the current Grid settings, while the HTML tab contains markup matching the item structure in the preview. Use the “Copy” button to copy the active code directly to your clipboard.

What Is CSS Grid?

CSS Grid is a CSS layout system for arranging elements in a grid of rows and columns.

At its simplest, apply display: grid to a parent element, then define its column and row structure.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

This example divides the container into three equal-width columns and adds 16px of space between items.

What Is the fr Unit?

fr is a unit for distributing the available space inside a Grid container.

For example:

grid-template-columns: 1fr 1fr 1fr;

divides the available width into three equal parts.

grid-template-columns: 1fr 2fr;

distributes the space between the first and second columns at an approximate ratio of 1:2.

You can also combine fr with fixed widths.

grid-template-columns: 240px 1fr;

Here, the first column is fixed at 240px, and the second uses the remaining space.

What Is repeat()?

repeat() lets you repeat the same column or row definition.

The following two declarations are equivalent:

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: repeat(3, 1fr);

It keeps the code concise when a layout contains many equal tracks.

What Is minmax()?

minmax() defines a minimum and maximum size for a Grid column or row.

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

In this example, the number and width of columns adjust to the container while each column remains at least 240px wide.

This is useful for creating responsive card lists and galleries without defining many media queries.

The Difference Between Auto Fit and Auto Fill

auto-fit and auto-fill are values used inside repeat() to automatically adjust the number of columns according to the container width. Combine them with minmax() to create a responsive grid.

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

grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

Both preserve the minimum width of each column and adjust the number of columns to fit the container. The difference is how they handle empty columns when there are fewer items than available columns.

• Auto Fit: Collapses empty columns and expands the occupied columns.
• Auto Fill: Keeps unoccupied columns and maintains the column width.

Auto Fit (empty column collapsed)
┌──────────────┬──────────────┐
│    Item 1    │    Item 2    │
└──────────────┴──────────────┘

Auto Fill (empty column retained)
┌─────────┬─────────┬─────────┐
│ Item 1  │ Item 2  │  Empty  │
└─────────┴─────────┴─────────┘

When there are enough items to occupy every generated column, there may be no visible difference.

What Are Grid Lines?

CSS Grid treats the boundaries between columns and rows as grid lines.

A three-column Grid has four grid lines along the column axis.

1         2         3         4
|  Col 1  |  Col 2  |  Col 3  |

For example:

grid-column: 1 / 3;

uses the area from the first line to the third line, spanning two columns.

The same principle applies to rows.

grid-row: 1 / 3;

The Custom Grid in this generator lets you set these start and end positions visually.

CSS Grid vs. Flexbox

CSS Grid is designed for two-dimensional layouts that use both rows and columns.

Flexbox specializes in one-dimensional layouts organized primarily along a single row or column.

Grid is well suited to card lists, page-level regions, and layouts spanning multiple rows and columns. Flexbox is often easier for one-directional arrangements such as navigation links or horizontal button groups.

You do not have to choose only one. A common approach is to use Grid for the larger layout and Flexbox inside individual regions.

FAQ

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