Skip to content
Calculator Tools
Web Development Calculators

CSS Grid Calculator

Work out grid column widths, gutters and the CSS for a layout of any column count.

Enter values

Results update as you type.

Result

Column width

74 px

CSS
grid-template-columns: repeat(12, 1fr); gap: 24px;
Width of a 4-column item
368 px
Content width
1,152 px
Total gutter space
264 px
Column as a percentage
6.424%
Item span CSS
grid-column: span 4;

Span widths

SpanWidth (px)Percent of content
1746.42%
217214.93%
327023.44%
436831.94%
546640.45%
656448.96%
766257.47%
876065.97%
985874.48%
1095682.99%
111,05491.49%
121,152100%

About the CSS Grid Calculator

Work out grid column widths, gutters and the CSS for a layout of any column count.

Also known as: grid layout calculator, column width calculator, grid gutter, css grid generator.

How to use this calculator

  1. Enter container width, columns, gap, container padding and the other fields.
  2. The result updates instantly as you type — press Calculate (or Enter) at any time.
  3. Review the breakdown shown under the main result.
  4. Use Copy result or Share to save the answer or send a link with your inputs.

Formula

column = (container − padding − gaps) ÷ columns

Worked example

Using the values pre-filled in the calculator above:

  • Container width = 1,200 px
  • Columns = 12
  • Gap = 24 px
  • Container padding = 24 px
  • Item spans = 4

the calculator returns:

  • Column width: 74 px
  • CSS: grid-template-columns: repeat(12, 1fr); gap: 24px;
  • Width of a 4-column item: 368 px
  • Content width: 1,152 px