Short answer: a grid system in web design is an invisible framework of vertical columns, horizontal rows and consistent spacing that you use to align every element on a page. It gives your layout structure, rhythm and predictability, so visitors can scan content quickly and developers can build the design without guessing.
If you have ever looked at a website and thought “something feels off here”, there is a good chance the grid is missing or being ignored. In this guide, our team at Panpan breaks down exactly how grids work: columns, gutters, margins, baseline grids, and the difference between a 12-column and an 8-column setup. Then we show you how to pick the right grid for a marketing site, a portfolio or an e-commerce catalogue, and how to translate it into real CSS Grid code.
What Is a Grid System in Web Design?
A grid system is a set of intersecting vertical and horizontal guides that divide a page into equal, repeatable units. Elements (text blocks, images, cards, buttons) are then placed inside those units instead of being positioned by eye.
Think of it as the skeleton of the page. Users never see it, but they feel it. Three things happen when a grid is applied consistently:
- Alignment: edges line up, so the eye moves smoothly down the page.
- Consistency: spacing is repeated instead of invented section by section.
- Speed: designers make faster decisions and developers write less custom CSS.
Grid systems came from print design (Swiss typography of the 1950s), where columns organised newspapers and magazines. The web borrowed the idea, then added something print never had: the grid has to adapt to screens from 360px to 2560px wide.
The Anatomy of a Grid: Columns, Gutters, Margins and Rows
Before you can choose a grid, you need the vocabulary. Here are the five parts that make up almost every web grid.
| Element | What it is | Typical desktop value |
|---|---|---|
| Columns | The vertical fields content sits in. Usually flexible in width. | 12 columns |
| Gutters | The gaps between columns. They keep blocks from touching. | 24px or 32px |
| Margins | The outer breathing space between the grid and the screen edges. | 24px to 80px |
| Rows / modules | Horizontal divisions that create card and image blocks. | Content driven |
| Baseline grid | Invisible horizontal lines that text sits on, for vertical rhythm. | 4px or 8px increments |
Container width: where the grid lives
The grid does not usually span the full browser width. It sits inside a container with a maximum width, centred on screen. Common choices in 2026:
- 1140px to 1200px: the safe classic, comfortable line lengths for text.
- 1280px to 1440px: modern standard for marketing and SaaS sites.
- 1600px+ or full-bleed: for image-heavy portfolios and editorial layouts.
A design file built on a 1440px artboard with 12 columns, 24px gutters and 80px margins gives columns of roughly 84px each. Those numbers are a reference, not a law: on the live site the columns stretch and shrink with the viewport.
The 8-point spacing rule
Grids work best when every spacing value is a multiple of a base unit, usually 8px (with 4px allowed for tight typographic adjustments). So your paddings and margins become 8, 16, 24, 32, 48, 64, 96. This is the horizontal grid’s vertical twin, and it is what makes a page feel calm rather than random.
Why 12 Columns? The Math Behind the Standard
The 12-column grid dominates the web for one simple reason: 12 divides cleanly into more useful layouts than any other small number.
| Split | Columns used | Typical use |
|---|---|---|
| Halves | 6 + 6 | Text next to an image, hero sections |
| Thirds | 4 + 4 + 4 | Feature blocks, service cards, blog teasers |
| Quarters | 3 + 3 + 3 + 3 | Product cards, logo walls, footers |
| Sidebar layout | 8 + 4 or 9 + 3 | Blog post with sidebar, filtered catalogue |
| Asymmetric | 7 + 5 | Editorial hero, case study intro |
| Centred text | Columns 3 to 10 | Long-form reading width |
An 8-column grid gives you halves and quarters but no clean thirds. A 10-column grid gives halves and fifths but no thirds either. Twelve covers 2, 3, 4 and 6, which is why frameworks from Bootstrap to Material Design settled on it. The reasoning is set out in this piece.
When an 8-column grid is the better choice
Twelve columns on a 768px tablet screen produces columns barely 50px wide, which is useless as a placement unit. That is why most responsive systems drop to 8 columns on tablet and 4 columns on mobile.
An 8-column grid is also a deliberate desktop choice when:
- The site is content-first with few complex sections (a personal portfolio, a documentation site).
- You want fewer possible layouts, which forces discipline and consistency.
- Your card system is built around halves and quarters only.
A responsive grid plan you can copy
| Breakpoint | Viewport | Columns | Gutter | Margin |
|---|---|---|---|---|
| Mobile | 360 to 639px | 4 | 16px | 16px |
| Tablet | 640 to 1023px | 8 | 24px | 32px |
| Desktop | 1024 to 1439px | 12 | 24px | 48px |
| Large desktop | 1440px and up | 12 | 32px | auto (max-width 1440px) |
The 5 Types of Grids You Will Actually Use
1. Column grid
The workhorse: vertical columns only, 4 to 12 of them. Almost every website uses one. Best for marketing pages, blogs and landing pages.
2. Modular grid
Columns plus consistent rows, creating a matrix of modules. Perfect for e-commerce catalogues, dashboards and image galleries where items repeat in a predictable rhythm.
3. Baseline grid
Horizontal lines spaced at a fixed interval (for example every 8px) that all text baselines snap to. It creates vertical rhythm, so two adjacent columns of text line up line by line. Essential for editorial and long-form content.
4. Hierarchical grid
An irregular, content-driven structure where blocks vary in size on purpose. Used by news sites and creative portfolios to signal what matters most. Harder to keep consistent, so define reusable block sizes.
5. Manuscript grid
A single wide column with generous margins. Ideal for documentation, terms pages, or a focused article template with a 60 to 75 character line length.
How to Pick the Right Grid for Your Project
The grid should follow the job the site has to do. Here is how we approach it on client projects.
| Project type | Recommended grid | Why |
|---|---|---|
| Marketing site / landing page | 12 columns, 1200 to 1440px container, 24px gutters | You need thirds for feature blocks, halves for hero sections, and full-bleed bands for visual variety. |
| Portfolio | 8 or 12 columns with a hierarchical overlay, wide container | Images lead. Fewer columns plus intentional asymmetry keeps the work in focus. |
| E-commerce catalogue | 12-column modular grid, sidebar 3 + content 9 | Product cards must divide evenly into 2, 3 and 4 per row, with room for filters. |
| Blog / editorial | Manuscript or 12 columns with text in columns 3 to 10 | Readability first, with a baseline grid for vertical rhythm. |
| Web app / dashboard | Fluid 12-column modular grid, no max width | Data panels should use all available screen space. |
From Design to Code: The Grid in CSS Grid
Here is the part most beginner guides skip. A grid in Figma is only useful if it survives the trip into code. CSS Grid maps almost one to one onto the design grid. Anyone digging further should read Grid Systems Explained for Design Beginners.
Step 1: the 12-column container
.grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
max-width: 1440px;
margin-inline: auto;
padding-inline: 48px;
}What each line does: repeat(12, minmax(0, 1fr)) creates 12 equal flexible columns (the minmax(0, 1fr) trick prevents long words and images from blowing out a column). gap is your gutter. padding-inline is your outer margin. margin-inline: auto centres the container.
Step 2: placing elements on the grid
/* Hero: text on 6 columns, image on 5, with a 1 column gap */
.hero__text { grid-column: 1 / span 6; }
.hero__image { grid-column: 8 / span 5; }
/* Three feature cards, 4 columns each */
.feature { grid-column: span 4; }
/* Centred article column */
.article { grid-column: 3 / 11; }Notice that you never write pixel widths. You describe how many columns an element occupies, exactly like in your design file.
Step 3: making it responsive
/* Mobile first: 4 columns */
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
padding-inline: 16px;
}
.hero__text, .hero__image, .feature { grid-column: 1 / -1; }
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px; padding-inline: 32px; }
.feature { grid-column: span 4; }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-inline: 48px; }
.hero__text { grid-column: 1 / span 6; }
.hero__image { grid-column: 8 / span 5; }
.feature { grid-column: span 4; }
}grid-column: 1 / -1 means “span from the first line to the last”, which is the standard way to make an element full width at any breakpoint. Implementing this cleanly is bread-and-butter for a capable web development studio.
Step 4: the e-commerce catalogue grid
For a product listing you often do not need named column positions at all. Let the browser decide how many cards fit:
.catalogue {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 24px;
}
/* Highlight a promoted product across two cells */
.catalogue__item--featured { grid-column: span 2; }Combine it with a sidebar using the parent 12-column grid:
.shop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.shop__filters { grid-column: span 3; }
.shop__products { grid-column: span 9; }Step 5: full-bleed sections without breaking the grid
Marketing pages often need a coloured band that touches both screen edges while its content stays aligned. Named grid lines handle this elegantly:
.page {
display: grid;
grid-template-columns:
[full-start] minmax(24px, 1fr)
[content-start] minmax(0, 1200px) [content-end]
minmax(24px, 1fr) [full-end];
}
.page > * { grid-column: content; }
.page > .full-bleed { grid-column: full; }Step 6: baseline grid and vertical rhythm
Vertical rhythm comes from consistent line heights and spacing tokens:
:root {
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
}
body { font-size: 16px; line-height: 24px; } /* 3 x 8px */
h2 { font-size: 32px; line-height: 40px; margin-block: var(--space-6) var(--space-3); }
p { margin-block-end: var(--space-3); }Every value is a multiple of 8, so text across two columns stays visually aligned line by line.
Grid vs Flexbox: Which One and When?
| Use CSS Grid when | Use Flexbox when |
|---|---|
| You control rows and columns (page layout, catalogues, dashboards) | You lay out items in a single direction (nav bars, button rows, tag lists) |
| Placement is defined by the layout (a card must start at column 8) | Placement is defined by the content (items wrap naturally) |
| You want overlapping or asymmetric compositions | You need simple alignment and spacing inside a component |
In practice you use both: Grid for the page skeleton, Flexbox inside each card or component. The topic gets a thorough treatment elsewhere.
7 Common Beginner Mistakes With Grid Systems
- Designing on a fixed 1440px canvas and forgetting the middle. Always test 1024px, 1280px and 1920px.
- Using 12 columns on mobile. Drop to 4. Columns of 25px mean nothing.
- Gutters that are too small. Under 16px on desktop, blocks visually merge.
- Ignoring the grid “just this once”. One misaligned section undoes the whole system.
- Random spacing values. 13px here, 27px there. Stick to your 8px scale.
- Letting images ignore the grid. Either snap them to columns or make them deliberately full-bleed.
- Breaking the grid without a reason. Breaking it is allowed, but only to create emphasis, never by accident.
Your Quick Grid Setup Checklist
- Choose a container max width (1200px or 1440px is a safe start).
- Pick 12 columns for desktop, 8 for tablet, 4 for mobile.
- Set gutters: 16px mobile, 24px desktop.
- Set margins: 16px mobile, 48px desktop.
- Define an 8px spacing scale and use it everywhere.
- Set line heights as multiples of 8px for vertical rhythm.
- Build the layout with CSS Grid, components with Flexbox.
- Turn the grid overlay on in Figma and the browser dev tools, then check every section.
Frequently Asked Questions
What is the purpose of a grid system?
Its purpose is to organise content into a consistent, alignable structure. That improves scannability for users, speeds up design decisions, keeps a brand visually coherent across pages, and makes the handover to development far more reliable.
What are some examples of grid systems?
Common examples include the 12-column Bootstrap grid, Material Design’s responsive 4/8/12 column layout grid, Tailwind CSS grid utilities, Figma’s built-in layout grids, and custom CSS Grid systems built with grid-template-columns: repeat(12, 1fr).
Is grid HTML or CSS?
Grid is CSS. You write the HTML structure (a container with child elements), then apply display: grid and grid properties in CSS to control how those children are placed. HTML itself has no layout grid.
How do you use a grid system in design?
Set up a layout grid in your design tool (columns, gutters, margins), snap every element to column boundaries, keep spacing on an 8px scale, define how the grid changes at each breakpoint, and document the values so developers can reproduce them in CSS.
Is a 12-column grid always the right choice?
No. It is the most flexible default for marketing sites and e-commerce, but an 8-column grid can be a better fit for simpler, content-led sites, and a single-column manuscript grid is often best for long-form reading.
What is a baseline grid used for?
A baseline grid aligns text baselines to fixed horizontal intervals (typically 4px or 8px). It creates vertical rhythm, so text in adjacent columns and stacked sections lines up, which makes pages feel polished and easier to read.
Should the grid be fluid or fixed?
Fluid columns inside a fixed maximum-width container is the modern standard. Columns expand with the viewport up to a limit, which keeps line lengths readable on very large screens while adapting to smaller ones.
Need Help Applying This to Your Own Site?
A grid system is one of those invisible foundations: nobody compliments it, but every good site has one. If your pages feel slightly disorganised, or your developer and designer keep disagreeing about spacing, a documented grid usually solves both problems at once.
At Panpan, we design and build websites in Vannes with structured, responsive grid systems from the first wireframe to the final line of CSS. Get in touch if you would like us to audit your current layout or build your next site on solid foundations.