Is it time to ditch the design grid?(css-irl.info)
css-irl.info
Is it time to ditch the design grid?
https://css-irl.info/is-it-time-to-ditch-the-design-grid/
30 comments
I think web designers could stand to study actual grid based graphic design and see how that applies to our current capabilities on the web.
As for layout frameworks, I tried to learn them, but as far as I could tell they simply made bad/half assed design faster and easier. For a laughable amount of time they assumed you were building a desktop size column-based layout that was supposed to shrink, and anything different didn't work. So I never used them. It's fine if you're not hoping to produce a good design and just ship something generic, but idk if anything really good has come from them.
As for layout frameworks, I tried to learn them, but as far as I could tell they simply made bad/half assed design faster and easier. For a laughable amount of time they assumed you were building a desktop size column-based layout that was supposed to shrink, and anything different didn't work. So I never used them. It's fine if you're not hoping to produce a good design and just ship something generic, but idk if anything really good has come from them.
> actual grid based graphic design
Got any suggestions on where to start? I could Google, but I wouldn't know if what I found was "actual" grid based graphic design. I'm not trying to be snarky, I'm sincerely interested in non-web-based graphic design resources.
Got any suggestions on where to start? I could Google, but I wouldn't know if what I found was "actual" grid based graphic design. I'm not trying to be snarky, I'm sincerely interested in non-web-based graphic design resources.
The Grid Book, by publication designer Jan V. White: https://archive.org/details/gridbookguidetop00whit
Yes! The elements of Typographic Style is more Type oriented, likewise with Ellen Lupton's books. Grid Based Graphic Design by Müeller Brockmann is the one you want for grids specifically, and anything Swiss in general is probably fine.
The people I see the most who want to break the grid are the people it's supposed to be helping: designers, not developers.
I've spent years wearing both shoes. As a designer, sometimes designs felt like they were too boring when everything fit cleanly in the grid. So I would break it to please my CDs who wanted to win awards and woo a client.
When I moved into front end development... holy fuck did I ever hate it when designers would send designs with super custom sections that broke the grid. Great, more CSS that we're probably not going to re-use anywhere else.
I've spent years wearing both shoes. As a designer, sometimes designs felt like they were too boring when everything fit cleanly in the grid. So I would break it to please my CDs who wanted to win awards and woo a client.
When I moved into front end development... holy fuck did I ever hate it when designers would send designs with super custom sections that broke the grid. Great, more CSS that we're probably not going to re-use anywhere else.
Clearly communicated and well structured designs are golden. I don't mind breaking old rules as long as the new rules are clear and actually work.
I don't disagree, but "clearly communicated and well structured" seem to be a very difficult standard for design teams.
I work with designers both internally at my company and designers from listed companies who provide us designers and so often they fall into the trap of designing something that looks great when everything is perfect (i.e. headlines are reasonable, photos are beautiful, content neatly wraps the container) and then fall short when reality hits, i.e. the photos the client wants to use is very visually unimpressive, headlines are much more lengthy than the design accounted for and can't be cut because of legal/marketing reasons, some entries don't have all fields...
Invariably it's often me who fixes their shortcomings. They are fortunate that I have a lot of design experience so I know how to improvise on the fly. But really, it shouldn't have gotten to this point, it's trivial to study the true type of content a site or app is going to use, and make the design resilient to the type of variations that are likely to occur given the type of content.
How does this relate to grid breaking? Well a lot of these same designers don't care for systems and this is just a symptom of that. Might as well throw out that style guide they gave me because they aren't even following their own rules, be it the grid they provided, the specific font sizes they use, spacing, etc.
I work with designers both internally at my company and designers from listed companies who provide us designers and so often they fall into the trap of designing something that looks great when everything is perfect (i.e. headlines are reasonable, photos are beautiful, content neatly wraps the container) and then fall short when reality hits, i.e. the photos the client wants to use is very visually unimpressive, headlines are much more lengthy than the design accounted for and can't be cut because of legal/marketing reasons, some entries don't have all fields...
Invariably it's often me who fixes their shortcomings. They are fortunate that I have a lot of design experience so I know how to improvise on the fly. But really, it shouldn't have gotten to this point, it's trivial to study the true type of content a site or app is going to use, and make the design resilient to the type of variations that are likely to occur given the type of content.
How does this relate to grid breaking? Well a lot of these same designers don't care for systems and this is just a symptom of that. Might as well throw out that style guide they gave me because they aren't even following their own rules, be it the grid they provided, the specific font sizes they use, spacing, etc.
As somebody who just began using grids in their designs, I can say that grids can have a really nice effect on a lot of layouts. Fundamentally, it’s just about creating order and alignment among various elements in a view, both in positioning and spacing/sizing.
It’s really hard to pull off fancier grid layouts on the web due to device shapes and scrolling, but the basic principle still applies: line things up, create order, don’t pick sizes willy-nilly (off topic: Willy Nilly must have been the Leroy Jenkins of his day)
It’s really hard to pull off fancier grid layouts on the web due to device shapes and scrolling, but the basic principle still applies: line things up, create order, don’t pick sizes willy-nilly (off topic: Willy Nilly must have been the Leroy Jenkins of his day)
Visually, the "no" grid website [0] just looked like a website created with CSS Grid. I was expecting some sort of design that would be different. Are we missing something?
[0]: https://gridless.design
[0]: https://gridless.design
This isn't an article about CSS features, nor is the linked site. This is about how designers think about their design and how that doesn't translate well into CSS. Both articles are trying to bridge the gap between design and implementation based on the reality of web content and browsing.
Also from the article:
> Paradoxically, where CSS Grid shines is not only in building layouts that adhere to a strict design grid, but in baking flexibility into our components.
Also from the article:
> Paradoxically, where CSS Grid shines is not only in building layouts that adhere to a strict design grid, but in baking flexibility into our components.
I think the idea is not that the design is without a grid, but more on how it handles being resized. The video in the article does a good job of explaining it.
The principles of a grid-based design are still adhered to though. This isn't "gridless" in any real sense (other than maybe its handling in CSS?) from a design perspective. Maybe a better term is "adaptive grid" or something similar, which would make more sense in the design for something in a shifting and dynamic medium.
I agree, it is talking about a specific type of grid, where each column gets to have a fixed fraction of the parent container:
1fr 1fr 1fr 1fr ... 12times or so
Many CSS frameworks will provide a default grid system like this, and many designers will think in terms of such a grid.
But the author suggests that this is too rigid. And in fact a frontend developer will then have to interpret the rigid grid to be more adaptable and have either multiple flex grids for different breakpoints or use CSS grid to express more flexible flows.
1fr 1fr 1fr 1fr ... 12times or so
Many CSS frameworks will provide a default grid system like this, and many designers will think in terms of such a grid.
But the author suggests that this is too rigid. And in fact a frontend developer will then have to interpret the rigid grid to be more adaptable and have either multiple flex grids for different breakpoints or use CSS grid to express more flexible flows.
I was surprised by how many right angles, rectangles, and perpendicular lines I saw for a site focused on not using a grid.
Although I agree with the article, the reality is that CSS frameworks continue to dominate web design. These frameworks do not make use of CSS Grid even though CSS Grid has excellent modern browser support.
For example, Bootstrap and Bulma - two popular frameworks - use flexbox for layout, but have yet to incorporate CSS Grid.
The difficulty of CSS layout is a frequent criticism of CSS (and fair criticism), but now we have CSS Grid to make layout much easier, few people actually use it. As mentioned, CSS Grid has been supported by modern browsers for some time.
You don't actually need a CSS framework for layout if you adopt CSS Grid. But it does entail learning CSS Grid first - rather than rely on the CSS framework you're familiar with.
For example, Bootstrap and Bulma - two popular frameworks - use flexbox for layout, but have yet to incorporate CSS Grid.
The difficulty of CSS layout is a frequent criticism of CSS (and fair criticism), but now we have CSS Grid to make layout much easier, few people actually use it. As mentioned, CSS Grid has been supported by modern browsers for some time.
You don't actually need a CSS framework for layout if you adopt CSS Grid. But it does entail learning CSS Grid first - rather than rely on the CSS framework you're familiar with.
I suspect we'll see CSS Grid adoption pick up over the next 2-3 years as IE11 (which only has partial grid support) hits EOL and gets phased out.
No, but it’s time to drop the frameworks. Their only purpose was to make grid designs work, and CSS has caught up a while ago.
> Designers will often prescribe that an element should span (for example) four out of 12 columns on a desktop screen, without the knowledge that their idea of “columns” on the web bears no relation to how the layout may actually be built.
I won’t doubt the author’s lived experience. But in mine, designers aren’t as clueless as they are presented in this quote and in many discussions here.
> Designers will often prescribe that an element should span (for example) four out of 12 columns on a desktop screen, without the knowledge that their idea of “columns” on the web bears no relation to how the layout may actually be built.
I won’t doubt the author’s lived experience. But in mine, designers aren’t as clueless as they are presented in this quote and in many discussions here.
This is my take too. Bootstrap and foundation's float hack grid systems kept us alive while CSS caught up to "OMG we need to display websites on mobile devices"
Then grid and flexbox came along and gave us a native css solution.
Then everyone moved on to figuring out SPAs - or as I call them "OMG we need to display websites on mobile devices 2.0"
I don't know about dropping frameworks so much - they allow companies with very little incentive to invest in mobile (nearly all our users are desktop based) to get half-decent mobile layouts with a minimum amount of investment.
Weeee! Back around again...
Let's make a new HTML element for this. Let's call it... table, because the grid is like a table on which you draw things. This is gonna be legendary!
I've got some rounded corner jpegs in my other coat in case you need them to affix at the intersection of two border images. Modern web here we come!
This seems like more of a commentary on responsive design than on grid based layouts. There's a big difference between designing for print/for the web, and a really good designer will be able to give you a grid layout that performs well between breakpoints.
I agree that it's great to break out of the rigid 12 column grid, but for most devs -- without formal design training -- a basic grid helps with sizing, spacing and alignment.
One thing I enjoy when working with Tailwind is the ease at which I can experiment with flexible layouts and jump into a grid, when needed for alignment and sizing. When working with more opinionated CSS frameworks, you're pretty much forced into the 12 column grid pattern -- unless you're comfortable customizing the framework.
One thing I enjoy when working with Tailwind is the ease at which I can experiment with flexible layouts and jump into a grid, when needed for alignment and sizing. When working with more opinionated CSS frameworks, you're pretty much forced into the 12 column grid pattern -- unless you're comfortable customizing the framework.
I agree that the 12 column grid system isn't great.
Our company uses the 8 point grid system, and it makes everything neater and visually consistent, and it looks great across all zoom levels.
https://tanzu.vmware.com/content/built-to-adapt/intro-to-the...
Our company uses the 8 point grid system, and it makes everything neater and visually consistent, and it looks great across all zoom levels.
https://tanzu.vmware.com/content/built-to-adapt/intro-to-the...
That, I think, is the wrong take-away. You're forcing elements into even more strictly defined buckets that can't scale responsively to different devices.
I, personally, prescribe to the 1px grid system - where I write all my widths, heights and offsets in multiples of 1px. It helps keep things consistent.
I, personally, prescribe to the 1px grid system - where I write all my widths, heights and offsets in multiples of 1px. It helps keep things consistent.
Everyone, this is _not_ about css grid, this is about the design language typically used to describe the way content people think of the web
Cool site. And there's an RSS feed! Excellent!
Nothing stopping you from using display: flex;
The most interesting question being asked is: should we move to container-based media queries instead of viewport-based? Yes. Sometimes we should. That's why they're being added to the spec.
> One of these tricks exploits negative dimension values against some threshold
> min-width: calc((100% - var(--gap-spacing)) / var(--items));
no, no, no. Remember "top: 50%; transform: translateY(-50%);" to vertically center things before Flexbox and Grid? We're not going back to those days!
Renaming the column-gap property to --gap-spacing doesn't mean you're "not using a grid."