Of Layouts with Columns

I've been wanting to try this alternate large-screen layout out for a while, but there were quirks (more on those later) I hadn't resolved so I waited. Now that I (potentially) have resolved the issues I'm just going to flip the switch and see how these columns work out!

Mobile is always where I first read something, but I know that especially in the tech industry we still read on large monitors while working. It's weird that we have these large monitors but we still set max-widths on our content and force the user down a page. So... I'm trying out columns on my articles when you have a large and wide screen. Full width and horizontal scrolling - why not?

Columns, grid layouts, and other new methods for laying out pages have been emerging the last few years. I'll quickly admit I have not done user research or anything to validate what I'm trying here... it's simply my current exploration as to what we can try. Hopefully it works well for you, and if it doesn't I'd love to hear thoughts on why.

So How Does it Work? 

Initially I'm rolling this out to what I (somewhat arbitrarily) deem a large enough viewport (1600x900), via the following media query:

@media screen and (min-width: 100em) and (min-height: 56.25em) {
  /* ... */
}

I also look to see support in browsers. The following should support all browsers that support CSS.supports and column (as well as IE 10 and 11 that have unprefixed column support but lack CSS.supports):

if ((window.CSS && window.CSS.supports && (CSS.supports('column-width', '1px') || CSS.supports('-webkit-column-width', '1px') || CSS.supports('-moz-column-width', '1px')))
|| (document.body.style.columnWidth === '')) {
  document.documentElement.classList.add('columns');
}

Then I do some width/padding/position updates to the body and containers to prepare them for being a page with height 100vh and scrolling horizontally, as well as adding the column properties to my article. There are also rules set up to try to prevent breaking before a paragraph that follows a heading:

.columns article {
  /* also include -moz and -webkit */
  column-width: 58rem;
  column-gap: 5rem;
  height: calc(100vh - 24.5rem); /* take full height less the header and footer */
}

.columns p + h3 {
  break-after: avoid; /* not well supported outside IE/Edge */
}

What Were the Quirks? 

I had planned to roll this out when I reworked my site a half year ago, but that was when I started using a lot of CodePens in my articles. Columns do not respond well to changes to content once they have rendered (in the case of CodePen a link changes to a module with a different height and different break rules). If the length of your content changes after the column is painted the browsers are not responding to that change, and you will potentially have your last column(s) chopped.

I'd known about this issue since I first tried columns a few years ago... but I still forget about it. I have now learned that both browser resizes and changes to the column properties will cause the browser to repaint, so my current solution is to load the CodePen script and attach an onload event listener. That is still to soon to act, so for now I am resorting to a setTimeout to make it work (in my case a change to the column-gap by .1rem does the trick).

(function() {
  function onCodePenLoad() {
    setTimeout(function() {
      var article = document.querySelector('.post-content');
      article.classList.add('external-loaded'); //this class just changes the column-gap values by .1rem
    }, 1000);
  }
  var cp = document.createElement('script'); cp.type = 'text/javascript'; cp.async = true;
  cp.src = '//assets.codepen.io/assets/embed/ei.js';
  cp.onload = onCodePenLoad;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cp, s);
})();

Other Layouts 

There are many people talking about alternative screen layouts and the new CSS that is here and coming to help us. I highly recommend CSS Layout Weekly from Rachel Andrew and catching up on podcasts and talks from Jen Simmons of The Web Ahead.

Should be a fun time ahead on the web.