Definition

What Is a Grid System in Web Design?

A layout framework of columns and gutters used to organise content consistently across a webpage or design. Ensures alignment and visual order.

Related Terms

Responsive Design

Visual Hierarchy

Whitespace

Above the Fold

Accessibility (A11y)

Example

A 12-column CSS grid allows a designer to place two 6-column content blocks side by side on desktop, stacking them on mobile.

The 12-column grid has been the dominant web layout standard since Bootstrap's introduction in 2011 and remains the most widely used grid structure in professional web design today.

Synonyms:

Column grid, Layout grid

Acronyms:

-

What it applies to

Page layout design — both in design tools (Figma) and in front-end code (CSS). A grid system is the structural backbone that ensures consistent alignment across every page of a site.

How to set up a grid in CSS

  • Define a grid container: display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
  • Place child elements across columns: grid-column: span 6; — this element occupies 6 of the 12 columns (half the width).
  • Use the same grid at all breakpoints, adjusting column spans via media queries for smaller screens.

How to set up a grid in Figma

  • Select a frame (your page canvas) and add a Layout Grid from the right panel.
  • Set to Columns, Count: 12, Gutter: 24px, Margin: 80px (for desktop). This creates the same grid reference every designer on the project works to.
  • Create matching grids for tablet (8 columns) and mobile (4 columns) on their respective frames.

In Webflow

Use Webflow's Grid element for two-dimensional layouts, or Flexbox for one-dimensional row/column arrangements. Set up a global grid class (e.g., .container with max-width 1200px and auto margins) used across all pages as the consistent layout wrapper.

Grid System: Common Questions Answered

Question

Answer