CSS Grid Track Calculator

Summary

Build grid-template-columns and grid-template-rows values visually by mixing fr, px, %, em, rem, and minmax() tracks.

How it works

1. Add column tracks using the "+ Add Column" button and choose a unit type: fr, px, %, em, rem, auto, or minmax().
2. Set the value for each track. For minmax(), enter a minimum and maximum separately.
3. Repeat the same steps for row tracks if you need grid-template-rows as well.
4. Set the gap between tracks (column-gap and row-gap) to complete the shorthand.
5. Copy the generated CSS from the output panel and paste it directly into your stylesheet.

Use cases

• Design a Holy Grail layout with a fixed sidebar, fluid content area, and another fixed sidebar using fr and px tracks.
• Create a responsive image gallery grid where each column is at least 200px but expands to fill space with minmax(200px, 1fr).
• Build a dashboard with named areas by first mapping out the track sizes here.
• Generate equal-column grids (e.g. repeat(3, 1fr)) and verify how the fr values are distributed.
• Prototype asymmetric layouts without writing CSS by hand.
• Teach CSS grid concepts visually by tweaking track values and watching the preview update live.

Frequently Asked Questions