CSS Grid Calculator

Calculate grid layouts with column widths and gutters

Container Width (px)

Number of Columns

Gutter Width (px)

Calculations

Column Width 78.00px

Total Gutter Width 264px

Total Content Width 936.00px

CSS Code

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

Visual Preview

1

2

3

4

5

6

7

8

9

10

11

12

Column Spans

1 column 78.00px

2 columns 180.00px

3 columns 282.00px

4 columns 384.00px

6 columns 588.00px