@Hadi
Flexbox is typically set to full width, adapting to breakpoints. What I meant is for very large monitors, flexbox doesn’t work well, so you’d need a mix of flex and grid techniques with a fixed max-width to center the content.
@Fern
No, flexbox is not always full width. You can use max-width with flexbox without a grid. Also, fluid design doesn’t imply full width.
I still organize everything with frames, image maps, and hidden tables.
Axelle said:
I still organize everything with frames, image maps, and hidden tables.
“Web Master” detected, hahah! Seriously, I once worked on a really dated front-end project that used all of those methods. It was developed by a team from Fiverr or Upwork just a few years ago, and the product owner had me fix it because it didn’t respond to different screen sizes.
@Hayden
Wow, I did all that back in 1997 lol.
I still have fond memories of programming in Perl, though.
960 remains my preferred content width. So I’d say yes, it is relevant for the projects I develop.
Hollis said:
960 remains my preferred content width. So I’d say yes, it is relevant for the projects I develop.
As someone who only browses the web on 1080p monitors with two windows open, thank you.
@Ren
For 1080p, I believe you mean vertical resolution. That doesn’t provide much info, as horizontal size depends on the aspect ratio. You should specify your horizontal width. Monitors can be 3:2, 5:4, 16:9, 16:10, or even 21:9 (2560×1080).
I think grids are less relevant these days because of varying screen sizes.
Grids were developed to tackle the challenges of placing items side by side, allowing systems like Bootstrap to simplify layout tasks. Their importance to actual design systems has decreased with CSS advancements. That’s just my viewpoint as I’m not a designer, so perhaps others will differ.
Now, with widespread flexbox support and Internet Explorer no longer being an issue, and with so many mobile users, grids aren’t really needed for CSS anymore. However, they still guide designers who create web themes for WordPress or Bootstrap. You can still use CSS grids for that.
Furthermore, issues like vertical alignment have also been resolved. This is truly a great time for web design.
@Drew
That makes a lot of sense. I value having consistent spacing between elements, which the column system used to provide. For instance, when there’s an aside section, it’s nice if it’s always spaced evenly next to related content.
But I see how modern CSS focuses more on fluidity than rigid grids. The grids we have now can be seen as simply consistent spacing since everything adjusts as screens resize. I wanted to check on this since it seems like Figma courses and other UX/UI design courses still teach the grid system.
@Drew
Initially, the absence of flexbox made sense to focus on fixed grids. And in the early mobile days, there was really only one mobile screen size to worry about, making it easier to just widen the desktop site three times for the iPhone and collapse it into thirds for mobile views.
But having a desktop site in three columns looked odd. That’s why we opted for a 12-column layout, allowing for some four-column sections to add visual variety.
What I don’t notice is anyone using anything other than grid layouts for web design.
Orion said:
What I don’t notice is anyone using anything other than grid layouts for web design.
Most web apps I’ve worked on have moved away from using grids, especially with container queries making it more logical to design based on relative sizes instead.
Yes, definitely. You can manage without them, but grids make certain tasks much simpler. For instance, having a desktop/mobile grid layout can work well with smaller components using flexbox, providing clearer separation between layout and UI.
Still relevant for web pages, but current best practices are more suited for web apps and UX, which aren’t a good match for grids designed for static graphic design.
Compound grids (two or more overlaid grids) are still used but were much more common in print design.
You don’t see them as often because most digital spaces have limited screen real estate. Instead of showing more content at once as you would in a magazine spread, the focus now is on experiences that suit phone and laptop sizes, expecting users to scroll. There’s less space for experimenting with layouts as well.
Also, it’s often said that compound grids ‘break user expectations’ across devices since layouts change dramatically rather than following familiar column structures that scroll vertically.
I see this concept a lot in design theory, but I never see anyone talk about it when it comes to writing CSS or designing a web application anymore? Is this concept even actually still relevant?
Grid-based design is still around. It doesn’t have to be 12 columns. That just happens to be a handy number.
Grids are definitely still in use. Think galleries, calendars, and note apps.
It’s still being used, just not in the 12-column way you might think. Now it’s often by fractions, with common breakpoints. Thirds, halves, quarters. You’re likely already employing them.
I’d argue they’re more relevant than ever now that CSS Grid is available.
Most ‘web design’ isn’t truly design; it’s imitating the same few section conventions. If you’re creating unique layouts (beyond simple centered headings and buttons), grid layouts make everything a lot easier than in past designs.