CSS Grid Calculator

1. Set container width — Enter the total width of your grid container in pixels.
2. Choose column count — Select the number of columns (12 is the most common standard).
3. Set gutter size — Define the gap between columns in pixels.
4. Review the calculations — See column width in px and %, plus span widths for common layouts.
5. Copy the CSS — Copy the generated CSS Grid code or the auto-fit responsive variant.

display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;

Auto-fit responsive variant:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
gap: 24px;
max-width: 1200px;

The column width is calculated by subtracting all gutter space from the container width, then dividing by the number of columns.