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.