How to Generate CSS Grid Layout Code with Columns, Rows, and Gaps

What the CSS Grid Generator does

CSS Grid Generator turns column, row, and gap settings into CSS Grid layout code. It is useful when you want a starting point for a grid container and need to choose between repeated tracks, custom track text, and pixel-based spacing.

You can leave the controls at their defaults or provide your own values. The default setup uses 3 columns, auto rows, a general gap of 10, and column and row gaps of 0. Because the settings are optional, you can begin with a basic layout and refine it as needed.

How to generate CSS Grid code

1. Enter a column value. A digits-only value such as 3 is converted to a repeated flexible track declaration. Custom text such as 200px 1fr or 1fr 1fr 1fr is retained as entered.

2. Enter a row value if you want to change the default. A digits-only row value other than auto is converted to repeated auto tracks. Other row text, including auto, is retained.

3. Set the general gap if you want one spacing value for the grid. A truthy gap value is emitted with the px unit. A falsy value leaves out the general gap declaration.

4. Set the column gap and row gap separately when the two directions need different spacing. Each truthy value is emitted with px; its corresponding declaration is omitted when the value is falsy.

5. Generate the result and review the CSS. The output declares display: grid and includes separate column and row template declarations. Copy the generated layout code into the appropriate grid container, then adjust the values if the design needs different tracks or spacing.

How to read the generated result

Read numeric columns as a request for equal flexible tracks: a value of 3 produces repeat notation using 1fr. Numeric rows use repeat notation with auto, but only when the value consists of digits and is not auto. This means the generator does not treat every piece of custom CSS text as a request for transformation; text outside those numeric cases is retained.

Spacing has two levels. The general gap can provide one pixel-based value, while column-gap and row-gap let you control each direction independently. A falsy individual value does not create its declaration, so the resulting CSS may contain a general gap, separate directional gaps, both, or neither, depending on the supplied settings.

The generated result is layout CSS rather than a complete page or component. Review the track text and spacing declarations before using it, especially when entering custom expressions.

Worked example

A developer is preparing a four-column card layout with automatic rows and different horizontal and vertical spacing.

Set columns to 4, rows to auto, the general gap to 16, the column gap to 24, and the row gap to 8, then generate the result.

The generated CSS includes display: grid, a column template using repeat notation for 4 flexible tracks, an auto row template, and gap declarations using px for the supplied truthy values.

Limitations

• Only digits-only track values receive the documented repeat transformation. Other column or row text is retained rather than being described here as parsed or validated, and emitted numeric gap declarations use px.

Common errors

• If you enter a gap with a unit and expect that unit to be preserved, the output can differ from your intent because emitted numeric gap declarations use px. Enter the spacing number and review the generated declarations before copying them.

FAQ

How do numeric column values work?

When the column value contains digits only, it is converted to repeat notation with 1fr, so 3 produces three equal flexible tracks. Custom text is retained instead.

How are numeric row values handled?

When the row value contains digits only and is not auto, it is converted to repeat notation with auto. Other row text is retained.

Can I choose a different unit for the gap?

No. A truthy gap value is emitted with the px unit, and separate column-gap or row-gap values follow the same rule. Falsy values omit their corresponding declarations.