Open any well-designed website and squint. You’ll notice invisible lines running through the layout. Headlines align with images. Text columns share edges. Spacing feels intentional, rhythmic.
That’s the grid working.
Grids are the invisible scaffolding that makes design feel organized rather than scattered. Without them, elements float randomly on the page. With them, everything has a reason to be where it is.
Amateur design often lacks this discipline. The spacing is inconsistent. Elements almost align but don’t quite. The eye catches these near-misses subconsciously. Something feels off even if the viewer can’t articulate what.
The 12-Column Standard
Bootstrap popularized the 12-column grid. Now it’s everywhere.
Why 12? Mathematics. Twelve divides evenly by 2, 3, 4, and 6. Want two equal columns? Each gets 6. Three columns? Each gets 4. Four columns? Each gets 3. Six columns? Each gets 2. The flexibility handles nearly any layout without awkward remainders.
Setting up a 12-column grid means defining: total content width, gutter width between columns, and margin width on the sides. Content then spans some number of columns: a sidebar might span 3, main content might span 9.
Scaling works well. Add a new page and the grid already exists. Add a new section and existing patterns tell you where things go. The designer doesn’t start from zero each time.
But 12 isn’t sacred. Some projects work better with 8 columns. Others need 16 for finer control. A portfolio site with large images might use 6. The principle matters more than the specific number: pick a system and use it consistently.
CSS Grid Changed Everything
Before CSS Grid, implementing complex layouts meant fighting CSS. Floats, clearfixes, positioning hacks. The layouts were possible but the code was ugly.
CSS Grid is built for two-dimensional layouts. Define rows and columns explicitly. Place items exactly where you want them. Create gaps between cells. The browser handles the math.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}That’s it. A 12-column grid with 20px gutters. Items placed inside follow the grid automatically or can be explicitly positioned across specific columns.
Flexbox serves different purposes. It handles one-dimensional layouts: either a row or a column, not both simultaneously. Navigation bars, button groups, card rows within a grid cell. Flexbox distributes space along a single axis elegantly.
Either/or framing misses the point. Most modern layouts use both. CSS Grid for the overall page structure. Flexbox for components within grid cells. They complement rather than compete.
Breaking the Grid Intentionally
Strict grid adherence creates clean, professional layouts. It can also create boring, predictable layouts.
Don’t abandon the grid. It’s about breaking it strategically.
A hero image that bleeds to the edge of the viewport while text content stays in the grid. An accent element that overlaps two grid areas. A pull quote that spans an unexpected column width. These breaks create visual interest precisely because everything else follows the rules.
Intentionality matters. A designer who understands the grid can violate it for specific effect. A designer who doesn’t understand the grid produces chaos that looks like mistakes.
Magazine layouts have done this for decades. Editorial design breaks grid conventions constantly for dramatic effect. Web design borrowed these techniques but applies them more cautiously since web layouts need to flex across different screen sizes.
Test grid breaks on multiple viewport sizes. An element that overlaps beautifully on desktop might collide awkwardly on tablet. Responsive grid breaking requires extra attention.
Responsive Grid Behavior
Grids need to adapt to screens.
A 12-column desktop layout doesn’t work on a phone. The columns become too narrow. Content becomes unreadable. The solution: different column configurations at different breakpoints.
Desktop might use all 12 columns. Tablet might collapse to 8. Phone might collapse further to 4 or even single column.
Content might also reflow. A three-column feature section on desktop becomes a single column with stacked items on mobile. An image that sits beside text on desktop moves above text on mobile.
CSS Grid and media queries make this manageable:
.item {
grid-column: span 4;
}
@media (max-width: 768px) {
.item {
grid-column: span 6;
}
}
@media (max-width: 480px) {
.item {
grid-column: span 12;
}
}Items occupy one-third width on desktop, half width on tablet, full width on mobile. Same content, appropriate presentation at each size.
Subgrid Solves Nested Problems
A common frustration: you have a grid for the page, and a component within the page that needs its own grid. Aligning the inner grid with the outer grid requires manual coordination. Change the outer grid and the inner grid breaks.
CSS Subgrid lets nested elements inherit the parent grid’s tracks. The inner component doesn’t define its own columns. It uses the columns from the parent.
.card-container {
display: grid;
grid-template-columns: subgrid;
}Now the card container uses whatever columns its parent defined. Headers inside one card align perfectly with headers in adjacent cards because they all share the same underlying grid.
Browser support for subgrid is now solid enough for production use. It solves alignment problems that used to require JavaScript or very careful CSS coordination.
Baseline Grids for Typography
Horizontal column grids get most of the attention. Vertical baseline grids matter too.
A baseline grid establishes consistent vertical rhythm. Text lines across different columns align horizontally. Headings and body text lock to the same underlying rhythm. The page feels organized vertically as well as horizontally.
Implementing this requires attention to line heights, margins, and padding. If body text has 24px line height, headings and spacing should be multiples of 24px. A heading might have 48px line height. Paragraph margins might be 24px.
This is harder on the web than in print. Print designers set baseline grids and everything follows. Web text reflows dynamically. Images have variable heights. Components have internal spacing. Maintaining perfect baseline alignment often proves impractical.
Compromise with approximate baseline rhythm rather than perfect alignment. Use consistent spacing units based on the base line height. Accept that some elements won’t lock perfectly. The overall rhythm matters more than pixel-perfect alignment.
Documentation Makes Grids Usable
A grid exists in a designer’s head until it’s documented. Then it exists for the whole team.
Design system documentation should specify:
Column count and behavior at each breakpoint. Gutter widths. Container max-widths and margins. How elements should span columns in different layouts. How grid breaks are used and when they’re appropriate.
Visual examples help more than written rules. Show the grid overlaid on actual page layouts. Show correct and incorrect usage. Show responsive behavior step by step.
Without documentation, different team members interpret the grid differently. Layouts drift. Consistency erodes. The grid becomes a suggestion rather than a system.
Figma and other design tools can show grids as overlays. Developers can add grid visualizations to their development environments. Keeping the grid visible while working helps catch misalignment before it ships.
When Grids Don’t Apply
Rigid grid systems aren’t always necessary.
Artistic portfolios might benefit from intentionally organic layouts. Experimental branding sites might break conventions as part of their message. Single-page microsites might be too small to warrant grid infrastructure.
But these are exceptions. Most commercial web projects benefit from grid discipline. The sites that intentionally reject grids usually do so with deep understanding of what they’re rejecting and why.
A common mistake: assuming that because a project is “creative,” it shouldn’t use a grid. Creativity and structure aren’t opposites. Constraints often enhance creativity by forcing focus. The most creative solutions often emerge from working within and against systematic constraints.
Print Principles Transfer Partially
Web designers can learn from print’s century of grid development. Josef Müller-Brockmann’s work on grid systems. Swiss design’s mathematical approach to layout. These principles inform digital design.
But web differs from print in ways that matter.
Print is fixed. Web is fluid. A print grid defines exact positions. A web grid defines relationships that adapt to context.
Print controls typography precisely. Web typography responds to user settings, browser rendering differences, dynamic content lengths. Perfect baseline alignment becomes challenging when text can be any size.
Print exists in isolation. Web exists in browsers with their own chrome, scroll bars, and interface elements competing for attention.
Transfer happens through conceptual understanding of proportion, rhythm, and hierarchy. The principles apply even when the specific techniques need adaptation.
FAQ
Should I use a framework like Bootstrap or build my own grid?
Project requirements should drive this decision. Bootstrap provides a grid system plus many other components, useful for rapid development when you’re fine with Bootstrap’s conventions. Custom grids offer more control and smaller file sizes but require more setup. For unique designs that differ significantly from Bootstrap’s assumptions, custom grids often make more sense. For projects prioritizing speed over uniqueness, frameworks help.
How do I decide between CSS Grid and Flexbox for a specific layout?
If the layout is two-dimensional, meaning you care about both row and column placement simultaneously, use CSS Grid. If the layout is one-dimensional, meaning items flow along a single axis, use Flexbox. A page-level layout with distinct regions is Grid territory. A row of buttons that need spacing is Flexbox territory. Often you’ll use both in the same project for different components.
Is baseline grid really worth the effort on web?
Perfect baseline alignment usually isn’t worth the ongoing maintenance headache. Approximate vertical rhythm is more achievable: consistent spacing units, harmonious proportions, general alignment without pixel-perfect locking. The visual benefit of perfect baselines is small compared to the implementation cost. Focus on other aspects of typographic quality instead.
Our content comes from a CMS and has unpredictable lengths. How do we maintain grid integrity?
Design for range rather than specific lengths. Test with very short and very long content. Use CSS that handles both gracefully: min-heights, flexible heights, overflow handling. Grids should accommodate content variation rather than requiring content to fit exact specifications. The grid provides structure; content fills that structure however it needs to.
Sources
Müller-Brockmann, Josef. Grid Systems in Graphic Design. Verlag Niggli, 1996.
CSS-Tricks. A Complete Guide to CSS Grid. css-tricks.com/snippets/css/complete-guide-grid
MDN Web Docs. CSS Grid Layout. developer.mozilla.org/en-US/docs/Web/CSS/CSSGridLayout
Smashing Magazine. Complete Guide to Grid. smashingmagazine.com/2020/01/understanding-css-grid-container
A List Apart. Content-out Layout. alistapart.com