CSS Grid Generator

CSS Grid Generator helps you design two-dimensional layouts. You choose the number of columns and rows, size each track (fr, px, %, auto, minmax() and more), set gaps, size, padding and alignment, and place items by their start and end grid lines with justify-self and align-self. Dashed lines show where the tracks really are, and invalid or overlapping placements are refused with an explanation.

Grid layouts are powerful but hard to picture from code alone. Seeing the tracks and placements while you edit makes it easy to build page layouts, dashboards and card grids correctly, and the generated CSS can be pasted straight into a project.

1. Set the number of columns and rows.
2. Enter a size for each column and row track.
3. Adjust gaps, width, height, padding and alignment.
4. Place items by choosing column and row start and end lines, or leave them on auto.
5. Add, remove or reorder items and check the live preview.
6. Copy or download the CSS and HTML.

• Up to 12 columns and 12 rows
• Track sizes with fr, lengths, auto, min/max-content, minmax() and fit-content()
• Automatic repeat() for equal tracks
• Gap, row-gap and column-gap
• justify/align items and content
• Per-item start and end lines, justify-self and align-self
• Overlap and out-of-range placement checks
• Visible track lines, including shaded implicit tracks

• Use fr units for flexible columns and minmax() to set sensible minimum sizes.
• Place large items explicitly and let smaller ones auto-place.
• Keep the source order logical for screen readers, even if items are placed elsewhere visually.
• Watch for shaded implicit rows — they mean items didn’t fit the grid you defined.
• Test the layout at different widths and add media queries where needed.