DESIGN

Home › Glossary › Design· 193 ·

Grid System

grid sis-temnoun

Filed underDesign

In brief · quick answer

A grid system is a structure of columns, gutters, and margins that provides a consistent framework for arranging content on a page. It brings order, alignment, and rhythm to layouts.

§ 1 Definition

A grid system is a layout framework that divides a page into columns separated by gutters, with consistent outer margins. It provides a repeatable structure for placing content so that designs feel ordered and coherent rather than ad hoc. Grids have been used in print design for centuries. In digital design, grid systems are typically responsive: the number of columns changes based on screen width (12 columns on desktop, 8 on tablet, 4 on mobile). The 12-column grid is the most common because 12 divides evenly into 1, 2, 3, 4, and 6-column layouts, offering maximum flexibility.

§ 2 Anatomy of a Grid

Columns: The vertical sections that hold content. Their width is determined by the total grid width divided by the column count minus gutters. Gutters: The fixed gaps between columns. Gutters do not contain content. Margins: The space between the edge of the screen or container and the first and last columns. Modules: The intersection of a column and a vertical row, forming a unit cell. A grid system defines these values globally so every layout decision is consistent.

§ 3 Fixed, Fluid, and Responsive Grids

Fixed grids have a defined pixel width (like 1200px) and center the container on larger screens. Fluid grids use percentage-based column widths so the layout stretches to fill the viewport. Responsive grids combine the two: they use percentage columns for fluidity within breakpoints but change the column count and layout at defined breakpoint widths (like 768px, 1024px, 1440px). Most modern design systems use responsive grids.

§ 4 Choosing a Column Count

12 columns is the industry standard for good reason: it supports many subdivision options. 6-column grids (2, 3, 6 subdivisions) work well for simpler layouts. 8-column grids suit interfaces with frequent 4-column layouts. 24-column grids give maximum flexibility for complex data dashboards but require careful naming to avoid overcomplication. The right column count depends on the variety of layouts you need to produce. Most teams should start with 12 and adjust if the constraint proves too tight or too loose.

§ 5 In code

/* 12-column responsive grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;  /* gutter */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;  /* outer margins */
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-12 {
  grid-column: span 12;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 16px;
  }
  .col-span-4, .col-span-6, .col-span-12 {
    grid-column: span 4;
  }
}

§ 6 Common questions

Q. Is a grid system restrictive to creativity?: A. No. A grid provides structure so your creative energy goes into solving problems rather than guessing measurements. The most creative layouts often work within a grid and only break it deliberately for emphasis. Breaking the grid is a powerful move. Breaking it all the time is chaos.
Q. Should I use CSS Grid or Flexbox for grid layouts?: A. CSS Grid is built for two-dimensional layouts (rows and columns simultaneously) and is the better choice for page-level grids. Flexbox excels at one-dimensional layouts (a row or a column) for component-level arrangements. Most modern designs use both: CSS Grid for the page layout, Flexbox for arranging content inside grid cells.

Key takeaways

A grid system provides consistent structure for placing content on a page.
12-column grids offer the most layout flexibility (divisible by 1, 2, 3, 4, 6).
Grid anatomy: columns, gutters, margins, and sometimes modules.
Responsive grids change column count at breakpoints while keeping consistent gutters and margins.
CSS Grid for page layout; Flexbox for component-level arrangements.

How Atomic Glue helps

We build responsive grid systems that scale from mobile to widescreen. CSS Grid or Flexbox, we choose the right tool. Check our Creative Services or get in touch.

Get in touch

# Grid System

A grid system is a structure of columns, gutters, and margins that provides a consistent framework for arranging content on a page. It brings order, alignment, and rhythm to layouts.

Category: Design

Author: Atomic Glue Editorial Team

## Definition

## Anatomy of a Grid

## Fixed, Fluid, and Responsive Grids

## Choosing a Column Count

## In code

/* 12-column responsive grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;  /* gutter */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;  /* outer margins */
}

.col-span-4 {
  grid-column: span 4;
}

.col-span-6 {
  grid-column: span 6;
}

.col-span-12 {
  grid-column: span 12;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 16px;
  }
  .col-span-4, .col-span-6, .col-span-12 {
    grid-column: span 4;
  }
}

## Common questions

Q: Is a grid system restrictive to creativity?

A: No. A grid provides structure so your creative energy goes into solving problems rather than guessing measurements. The most creative layouts often work within a grid and only break it deliberately for emphasis. Breaking the grid is a powerful move. Breaking it all the time is chaos.

Q: Should I use CSS Grid or Flexbox for grid layouts?

A: CSS Grid is built for two-dimensional layouts (rows and columns simultaneously) and is the better choice for page-level grids. Flexbox excels at one-dimensional layouts (a row or a column) for component-level arrangements. Most modern designs use both: CSS Grid for the page layout, Flexbox for arranging content inside grid cells.

## Key takeaways

A grid system provides consistent structure for placing content on a page.
12-column grids offer the most layout flexibility (divisible by 1, 2, 3, 4, 6).
Grid anatomy: columns, gutters, margins, and sometimes modules.
Responsive grids change column count at breakpoints while keeping consistent gutters and margins.
CSS Grid for page layout; Flexbox for component-level arrangements.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/grid-system