What is the fr unit in CSS Grid?

The fr (fractional) unit represents a fraction of the available space. 1fr in a 3-column grid gives each column one-third of the container width, adjusted for fixed-size tracks.

Can I create responsive grids?

Yes. Use auto-fill or auto-fit with minmax() to create grids that adapt to the container width without media queries.

Does it support named grid areas?

Yes. You can define named grid areas and assign items to them using grid-area, which is supported in all modern browsers.

Best Free Online CSS Grid Generator

CSS Grid is the most capable layout system available in CSS, but its two-dimensional nature and the breadth of properties make it harder to learn and use without visual feedback. devtoolkit.sh's CSS Grid Generator lets you design a grid layout visually: specify the number of rows and columns, set track sizes (fr units, px, auto), configure gap, and place items in specific grid areas by clicking and dragging on the visual editor. The generated CSS includes the container definition (grid-template-columns, grid-template-rows, gap) and the placement rules for each item (grid-column, grid-row). The result is clean, copy-ready CSS that works in any modern browser. The generator supports all common track sizing functions including repeat(), minmax(), and auto-fill, making it practical for responsive layouts as well as fixed grids. Experimenting with grid-template-areas in the visual editor — naming regions and assigning items to them — makes it much easier to understand the named area syntax before writing it by hand in production code.

Columns

Rows

Column width

Row height

Gap8px

1

2

3

4

5

6

CSS (container)

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 80px 80px;
gap: 8px;

FAQ

What is the fr unit in CSS Grid?: The fr (fractional) unit represents a fraction of the available space. 1fr in a 3-column grid gives each column one-third of the container width, adjusted for fixed-size tracks.
Can I create responsive grids?: Yes. Use auto-fill or auto-fit with minmax() to create grids that adapt to the container width without media queries.
Does it support named grid areas?: Yes. You can define named grid areas and assign items to them using grid-area, which is supported in all modern browsers.