larlet-fr-david-cache/cache/2d0636e4f9e67a22d202ed25577c7a05/index.md

title: Grid, Flexbox, Box Alignment: Our New System for Layout
url: https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/
hash_url: 2d0636e4f9e67a22d202ed25577c7a05

<p class="lede">Three years ago for 24 ways 2012, I wrote an article about <a href="/2012/css3-grid-layout/">a new CSS layout method</a> I was excited about. A specification had emerged, developed by people from the Internet Explorer team, bringing us a proper grid system for the web. In 2015, that Internet Explorer implementation is still the only public implementation of CSS grid layout. However, in 2016 we should be seeing it in a new improved form ready for our use in browsers.</p>
<p>Grid layout has developed hidden behind a flag in Blink, and in nightly builds of WebKit and, latterly, Firefox. By being developed in this way, breaking changes could be safely made to the specification as no one was relying on the experimental implementations in production work.</p>
<p>Another new layout method has emerged over the past few years in a more public and perhaps more painful way. Shipped prefixed in browsers, The flexible box layout module (flexbox) was far too tempting for developers not to use on production sites. Therefore, as changes were made to the specification, we found ourselves with three different flexboxes, and browser implementations that did not match one another in completeness or in the version of specified features they supported. </p>
<p>Owing to the different ways these modules have come into being, when I present on grid layout it is often the very first time someone has heard of the specification. A question I keep being asked is whether CSS grid layout and flexbox are competing layout systems, as though it might be possible to back the loser in a CSS layout competition. The reality, however, is that these two methods will sit together as one system for doing layout on the web, each method playing to certain strengths and serving particular layout tasks. </p>
<p>If there is to be a loser in the battle of the layouts, my hope is that it will be the layout frameworks that tie our design to our markup. They have been a necessary placeholder while we waited for a true web layout system, but I believe that in a few years time we’ll be easily able to date a website to circa 2015 by seeing <code>&lt;div class="row"&gt;</code> or <code>&lt;div class="col-md-3"&gt;</code> in the markup.</p>
<p>In this article, I’m going to take a look at the common features of our new layout systems, along with a couple of examples which serve to highlight the differences between them.</p>
<p>To see the grid layout examples you will need to enable grid in your browser. The easiest thing to do is to enable the <strong>experimental web platform features</strong> flag in Chrome. Details of current browser support <a href="http://gridbyexample.com/browsers/">can be found here</a>. </p>
<h2>Relationship</h2>
<p>Items only become flex or grid items if they are a direct child of the element that has <code>display:flex</code>, <code>display:grid</code> or <code>display:inline-grid</code> applied. Those direct children then understand themselves in the context of the complete layout. This makes many things possible. It’s the lack of relationship between elements that makes our existing layout methods difficult to use. If we float two columns, left and right, we have no way to tell the shorter column to extend to the height of the taller one. We have expended a lot of effort trying to figure out the best way to make full-height columns work, using techniques that were never really designed for page layout.</p>
<p>At a very simple level, the relationship between elements means that we can easily achieve full-height columns. In flexbox:</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="d1740516afc286acf242e690e59e9941" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/d1740516afc286acf242e690e59e9941/">Flexbox equal height columns</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<p>And in grid layout (requires a CSS grid-supporting browser):</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="82770d9e7cba74b92334b5ec510e3e6a" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/82770d9e7cba74b92334b5ec510e3e6a/">Grid equal height columns</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<h2>Alignment</h2>
<p>Full-height columns rely on our flex and grid items understanding themselves as part of an overall layout. They also draw on a third new specification: the box alignment module. If vertical centring is a gift you’d like to have under your tree this Christmas, then this is the box you’ll want to unwrap first.</p>
<p>The box alignment module takes the alignment and space distribution properties from flexbox and applies them to other layout methods. That includes grid layout, but also other layout methods. Once implemented in browsers, this specification will give us true vertical centring of <em>all the things</em>.</p>
<p>Our examples above achieved full-height columns because the default value of <code>align-items</code> is <code>stretch</code>. The value ensured our columns stretched to the height of the tallest. If we want to use our new vertical centring abilities on all items, we would set <code>align-items:center</code> on the container. To align one flex or grid item, apply the <code>align-self</code> property.</p>
<p>The examples below demonstrate these alignment properties in both grid layout and flexbox. The portrait image of Widget the cat is aligned with the default stretch. The other three images are aligned using different values of <code>align-self</code>.</p>
<p>Take a look at an example in flexbox:</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="deba55225c29d41d54e01553840ece2c" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/deba55225c29d41d54e01553840ece2c/">Flexbox alignment</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<p>And also in grid layout (requires a CSS grid-supporting browser):</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="9673b6695bb948a0e698583746e6d4f4" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/9673b6695bb948a0e698583746e6d4f4/">Grid alignment</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<figure><img src="https://media.24ways.org/2015/andrew/24ways-grid-alignment.jpg" alt="The alignment properties used with CSS grid layout."/><figcaption>The alignment properties used with CSS grid layout.</figcaption></figure>
<h2>Fluid grids</h2>
<p>A cornerstone of responsive design is the concept of fluid grids.</p>
<blockquote>
<p>“[…]every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container.”<br/>
—Ethan Marcotte, “<a href="http://alistapart.com/article/fluidgrids">Fluid Grids</a>”</p>
</blockquote>
<p>The method outlined by Marcotte is to divide the target width by the context, then use that value as a percentage value for the <code>width</code> property on our element.</p>
<pre><code class="language-css">h1 {
  margin-left: 14.575%; /* 144px / 988px = 0.14575 */
  width: 70.85%; /* 700px / 988px = 0.7085 */
}</code></pre>
<p>In more recent years, we’ve been able to use <a href="http://webdesign.tutsplus.com/tutorials/calc-grids-are-the-best-grids--cms-22902"><code>calc()</code></a> to simplify this (at least, for those of us able to <a href="http://caniuse.com/#feat=calc">drop support for Internet Explorer 8</a>). However, flexbox and grid layout make fluid grids simple.</p>
<p>The most basic of flexbox demos shows this fluidity in action. The <code>justify-content</code> property – another property defined in the box alignment module – can be used to create an equal amount of space between or around items. As the available width increases, more space is assigned in proportion.</p>
<p>In this demo, the list items are flex items due to <code>display:flex</code> being added to the <code>ul</code>. I have given them a maximum width of 250 pixels. Any remaining space is distributed equally between the items as the <code>justify-content</code> property has a value of <code>space-between</code>.</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="c71f9f91cc857ea496e1372ae8f494cb" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/c71f9f91cc857ea496e1372ae8f494cb/">Flexbox: justify-content</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<p>For true fluid grid-like behaviour, your new flexible friends are <code>flex-grow</code> and <code>flex-shrink</code>. These properties give us the ability to assign space in proportion.</p>
<p>The flexbox <code>flex</code> property is a shorthand for:</p>
<ul>
<li><code>flex-grow</code></li>
<li><code>flex-shrink</code></li>
<li><code>flex-basis</code></li>
</ul>
<p>The <code>flex-basis</code> property sets the default width for an item. If <code>flex-grow</code> is set to <code>0</code>, then the item will not grow larger than the <code>flex-basis</code> value; if <code>flex-shrink</code> is <code>0</code>, the item will not shrink smaller than the <code>flex-basis</code> value.</p>
<ul>
<li><code>flex: 1 1 200px</code>: a flexible box that can grow and shrink from a 200px basis.</li>
<li><code>flex: 0 0 200px</code>: a box that will be 200px and cannot grow or shrink.</li>
<li><code>flex: 1 0 200px</code>: a box that can grow bigger than 200px, but not shrink smaller.</li>
</ul>
<p>In this example, I have a set of boxes that can all grow and shrink equally from a 100 pixel basis.</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="c0e5661b6c8ede414716f33bfdf788fa" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/c0e5661b6c8ede414716f33bfdf788fa/">Flexbox: flex-grow</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<p>What I would like to happen is for the first element, containing a portrait image, to take up less width than the landscape images, thus keeping it more in proportion. I can do this by changing the <code>flex-grow</code> value. By giving all the items a value of <code>1</code>, they all gain an equal amount of the available space after the 100 pixel basis has been worked out.</p>
<p>If I give them all a value of <code>3</code> and the first box a value of <code>1</code>, the other boxes will be assigned three parts of the available space while box 1 is assigned only one part. You can see what happens in this demo:</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="723ba4448202c72e06b1d39c6e6d1f64" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/723ba4448202c72e06b1d39c6e6d1f64/">Flexbox: flex-grow</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<p>Once you understand <code>flex-grow</code>, you should easily be able to grasp how the new <em>fraction unit</em> (<code>fr</code>, defined in the CSS grid layout specification) works. Like <code>flex-grow</code>, this unit allows us to assign available space in proportion. In this case, we assign the space when defining our track sizes.</p>
<p>In this demo (which requires a CSS grid-supporting browser), I create a four-column grid using the fraction unit to define my track sizes. The first track is <code>1fr</code> in width, and the others <code>2fr</code>.</p>
<p><code>grid-template-columns: 1fr 2fr 2fr 2fr;</code></p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="6baabcc5f32f12897a265bd26f3aeb4c" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/6baabcc5f32f12897a265bd26f3aeb4c/">Grid fraction units</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<figure><img src="https://media.24ways.org/2015/andrew/24ways-grid-fraction-units.jpg" alt="The four-track grid."/><figcaption>The four-track grid.</figcaption></figure>
<h2>Separation of concerns</h2>
<p>My younger self petitioned my peers to stop using tables for layout and to move to CSS. One of the rallying cries of that movement was the concept of separating our source and content from how they were displayed. It was something of a failed promise given the tools we had available: the display leaked into the markup with the need for redundant elements to cope with browser bugs, or visual techniques that just could not be achieved without supporting markup.</p>
<p>Browsers have improved, but even now we can find ourselves compromising the ideal document structure so we can get the layout we want at various breakpoints. In some ways, the situation has returned to tables-for-layout days. Many of the current grid frameworks rely on describing our layout directly in the markup. We add <code>div</code>s for rows, and classes to describe the number of desired columns. We nest these constructions of <code>div</code>s inside one another.</p>
<p>Here is a snippet from the <a href="https://getbootstrap.com/examples/grid/">Bootstrap grid examples</a> – <strong>two columns with two nested columns</strong>:</p>
<pre><code class="language-markup">&lt;div class="row"&gt;
  &lt;div class="col-md-8"&gt;
    .col-md-8
    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        .col-md-6
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
        .col-md-6
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
    .col-md-4
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>Not a million miles away from something I might have written in 1999.</p>
<pre><code class="language-markup">&lt;table&gt;
  &lt;tr&gt;
    &lt;td class="col-md-8"&gt;
      .col-md-8
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td class="col-md-6"&gt;
            .col-md-6
          &lt;/td&gt;
          &lt;td class="col-md-6"&gt;
            .col-md-6
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/td&gt;
    &lt;td class="col-md-4"&gt;
      .col-md-4
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
<p>Grid and flexbox layouts <em>do not need to be described in markup</em>. The layout description happens entirely in the CSS, meaning that elements can be moved around from within the presentation layer.</p>
<p>Flexbox gives us the ability to reverse the flow of elements, but also to set the order of elements with the <code>order</code> property. This is demonstrated here, where Widget the cat is in position 1 in the source, but I have used the <code>order</code> property to display him <em>after</em> the things that are currently unimpressive to him.</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="eec059a9881025fc46b82e9de15fdfb9" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/eec059a9881025fc46b82e9de15fdfb9/">Flexbox: order</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<p>Grid layout takes this a step further. Where flexbox lets us set the order of items in a single dimension, grid layout gives us the ability to position things in two dimensions: both rows and columns. Defined in the CSS, this positioning can be changed at any breakpoint without needing additional markup. Compare the source order with the display order in this example (requires a CSS grid-supporting browser):</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="500336330e932a6698c4576a96a08695" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/500336330e932a6698c4576a96a08695/">Grid positioning in two dimensions</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<figure><img src="https://media.24ways.org/2015/andrew/24ways-two-dimensions.jpg" alt="Laying out our items in two dimensions using grid layout."/><figcaption>Laying out our items in two dimensions using grid layout.</figcaption></figure>
<p>As these demos show, a straightforward way to decide if you should use grid layout or flexbox is whether you want to position items in one dimension or two. If two, you want grid layout.</p>
<h3>A note on accessibility and reordering</h3>
<p>The issues arising from this powerful ability to change the way items are ordered visually from how they appear in the source have been the subject of much discussion. The current flexbox editor’s draft states</p>
<blockquote>
<p>“Authors <em>must</em> use <code>order</code> only for visual, not logical, reordering of content. Style sheets that use <code>order</code> to perform logical reordering are non-conforming.”<br/>
—<a href="https://drafts.csswg.org/css-flexbox/#order-accessibility">CSS Flexible Box Layout Module Level 1, Editor’s Draft (3 December 2015)</a></p>
</blockquote>
<p>This is to ensure that non-visual user agents (a screen reader, for example) can rely on the document source order as being correct. Take care when reordering that you do so from the basis of a sound document that makes sense in terms of source order. Avoid using visual order to convey meaning.</p>
<h2>Automatic content placement with rules</h2>
<p>Having control over the order of items, or placing items on a predefined grid, is nice. However, we can often do that already with one method or another and we have frameworks and tools to help us. Tools such as <a href="http://susy.oddbird.net/">Susy</a> mean we can even get away from stuffing our markup full of grid classes. However, our new layout methods give us some interesting new possibilities.</p>
<p>Something that is useful to be able to do when dealing with content coming out of a CMS or being pulled from some other source, is to define a bunch of rules and then say, “Display this content, using these rules.”</p>
<p>As an example of this, I will leave you with a Christmas poem displayed in a document alongside Widget the cat and some of the decorations that are bringing him no Christmas cheer whatsoever.</p>
<p>The poem is displayed first in the source as a set of paragraphs. I’ve added a class identifying each of the four paragraphs but they are displayed in the source as one text. Below that are all my images, some landscape and some portrait; I’ve added a class of <code>landscape</code> to the landscape ones.</p>
<p>The mobile-first grid is a single column and I use line-based placement to explicitly position my poem paragraphs. The grid layout auto-placement rules then take over and place the images into the empty cells left in the grid.</p>
<p>At wider screen widths, I declare a four-track grid, and position my poem around the grid, keeping it in a readable order.</p>
<p>I also add rules to my <code>landscape</code> class, stating that these items should span two tracks. Once again the grid layout auto-placement rules position the rest of my images without my needing to position them. You will see that grid layout takes items out of source order to fill gaps in the grid. It does this because I have set the property <code>grid-auto-flow</code> to <code>dense</code>. The default is <code>sparse</code> meaning that grid will not attempt this backfilling behaviour.</p>
<p>Take a look and play around with the full demo (requires a CSS grid layout-supporting browser):</p>
<figure><p data-height="468" data-theme-id="0" data-slug-hash="3c47bd9218977b17f4fad2842fc1dccc" data-default-tab="css" data-user="rachelandrew" class="codepen">See the Pen <a href="http://codepen.io/rachelandrew/pen/3c47bd9218977b17f4fad2842fc1dccc/">Grid auto-flow with rules</a> by rachelandrew (<a href="http://codepen.io/rachelandrew">@rachelandrew</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</figure>
<figure><img src="https://media.24ways.org/2015/andrew/24ways-auto-flow.jpg" alt="The final automatic placement example."/><figcaption>The final automatic placement example.</figcaption></figure>
<h2>My wish for 2016</h2>
<p>I really hope that in 2016, we will see CSS grid layout finally emerge from behind browser flags, so that we can start to use these features in production — that we can start to move away from using the wrong tools for the job.</p>
<p>However, I also hope that we’ll see developers fully embracing these tools as the new system that they are. I want to see people exploring the possibilities they give us, rather than trying to get them to behave like the grid systems of 2015. As you discover these new modules, treat them as the new paradigm that they are, get creative with them. And, as you find the edges of possibility with them, take that feedback to the CSS Working Group. Help improve the layout systems that will shape the look of the future web.</p>
<h2>Some further reading</h2>
<ul>
<li>I maintain a site of grid layout examples and resources at <a href="http://gridbyexample.com">Grid by Example</a>.</li>
<li>The three CSS specifications I’ve discussed can be found as editor’s drafts: <a href="https://drafts.csswg.org/css-grid-1/">CSS grid</a>, <a href="https://drafts.csswg.org/css-flexbox/">flexbox</a>, <a href="https://drafts.csswg.org/css-align/">box alignment</a>.</li>
<li>I wrote about <a href="https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid-layout/">the last three years of my interest in CSS grid layout</a>, which gives something of a history of the specification.</li>
<li>More examples of <a href="https://rachelandrew.co.uk/archives/2015/09/02/css-grid-and-the-box-alignment-module/">box alignment and grid layout</a>.</li>
<li><a href="https://rachelandrew.co.uk/archives/2015/11/16/but-what-about-old-browsers/">My presentation at Fronteers</a> earlier this year, in which I explain more about these concepts.</li>
</ul>