# 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