Grid Layout Calculator
Calculate CSS grid columns, gaps, container widths, and generate simple grid-template-columns CSS.
Grid Layout Calculator
This calculator auto-updates when values change.
Column width
384px
Total gap width
48px
CSS
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
About This Grid Layout Calculator
This grid layout calculator helps plan CSS grid columns, gaps, and container widths before you write the final CSS.
It is designed for simple equal-column layouts where you need to understand column width and gap space quickly.
How to Use This Tool
- 1
Choose what to calculate
Calculate column width, container width, or generate a CSS grid snippet.
- 2
Enter columns and gap
Add the number of columns and the gap size in pixels.
- 3
Review the grid output
Use the preview, column width, total gap width, and CSS snippet.
Frequently Asked Questions
How is column width calculated?v
Total gap width is subtracted from container width, then the remaining width is divided by the number of columns.
Why can a grid be off by 1px?v
Browsers sometimes round sub-pixel values differently depending on viewport size and device pixel density.
Does this support unequal columns?v
This calculator focuses on equal-column grid layouts and simple repeat-based CSS.