CSS Grid Generator
CSS grid turns messy layouts into clean rows and columns. Set the number of columns and rows, adjust the gap and row height while watching the live preview, then copy the container and item CSS.
How to use
- Set the number of columns and rows.
- Adjust the gap and row height while watching the preview.
- Copy the CSS for the container and items.
Tips
- Start with the mobile layout: one or two columns, then add columns for wider screens.
- Use the gap for spacing instead of margins on the items - it keeps the math clean.
- Name grid areas for complex layouts; named areas are easier to read than line numbers.
- Test with real content lengths; long words can force columns wider than planned.
Note: The columns use repeat(n, 1fr) so every column gets an equal share of the available width.