Layout grid generator

Build a 12 / 16 / 24 column layout grid: container width, column count, gutter, outer margin and responsive breakpoints, emitted as .container / .row / .col-* classes with a flex or CSS Grid implementation.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Grid options

Column width = container width ÷ columns × span. The flex build cancels column padding with a negative row margin; the CSS Grid build uses repeat(n, minmax(0, 1fr)) plus gap.

Grid columnsContainer width (px)Gutter (px)Container margin (px)Column class prefix

Implementation

Responsive breakpoints

Each breakpoint produces one @media block with a container max-width plus .col-breakpoint-span classes. Leave the breakpoint column count empty to reuse the global one.

Breakpoint nameBreakpoint container width (px)Breakpoint columns (optional)

Live preview

The preview renders with the current options, so the column widths, gutter and container width match the generated CSS.

Full row (1 column per cell)Sample rows：6+6 / 4+4+4 / 3+3+3+3

Result

Class	Span	Width
.col-1	1	8.333333%
.col-2	2	16.666667%
.col-3	3	25%
.col-4	4	33.333333%
.col-5	5	41.666667%
.col-6	6	50%
.col-7	7	58.333333%
.col-8	8	66.666667%
.col-9	9	75%
.col-10	10	83.333333%
.col-11	11	91.666667%
.col-12	12	100%

Full CSS

:root {
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-gutter-half: 12px;
  --grid-margin: 16px;
  --container-max-width: 1200px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -12px;
}

[class^="col-"], [class*=" col-"] {
  box-sizing: border-box;
  padding-inline: 12px;
}
.col-1 {
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
.col-2 {
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.col-5 {
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-7 {
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.col-10 {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}
.col-11 {
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* sm: ≥576px */
@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* md: ≥768px */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* lg: ≥992px */
@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

Responsive part

/* sm: ≥576px */
@media (min-width: 576px) {
  .container {
    max-width: 576px;
  }
  .col-sm-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* md: ≥768px */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
  .col-md-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* lg: ≥992px */
@media (min-width: 992px) {
  .container {
    max-width: 992px;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

Variables

:root {
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-gutter-half: 12px;
  --grid-margin: 16px;
  --container-max-width: 1200px;
}

What this tool does

Lay the foundation for a new project: set 12 columns, a 1200px container and a 24px gutter, and get the whole .container / .row / .col-* set without copying a framework grid.
When 12 columns are not the right fit — 16 for card lists, 24 for fine-grained layouts — switch the count and every column percentage is recomputed.
Generate breakpoints together with container widths: each breakpoint yields .col-md-6 style classes plus the matching container max-width, ordered mobile-first.
Only need design tokens? Copy --grid-columns / --grid-gutter / --grid-margin / --container-max-width straight out of the :root block.

Example

Input

12 columns, 1200px container, 24px gutter, 16px margin, flex build, no breakpoints

Output

:root { --grid-columns: 12; --grid-gutter: 24px; --grid-gutter-half: 12px; --grid-margin: 16px; --container-max-width: 1200px; } / .container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; } / .row { display: flex; flex-wrap: wrap; margin-inline: -12px; } / .col-6 { flex: 0 0 50%; max-width: 50%; }

Column widths are percentages, so on a 12 column grid .col-1 is 8.333333% and .col-5 is 41.666667%.

Frequently asked questions

How is this different from a CSS Grid generator?

This is a page layout grid: column width = container width ÷ columns × span, delivered as .container / .row / .col-* classes, with flex and CSS Grid as two possible implementations. If you want grid-template-columns or grid-area properties, use a CSS Grid generator instead.

What is the negative margin in the flex build for?

Columns create their spacing with padding-inline: gutter/2, which adds gutter/2 of empty space on both edges of the row. The row cancels it with margin-inline: -gutter/2 so the outer columns line up with the container edges. With a 0 gutter you get margin-inline: 0 rather than -0.

Why are column widths values like 8.333333%?

One column of twelve is 1/12 = 8.3333…%, which never divides evenly. The tool keeps six decimals so the value stays accurate without rounding pushing a full row past 100% and wrapping it. For exactness use the CSS Grid build, which distributes space with fr units.

How do the responsive classes work?

Declaring a breakpoint md (768px) produces classes such as .col-md-6 that only apply from 768px up, and rewrites the container max-width inside that breakpoint. The usual pattern is .col-12 .col-md-6 — full width on small screens, half width from md.

Can I change the column count?

Yes, any integer from 1 to 24, most commonly 12, 16 or 24. A breakpoint can even override it, for example 16 columns on small screens and 12 on large ones, and each @media block gets the matching number of column classes.

Keywords：layout gridgrid systemcss gridflexboxcolumnsgutter栅格系统布局网格栅格列宽响应式前端工具

What this tool does

Example

Frequently asked questions

Related tools