October 2026

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