CSS layout tools

CSS LayoutThe day has come. There is no need any more for floats or tables or other hacks to create page layouts on the web. CSS can do it. Finally, it has its own tools for laying out pages properly.

The flexible layout and the CSS grid are probably the most wanted additions to CSS since cascading style sheets made their web debut in 1996. Flexbox and grids bring new layout possibilities to the web which are both easier to create and easier to maintain. This post introduces the basic ideas of both and where they differ from each other. This post is not an in-depth tutorial on either of these tools. Links to such are given in the text.

  • the CSS Flexible Box Layout Module Level 1 allows laying out page elements in any direction and automatically shrink or grow (i.e. “flex”) them depending on the size of the parent container.
  • the CSS Grid Layout Module Level 1 defines an either flexible or fixed-size grid in which the grid items can be placed arbitrarily.

Do we need these new tools? We do. Desperately. They are long overdue and they will have a significant impact on web page layouts. They offer new possibilities in the way we can present content on the web. Front-end developers will have fewer reasons to cross their arms in front of their chests and reject a design because “it can’t be done on the web”. Likewise, designers should be aware that these new tools offer new ways to style a web page and optimize the presentation layer for both mobile and desktop.

Browser support

Flexbox is fully supported by browsers, CSS grid is still waiting for Internet Explorer (which currently supports an older version of the CSS grid), Opera and Android to catch up. In other words, the CSS grid is not ready for production sites at this point. But soon, it will be.

Flexbox: http://caniuse.com/#feat=flexbox
CSS grid: http://caniuse.com/#feat=css-grid

That being said, let’s take a look at what these two new layout tools mean for front-end development.

New values for the display property

Both flexbox and CSS grid bring new values for the CSS display  property and can be declared as block or inline:

Flex Layout Box Model

Spec: CSS Flexible Box Layout Module Level 1

The flex layout is determined by the flex container, the flex item(s) and the flex direction (the latter being either a row or a column).

Basic flex layout

The flex container is initiated by setting the display property of an element to flex . All children of that element are then automatically considered flex items.

By default, the flex-direction  (i.e. the direction in which the items are laid out) is row .

In a row the main axis is horizontal, starting at the left and ending at the right, and its counterpart is called the cross axis.

Flex direction for a row

If we had defined the layout to be a column instead then main and cross axis would change accordingly. The main axis is now vertical, starting at the top, ending at the bottom:

Flex direction is a column

In both diagrams the arrows point in both direction. That is because flex also allows to lay out items in reverse direction.

The above shows that the basic idea behind flexbox is a flexible layout along a 1-dimensional axis. In contrast, the CSS grid controls page elements within a 2-dimensional grid. The difference is well illustrated in the following graphic, which I took from the W3C Grid Layout specification:

Flex vs. grid
Source: https://www.w3.org/TR/css3-grid-layout/

I recommend this great visual flexbox tutorial for more information.

CSS grid layout

Spec: https://www.w3.org/TR/css3-grid-layout/#explicit-grid

The CSS grid has a different purpose. Rather than arranging items along a one-dimensional axis as in flexbox containers the CSS grid places elements in a two-dimensional grid.

In order to create a grid we need to first declare an HTML element to be a grid container:

Next we need to let the browser know how many rows and columns we want the grid to consist of. We do that by setting up the new properties grid-template-columns  and grid-template-rows .

In the following example we have 3 columns, each 50px wide and 2 rows, each 50px high. The more complex a grid is the more difficult it can be to visualize, but luckily, Firefox’s developer tools come to the rescue. If Firefox detects a CSS grid in the code it displays a little grid icon in the inspector (see graphic below). When you click on the little icon Firefox displays the grid on the page. The purple grid below is a representation of the 3 lines of CSS that you see in the inspector.

Firefox inspector visualizes grids

There it is, the grid!

We can now add the page elements that will live in the grid:

We have 6 slots in our grid and the HTML consists of 6 <div> elements. Note that one of the <div>  elements is nested:

Placing HTML elements into the grid

This tells us a couple of things about grids:

  1. Only direct children of the grid container are treated as grid items – this is why the 5th item – which is a child of the 4th item – does not get its own slot and instead lives with its parent.
  2. If there are fewer items than available grid slots the browser just leaves that slot empty.

What if we have more direct children of the container than available slots? Those are placed silently outside the grid.

HTML elements outside of the grid

Note the dotted line at the bottom – it indicates that items 8 and 9 are outside of the grid.

Most likely some HTML elements will span over multiple slots of a grid. To do that we can create so-called grid-template-areas . In this example I created four different areas:

Grid template areas

The grid-template-areas  property allows us to name these different areas as we see fit. The green area could be a site header, the red a footer etc. The above example could be declared like this:

We tell each grid item its role in our design (e.g. “top”, “middle” etc., but we could also call them “header”, “footer” etc.). We basically create a visual text representation of our layout. We can then add our HTML structure:

Finally, we tell these elements which of the areas they have been assigned to:

That’s it. We have established a basic grid and can start adding more content. Obviously, I touched only the surface of CSS grids – the specification is a lot more complex and offers many more properties that we can use to work out details of a grid. I found https://css-tricks.com/snippets/css/complete-guide-grid/ to be a particularly useful resource for learning more about the individual grid properties and Griddy a great place to play around with grids.

Summary

The new syntax for the Flexible Box Module and the CSS Grid Layout Module require a little more effort to be fully grasped (at least that was the case for me), but once the idea and their main differences sink in they are simply wonderful new tools for the front-end web development.

About Uwe Kristen

After graduating in Scottish Literature at University of Glasgow in 1996 Uwe put down his empty glass and left the pub. He took the next airplane to New York City and started coding websites. He still codes. He still reads.

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting this form, you accept the Mollom privacy policy.