In the past, people talked a lot about 12-column grids for web design. This meant that on every page, the spacing was consistent between columns and all elements took up space according to the defined columns. Even hero sections would have text taking a certain amount of the columns, with space around it using the rest of the columns.
I see this idea a lot in design theory, but no one seems to discuss it when it comes to writing CSS or designing web applications now. Is this concept even still relevant? Or has it been replaced with a more flexible style of web design where consistent spacing is important but elements can basically be placed wherever they fit?
Wren said:
People are overthinking it a bit. 12-column grids can easily be split into halves, thirds, or quarters. That’s why they are so popular!
Exactly, the idea of a consistent grid comes from typography and layout design. The goal has always been to use a framework of, say, 12 columns, and apply portions for different sections of content. This is the norm in publication design, where everything is based on a grid and the size of the paper. The same applies to web design.
Recently, there’s been a bigger focus on responsive design because of mobile devices and the variety of screen sizes. So, having a strict nth column grid isn’t as crucial as ensuring your design is accessible. I often find it’s better to plan my layout mobile-first and consider how it will scale rather than trying to divide a global grid for every possible layout or screen ratio. Sometimes, keeping it simple is the best approach too.
@Mackenzie
Yeah. Still, a 12-column grid is often used. Mobile layouts usually stack multiple columns on top of each other, while they spread horizontally as the screen size increases. It’s about combining mobile-first principles without creating entirely different layouts for desktop.
This means that designing a consistent nth column grid is not as important as maintaining the accessibility of your design.
Edit: To clarify my terms, when I say ‘column’, I mean the visible layout of content blocks, while ‘slice’ refers to the underlying grid of 12 CSS vertical divisions of the viewport width.
You can still use slice-based design; just apply CSS classes to tell your outer elements to take up a specific number of slices based on viewport width. It’s quite straightforward and allows for flexibility.
For most publishers, a minimum column width of 300px is ideal. So, manage your viewport breakpoints and slices based on how many 300px columns fit within the viewport. Generally, this gives you three breakpoints: mobile with all 12/12 slices equaling a minimum of 300px, larger tablets where you can fit two columns of 300px with 6/12 slices, and desktops with three 300px+ columns of 4/12 slices.
Wren said:
People are overthinking it a bit. 12-column grids can easily be split into halves, thirds, or quarters. That’s why they are so popular!
As someone with a design degree now doing development, this is why we used the 12-column grid. It offers flexibility; you can have 12 columns, six pairs, four triples, three groups of four, two groups of six, or just one big column, all while maintaining visual unity.
Thinking this concept would fade due to responsive design shows a misunderstanding of why grid design exists and why it’s been important for about 70 years.
@Tilden
Yes, I’m confused too and worried that I missed something important. I’m wondering if some responses are from folks making applications that feel more like desktop apps with UI elements everywhere. For me, working on large informational websites for many clients, the 12-column grid is super helpful. It keeps everything uniform across hundreds of pages, making it easier for teams to work together on sites. What am I missing here?
The downside is that when I call something col-8 and another col-4, I don’t have precise control like saying this is 127px and that is 423px. But usually, I don’t need that level of detail. If I need it, I can always create a specific container for that within my usual 12-column grid.
@Tilden
Sorry, my English isn’t great. Are you telling me we should stick with grid design just because we’ve been doing it for 70 years? And because 12 can be easily divided?
It depends on where you look. Someone correct me if I’m wrong, but I think the main idea wasn’t to say 12-column grids are the only way to go. Rather, it was to encourage designers to maintain consistency and think more critically about their designs, instead of doing whatever looked “cool”.
So, while you may not see 12-column grids being used in every project, the core design principle it teaches is still very much present among more technical designers.
Also, keep in mind that design principles are adaptable over time. For instance, you shouldn’t be surprised if you don’t spot a 12-column layout in a unique project like a personal portfolio or a restaurant’s homepage.
100% agree. Back in 2010, I was forcing designers to work with a 12-column Photoshop template including spacing for desktop and mobile sizes, or they’d end up creating layouts that only looked good on a giant iMac. They were used to designing for print or just traditional desktop sites. I don’t use 12-column grids anymore because they know how to design for the web these days.
Grid layout starts in graphic design, so it will always be a relevant design pattern. It doesn’t have to be a 12-column grid, though. 12 is just a number that divides easily. With CSS grids now, you don’t have to rely on something like Bootstrap’s col-12, col-6, etc. Using fractional units still aligns with a row/column framework without needing to name every column. Even the popular tailwind uses 12 columns.
Even with a fluid site that’s 100% responsive, if you are working with 4k or 8k sizes, the fluidity can be poor. Everything stretches too much, so combining flexbox and grid with a fixed max width is usually better.
@Fern
Fluid doesn’t mean full width; you seem to be mixing up concepts. Fluid can have a max-width, meaning it resizes for every pixel without being fixed to breakpoints (e.g., 1024px for a 1280 screen or 768px for a 1024px screen).