Skip to content

24 ways to impress your friends

Grid, Flexbox, Box Alignment: Our New System for Layout

8 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Gaël

I’m kinda confused, your argument against Bootstrap’s grid seems odd to me.

First of all, class attribute is meant to hook styles (and nowadays, scripts) from markup, so Bootstrap’s naming in markup is not a problem, even with separation of concern in mind. Class attribute is the bridge between markup and styles, the only HTML attribute that doesn’t imply anything in markup. Separation of concern, if religiously applied, should prohibit the use of class attribute since it mixes styles and markup. To sum up, describing grid with class name can’t be a problem.

The same argument can be used for containing div, since this a semantically neutral markup tag. The only thing we could blame when using too much div is that markup is harder to read. But that’s not bad practice at all. And moreover you don’t have to use div in order to use Bootstrap’s grid. Your take on semantic markup.

When you say “Grid and flexbox layouts do not need to be described in markup”, neither does a floating grid. This is just for convenience, to be easily understood by beginners. Tools like Susy (that you quote) proves it.

And moreover your counter-example are inappropriate, since they distinguished themselves from the Bootstrap’s example using :nth-child() selector — which had poor support when Bootstrap 3 was released, but we definetly can rewrite its grid using :nth-child() and removing some of the class names you point out.

However Bootstrap’s classes are meant to be reused anywhere, in any markup context, on any tag. This is why those classes are descriptive. Your examples are very contextuals and cannot be reused in another context. So which one is best?

Thus don’t you think we’ll see new frameworks like Bootstrap with reusable grid systems based on grid module? Some using flexbox are already there, and more are coming. And we’ll keep going with describing class names in markup. Because well, that’s not a problem.

I wrote a lot on this detail because I’m sad to read those kind of arguments in a such high level article. This is to easy and those things aren’t that simple.

However your demonstrations are very impressive, and probably some of the clearest I’ve read for now! I often use flexbox and am very enthusiastic about grids, hoping just as you that we’ll be able to use it very soon.

(Sorry for the very long comment and my hazardous english).

prisca

Rachel,
thank you for such a thorough write-up — excellent insights into something I’ve not had time to explore more yet,
bring on the holidays with time for play :)

Adam

Well, I’m guilty as charged when it comes to using new layout technologies in an antiquated way, but this was intentional as I’ve been trying to convince my team to move away from Bootstrap.

So, I built a Bootstrap-style grid system using flex properties to demonstrate the most basic and superficial improvements, without approaching the question of mark-up.

I’ve been reading about the Grid spec for a while now, but I’ve never had the time to sit down and get my hands dirty. I was a little reluctant to spend time on something which is only enabled behind flags in even the most bleeding-edge browsers.

However, reading this, I now see why the Grid spec is so exciting. HTML and CSS will be cut down to an unprecedented leanness.

This needs to get implemented.

Gwen

Great write-up Rachel. Had a look at this a little earlier this year but I’m really paranoid about browser compatibility/consistency so I decided to possibly take a look at it in future when things hopefully change.

Karen

Hey Rachel, lovely article. I’ve been using flexbox over the last year in production, but only with the standards syntax and fall back to inline-block. The new grid spec looks amazing and I can’t wait to tinker with it.

Although I avoid using frameworks like Bootstrap and Foundation and generally prefer semantic class names without the overhead, I feel it’s important to mention that both Bootstrap and Foundation offer mixins for their grids to avoid the dreaded col and row classes. So it’s up to the user to choose them. In a large project I was working on recently, for a really big app, I started questioning the use of semantic classes, since the CSS files did get much larger with the repetitive grid mixins. Most grids don’t use more than four to six columns, so I do wonder whether it’s makes sense to actually have those col-sm-25 or col-md-6 classes, although I still don’t feel comfortable using them!
Thanks again for this inspiring article and comparison between both layouting methods, and I hope to delve more into grids this year :)

Philip Ingram

Very nice and clear write up. I feel now I have a more clear understanding of where flexbox and grid specifications intermingle but also where they vary in a subtle but also very distinguished ways.

While I am no pro supporter of frameworks like bootstrap and can clearly see the comparing references made to the old-school table method, one argument overlooked in support of descriptive and re-usable class names is the fact that I can look at any website’s markup built on bootstrap never seeing the rendered result and KNOW what the layout looks like and how that content is presented visually. And not to say this couldn’t be done with the new css layout models (using repeatable descriptive class names) so I also have to agree that they are indeed more flexible than the frameworks…once fully adopted into unison compliance across all major browsers.

allan jones

as much as i’d love to see this be the new standard for all sites, many of us can’t even drop support for ie8, let alone start using a grid implementation that isn’t standardised across all browsers.

that is, unless some smart person manages to invent a way to do it in a javascript back-fill script that can applied to non-supporting (or non-compliant) browsers.

Impress us

Be friendly / use Textile