Advanced RWD layout techniques

You've made the decision. You're taking the plunge. You're done with m-dot redirects, separate content for different devices and constant updates to fix broken content in new devices. It's responsive or bust. But what happens after the first bit of HTML and CSS is on the page? What if plan A doesn't work?

.parent {
  display: table; }
.child {
  display: table-cell;
  vertical-align: middle; }

.grid {
  text-align: justify; }
.grid-item {
  display: inline-block;
  width: 22.5%;
  text-align: left;
  vertical-align: top;
  margin-bottom: 3.333333333333333%; }
.grid-item::after {
  content: '';
  display: inline-block;
  width: 100%; }
.grid-item-extra {
  display: inline-block;
  border: 0;
  margin: 0; }

There are some gotchas associated with display: inlineblock. The biggest issue is the need for extra markup. Because text-align: justify will right align the last grid-item in last row, any number of elements in that row less than the maximum will leave empty space in the margins of that row. Adding extra divs that fill up that row (with a height: 0) fixes this problem. The ::after pseudo-element ensures the last row of griditems isn't the last actual row, and therefore will justify the grid-items properly.

.grid-item {
  width: 48%; }
@media only screen and (min-width:48em) {
  .grid-item {
    width: 31%; } }
@media only screen and (min-width: 64em) {
  .grid-item {
    width: 22%; } }
@media only screen and (min-width: 80em) {
  .grid-item {
    width: 12%; } }

So far, we've covered floats, display: table-cell, and text-align: justify. But as useful as they all are, there are situations where they will and won't work, and it's often difficult to determine that until you've spent three hours trying to fix broken layouts. There's a fourth layout method that's available now, compatible with most browsers, and is my personal favourite method of laying out a design.

This fairly-unknown module working its way through the W3C now has no actual browser support. (The IE11 support is limited to the complicated and uninteresting part.) If you look at its page on caniuse.com, the overwhelming amount of unsupported browsers shown is slightly discouraging. But when it arrives, it's going to be amazingly simple, especially for designers who are more comfortable with the idea of visual layouts than ethereal code layouts.

.header { flow: 'a'; }
.main { flow: 'b'; }
.sidebar{ flow: 'c'; }
.footer { flow: 'd'; }
body {
  display: 'a'
  'b'
  'c'
  'd'; }
@media only screen and (min-width: 48em) {
  body {
    display:'aaa'
    'bbc'
    'ddd'; } }

Sometimes it takes more than a good layout strategy to make a responsive design work well. I've learned a few tricks over the past few years that have really helped me. When people ask me for help, I'm always surprised by the number of people that don't know these relatively simple concepts. If you know them, great! Ignore them and hand this article to your junior dev. If you don't know them, read it and pretend you did (you can thank me later).

*, *::before, *::after {
  box-sizing: border-box; }

This simple rule that's supported all the way back through IE8 (with -moz- and -webkit- prefixes) tells the browser to calculate an element's width including its padding and border, rather than just the content like is the default. Width: 50% is really 50%, even with padding and border, which fixes the issues so many developers deal with when floating fluidly-sized elements with padding and border.

.content {
  width: calc(100% - 220px); }
.sidebar {
  width: 200px; }

If you're using screen width to trigger an event in JavaScript and need it to happen at the same width as your breakpoint, $(window).width() or window.outer Width are notoriously inaccurate and inconsistent across browsers. There is no way that you can comfortably rely on these widths if you're attempting to fire some JavaScript based on screen size, as they very rarely match the CSS measurements used for media queries. These inconsistencies get worse if you're using ems in your media queries.

if (window.matchMedia("(min-width: 48em) and (max-width: 64em)".matches)) {
  /* 48em < viewport width < 64em */
} else {
  /* 48em > viewport width or viewport width > 64em */
}
if (Modernizr.mq("(min-width: 48em) and (max-width: 64em)")) {
  ...
}

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.

Advanced RWD layout techniques

Watch this video to accompany the tutorial...

A solid foundation

Different layout options

Floats

Benefits of floats

Problems with floats

display: table-cell

Benefits of display: table-cell

Problems with display: table-cell

text-align: justify

Benefits of text-align: justify

Problems with text-align: justify

Flexbox

Benefits of Flexbox

Problems with Flexbox

Looking to the future: Grid Template Layouts

Other lessons learned

box-sizing: border-box

CSS3 calc function

Media queries in JavaScript

Related articles