A grid system is a structure of invisible lines that organizes content on a page into consistent, aligned sections. Whether you’re looking at a newspaper, a website, or a mobile app, a grid is the underlying framework that determines where text, images, and other elements sit. It works like scaffolding: the reader never sees it, but it holds everything in place.
The Three Parts of Every Grid
Every layout grid is built from three components: columns, gutters, and margins. Columns are the vertical divisions that hold your content. Text, images, and other elements sit inside columns, and a single piece of content can stretch across multiple columns when it needs more room. Most web grids use 12 columns, which is the industry standard because 12 divides evenly by 2, 3, 4, and 6, giving designers flexible options for splitting a page.
Gutters are the gaps between columns. They create breathing room so content doesn’t feel cramped. In the U.S. Web Design System, for example, the default gutter is about 16 pixels on smaller screens and 32 pixels on desktop. Margins sit on the outer edges, separating the content area from the left and right sides of the screen. Together, these three elements define where content can and cannot go.
Types of Grid Systems
Not all grids look the same. The simplest is a manuscript grid, which places all text in a single column. Books, long-form articles, and academic papers use this approach because it keeps continuous reading clean and uncluttered.
A column grid splits the page into two or more vertical sections. Newspapers and magazines rely on column grids to fit more content onto a page while keeping it scannable. A modular grid takes this further by adding horizontal divisions, creating a matrix of rectangular modules. This is useful for layouts with lots of different content types, like dashboards or image-heavy pages, because each module acts as a container that can hold a card, a photo, or a block of text.
A hierarchical grid is the most flexible. Instead of strict rows and columns, it organizes content based on importance. Apple’s product pages are a well-known example: the layout guides your eye to large hero images first, then down through product details. This approach is popular in web design because it lets designers prioritize what the viewer sees first.
Finally, a baseline grid is a series of evenly spaced horizontal lines that control vertical spacing. If your baseline grid has a line every 8 pixels, your text line height, paragraph spacing, and margins all follow that 8-pixel rhythm. This creates a sense of visual harmony, especially when text runs across multiple columns and needs to align horizontally.
Why Grids Matter
Grids solve several problems at once. The most obvious is consistency. When every page in a website or every spread in a magazine follows the same underlying structure, the experience feels cohesive. Users navigate more comfortably because elements appear where they expect them to be.
Readability improves because grids control line length and spacing. Text that stretches too wide across a screen is harder to read; columns keep lines at a comfortable width. Grids also establish visual hierarchy, making it clear which content is most important. A headline spanning all 12 columns commands more attention than a sidebar occupying 3.
For teams, grids act like a shared language. Josef Müller-Brockmann, the Swiss designer who formalized grid-based design in the mid-20th century, described his approach this way: “Subjectivity is removed in favour of a geometric grid that determines the arrangement of words and images.” His point was that grids make design decisions systematic rather than arbitrary. IBM adopted this principle early, using grid-based layouts to create advertising that looked consistent across countries, which is one reason the approach became known as the International Typographic Style.
Grids in Web Design
On the web, grids need to work across screen sizes ranging from 320-pixel phones to 1400-pixel widescreen monitors. This is where responsive grids come in. A responsive grid uses breakpoints, specific screen widths where the layout shifts. A common set of breakpoints starts at 320 pixels for mobile, jumps to 640 pixels for tablets, 1024 pixels for desktop, and 1200 or 1400 pixels for larger screens. At each breakpoint, content might reflow from a single column on mobile to four columns on desktop.
Two CSS technologies power most web grids today. Flexbox handles one-dimensional layouts, arranging items in a single row or a single column. It’s ideal for navigation bars, card rows, or any component where content flows in one direction. CSS Grid handles two-dimensional layouts, controlling both rows and columns simultaneously. If you need items to align vertically and horizontally at the same time, CSS Grid is the right tool. A practical way to choose: if you only need to control layout in one direction, use Flexbox. If you need alignment in both directions, use CSS Grid.
The distinction matters because Flexbox wraps items independently. When a row of flex items overflows onto a second line, each line distributes space on its own, so items on the second row won’t necessarily align with items above. CSS Grid maintains that alignment because it defines tracks for the entire container.
How CSS Frameworks Handle Grids
Most developers don’t build grids from scratch. Frameworks like Bootstrap and Tailwind CSS provide pre-built grid systems that speed up development.
Bootstrap uses a traditional 12-column grid with fixed breakpoints and built-in gutters. You assign column widths by telling each element how many of the 12 columns it should occupy. It’s straightforward and predictable, which makes it popular for projects that need to move fast. The tradeoff is less flexibility for unconventional layouts.
Tailwind CSS takes a different approach. Instead of a fixed 12-column system, it offers utility classes that let you define any number of columns, custom gap sizes, and as many breakpoints as you need. A four-column grid with 16 pixels of spacing between items takes a single line of markup. This flexibility is powerful but comes with a steeper learning curve, especially for newer developers. Both frameworks are mobile-first, meaning the layout starts at the smallest screen size and scales up as the screen gets wider.
Baseline Grids and Vertical Rhythm
Horizontal grids get the most attention, but vertical spacing matters just as much. A baseline grid sets a repeating interval, often 4 or 8 pixels, and every element on the page snaps to that rhythm. Line heights, padding, margins, and even image heights all follow multiples of the base unit.
When vertical spacing is consistent, text across adjacent columns lines up on the same invisible horizontal lines. This alignment is subtle but noticeable: pages feel more polished, and the eye moves through content more smoothly. If your base unit is 8 pixels, your body text might have an 8-pixel line height, headings might have 16 or 24 pixels of space above them, and paragraph margins might be 8 or 16 pixels. Everything stays in rhythm.