Modern CSS Layout, power and responsibility

“Separation of content and presentation” was our rallying cry as CSS layout advocates in the heady days of the new Millennium. We had already moved away from embedding font information into our markup by way of replacing font tags with CSS. We next aimed to complete that process by moving away from tables for layout. A brave, and somewhat fragile, new world of positioning and floats awaited us.

If separating content and presentation was the goal, these rudimentary techniques got us partway there. We had more separation than with tables for layout, and mercifully the days of slicing up images and content and reassembling them in table cells are gone. Then progress on these techniques seemed to stop.

Our need to create ever-more complex layouts, to build applications and not just websites, continued. We tried to leverage other parts of CSS to make layout easier, working around whitespace issues with inline-block, using display-table to almost attempt to fake the tables for layout of our past in CSS. Recently CSS frameworks have blossomed, many of which allow the creation of complex grids, at a cost of embedding a description of the layout into the markup itself as in this example from Bootstrap.

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

What was that about separating content and presentation?

With Flexbox and the upcoming CSS Grid Layout module we have a designed for purpose layout mechanisms for the web. These are layout methods that give a group of elements relationship. It is this relationship that ensures a set of boxes that are defined as flex items are all able to stretch to the height of the tallest, and that the background colour on a sidebar in a Grid layout will run to the height of the far taller content area alongside. Remember faux columns? This class of techniques will soon be in our past.

Both Flexbox and Grid allow us to properly separate content from presentation. For one-dimensional layouts Flexbox excels. As the items in the flex container have relationship to one another we can display them in reverse order, or even explicitly specify an order with the order property. Want to display the elements one way for desktop and another for mobile? You can change the order within your media queries. Grid is even more powerful as you have the ability to position elements in two dimensions. You can explicitly state where an element sits on the grid. You can layer items, and even mix items with explicit positioning with those that will layout according to Grid’s auto-placement algorithm.

With Grid and Flexbox you no longer need to describe your layout in markup, they give us a way to truly separate content and presentation. With these tools we should be able to make decisions about our document structure and markup that do not then force us to compromise on the visual layout in a browser. Nor should the ideal visual layout dictate source order. With this power comes great responsibility. For just as it will be possible for a developer to start out with a beautifully semantic, well structured document and use Grid and Flexbox to meet the design requirements, it will be possible for them to stop caring about the document structure at all. Worse, I believe there will be a strong temptation, especially with Grid, to flatten out document structure in order that all elements become a child of the element with the Grid declared. Making layout simple, but at what cost?

This flattening out of document structure in order to take advantage of Grid Layout is something of concern to many people, including the specification editors. The current Level 1 specification includes the ability to declare elements on the Grid as a subgrid, maintaining their relationship to the overall parent grid. Fantasai has examples of why this is important. At the current time subgrid is unimplemented in Blink, the browser with the most complete Grid Layout implementation, and is “at risk” in the Level 1 specification, meaning that it has the potential to be dropped. I’d love to see more people talking about this feature, uses for subgrids and the potential of problems without it.

That said, whether we get subgrid in Level 1 of the Grid Spec or not, the specifications can’t force us to use these tools well. We have to do that for ourselves. There is a whole generation of web developers who do not own the back story of web standards, who have never sliced up an image and reassembled it in tables nested five deep. We are increasingly handing power tools to those who have just learned what a nail is. Therefore it is vital that we continue to talk about accessibility and semantics alongside showcasing what these new tools can do for us. As use of Grid and Flexbox become mainstream we’re going to have new classes of problems, new anti-patterns. It’s as important to write about those as it is to get excited about the possibilities.

9 Comments

FezVrasta July 28, 2015 Reply

How flexbox can save us from the class-hell of bootstrap?

I have prepared a simple flexbox grid system to layout forms and my css ended up very similar to bootstrap grid…

benjamin July 28, 2015 Reply

I agree. My peeve with that people argue about which grid framework to use, and none of them can create a grid on their own. I feel like “the grid” has been abstracted into utter confusion thanks to Sass mixins, and BootStrap helper classes. None of it needs to be this hard, but you’ll have to push some vanilla code to figure that out.

Chris July 29, 2015 Reply

The real beauty and game-changing elements of flex display comes from its simplicity. Instead of worrying about floats, tables, and inline-block gotchas, flex/justify-content/flex-flow/align-content will easily space things out and take advantage of available space. It simply just works as intended. I don’t want to every go back because flex is now the king.

Devon Beard August 3, 2015 Reply

I’m really excited for Flexbox and the CSS Grid specs. However, you should find what layout systems work best for your audience. Working in the health care system we have to support at least IE8 in most cases, so using flexbox isn’t an option. We are able to use it on internal tools but user facing we tend to still use floats and css grid systems. We force our users to upgrade once they get accepted into our program to a modern version of their browser. We are trying to help influence our audience to use modern browsers but it takes time.

Kieran Mathieson August 5, 2015 Reply

Subgrids are Good Things, esp. when it comes to integrating 3rd party components into, say, a CMS. Let’s hope that subgrids make it.

Michael August 12, 2015 Reply

I left Bootstrap for Kube. I use Flexbox for menus.

hexx August 28, 2015 Reply

Never understood web devs opting out for bootstrap, especially if they use only small portion of it. A grid isn’t hard, created several and the latest one is on 300 lines of code and works on IE8+

Naim January 9, 2016 Reply

Great article! I agree also with Deveno that using flexbox depends on the audience and support of your project. If the statistic of your website with IE8 is still huge then flexbox is not a solution as the layout will look crappy otherwise if you are safe if the usage if iE8 then flexbox is a solution to go

MJR January 13, 2016 Reply

I used Flexbox until iOS 9 appeared and messed up all my work. Now I use CSS tables which everyone seems to have forgotten about. Exchanging Flexbox and CSS tables was a breeze requiring only one new line in my stylesheet.

Leave a Reply