CSS Layout Techniques: Part 3

CSS Grids (our future)

We’re now getting beyond anything we can use today, we can’t even polyfill here – hopefully soon though as this module looks amazing. Of course the details are apt to change so I’ll not be going too in depth writing on it, but I’ve had a skim through the spec and pulled out some interesting features that will be a part of it. If you’re curious, reading through sections 1 and 2 should give you a good overview of what’s to come. And as far as when it’s to come, no idea! Perhaps the best place to look would be Eric Meyer’s nifty little W3 spec timeline infographic. Have a look at the other specs that have made it through the full process (the other color schemes help) to compare.

Onto the overview! It works in a similar manner to FlexBox. There is a Grid Container which holds Grid Items. The container is defined, again on the display property, with grid or inline-grid. Now we get to some very grid-specific territory. On the grid container we can set up rows, columns, their sizes, gutter sizes, and name some “areas” to fill with Grid Items (nice). For the “areas”, there are a few ways to name them – one of which (in the example below) is verging on ascii art, but in this case that’s definitely a good thing!

.grid-container {
    grid-template-areas: "header header header"
                         "sidebar body body"
                         "footer footer footer";
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 100px minmax(min-content, 1fr) 200px;
    grid-column-gap:
    grid-row-gap:
}

I’ve included a few units in that example that might look new:

  • fr : pretty much the same as flex grow.
  • minmax(min value, max value)
  • min-content

With the grid now set up, we can look at placing Grid Items within it:

.logo    { grid-column: 1; grid-row: 1; } //like a coordinate system
.sidebar { grid-area: sidebar; } //the area name, magic!
.body    { grid-area: body; } 
.footer  { grid-area: footer; }

As with most things here, there are a few different ways to define where items are placed within the grid that I’ve not included. The details are in the spec but the above gets us going! By now we’ve only covered enough for a high level understanding of the concept behind Grids, and it’s already looking good. There is more, a lot more, on this module’s properties which I’m looking forward to working with in detail but for now I’ve only really looked at some of the more interesting features that will hopefully stay a part of it.

  • repeat – Does exactly what it says on the tin! Less repetition: always a good thing.
  • subgrids – Grids within grids. Except rather than simple nesting, with subgrids we get the ability to define their column/row sizes from the parent grid. This means multiple subgrids in different places within a parent grid can have their columns/rows line up or relate in some coherent way – without JavaScript.
  • autoflow – If we don’t explicitly place Grid Items, they will be placed by an autoflow algorithm, which we can manipulate with the grid-auto-flow property. row or column will define the direction for the algorithm to move as it works its way through the grid placing items. An additional value of dense will mean any gaps left between large items will be filled by the next available item that fits. The default will be to just leave the gaps and move on (sparse). For those gridded panel layouts, hopefully we’re imagining the same thing – this is going to be an amazing feature!

Finally, and this is probably an obtusely small detail to focus on considering this article’s scope (I can’t help it! I got hooked!), we have the method by which vertical (top/bottom) padding and margin is calculated – specifically % values. Currently, in block level elements, it’s based on the element’s width. Not exactly intuitive, but there is hope! Items placed within a Grid Area will (might) have these values based on the height of the grid area. Imagine that! Something logical!

This does seem to be facing a bit of push back though. At the time of writing, there exists a discussion noted in the spec on whether to do this or to keep the vertical % values as being based on the block width. The best argument I’ve seen in favor of that is the ability to create elements with consistent aspect ratios. Maybe this is a crazy idea, but wouldn’t it be better to give us (CSS authors) the ability to define which axes to use for % or ratio based lengths? Rather than just assuming? On the up side, everyone in the discussion seems to agree that both Flexbox and Grid should work in the same way. In addition, the flexbox spec currently has the vertical option defined and that spec is in “last call”. It seems like it’s coming down to the wire, a weirdly exciting moment in spec world! Can’t believe I’m getting excited by specs.

Viewport Units

They’re not really a big “layout technique” but they are a nice addition, so I’m tagging this section on to have a quick look at them. They’re 1/100th the viewport width and height respectively.

  • vw 1% the width.
  • vh 1% the height (iOS 7’s a bit buggy apparently!).
  • vmin If the viewport is 100px wide and 50px tall, or 100px tall and 50px wide, this will be 50px (in IE9 it’s vm)
  • vmax for the two viewports above, this will be 100px (IE: nope)

Pretty simple really! They might seem a strange thing to use in sites at first, at least they did to me. But, in the context of CSS Grids, they start to make more sense. In addition, with web capabilities moving closer to native we’ll probably be producing more game-like interfaces. With that in mind the combination of Viewport Units and Grids looks even more amazing!

Where Next

If you’re looking for another approach to layouts, one more option exists – and it should completely blow your mind: Grid Style Sheets. It’s a bit wild to say the least, but interesting. We had a small review of this here at Delphic a few weeks ago and decided to wait a while and see what happened with it before investing. There were still too many caveats to be considered for use in production, but, for a small, brain training, personal project – this could be pretty fun to work with! If you know of any other broad techniques for layout, or any other mad/off the wall projects for layout like GSS, let us know in the comments!

Front-End Friday is an ongoing series about our favorite tools, tricks, lessons, and best practices. Want to share your own favorite front-end development lesson? Chat with us on Twitter!

« Prev Article
Next Article »