CSS Columns

I frequently use CSS multi-column layout (i.e. column-count: 3) for basic list items limited to words or phrases (like my search page tags list), but I’ve always struggled to make the property work with more complex content. And after all, complex pages are where CSS columns would come in most handy—reflowing content in and out of columns across viewport widths to suit:

CSS Columns Breaking

The first hurdle has always been avoiding module content breaking across columns awkwardly:

CSS Columns Breaking

In the Codepen below, I added break-inside: avoid; to remedy this, but support is partial. In some browsers, additional whitespace may appear at the top of columns, and in others, content is dispersed unevenly across columns.

See the Pen CSS Columns For Layout V1 by Trent Walton (@TrentWalton) on CodePen.

As a next step, I added display: inline-block and removed all the break-inside: avoid; funny business. This switch was way desirable, but days later I noticed loads of extra whitespace below the columns (in Chrome at least). The amount depended on the arrangement of the modules and size of the content within, but it was a significant problem.

See the Pen CSS Columns For Layout V2 by Trent Walton (@TrentWalton) on CodePen.

To remedy the whitespace problem, I came up with my current-final-answer (below). I added a <div> to each module, setting the outer one to display: block and leaving the inner one display: inline-block. The extra whitespace is gone, and the technique seems to be resilient to various types & sizes of content.

See the Pen CSS Columns For Layout V3 by Trent Walton (@TrentWalton) on CodePen.

I’m sure this technique will evolve & improve over time, but for now, I find it quite useful. Ta-da!


I recently discovered a new action game called Glitchskier by Shelly Alon. In case you aren’t aware, flying a triforce(ish) starship through what reminds me of the Stranger Things intro (music and all) blowing up Tron-like villains is right up my alley. I love every detail.



Viewport Padding

I was inspecting Ethan’s site the other day (as totally normal and well-adjusted people do) and realized he was using one of my favorite tricks where viewport units were combined with em units via calc() for vertical spacing.


Viewport units can help you scale margin and padding across viewport sizes, but they can also grow or shrink beyond what’s intended. To compensate for potential awkwardness, Ethan combined vh with em via calc().

I created a Codepen to show a similar case with vw units.

Codepen Demo

Note that .viewport-only has 8vw for padding, and tends to grow and shrink too much. .viewport-calc has calc(4vw + 2em) for padding, which scales without overdoing it at extreme widths.

  padding: 8vw 0;
  padding: calc(4vw + 2em) 0;

In my mind, it’s like saying, “here’s 2em of padding as a baseline with a few 4vw units sprinkled over for scalability.” I use this all the time. Happy padding!

Update: 02/07/17
Thanks, Jeremy, for pointing out a potential android pitfall.

Alamo Drafthouse Pre-roll

I love Alamo Drafthouse—It’s a big part of what makes Austin home for me, and part of my monthly (sometimes weekly) routine. The recently-updated announcement videos they run during pre-roll are fantastic. They’re extremely well done without coming across as too slick or corporate-y. I could be wrong, but I think I spy some Archive Type in there.

Alamo Drafthouse Pre-roll

Day of the Tentacle

Over the weekend I rediscovered Day of the Tentacle, triggering the biggest nostalgia jolt I’ve experienced in quite some time. I vividly remember playing the game on one of my first PCs in 1993. The illustration style, no-lose style of gameplay, and voice acting is all spectacular. The newly remastered edition is a worthy update.

I played through on iPhone, but the game is available on a lot of platforms.

Day of the Tentacle Day of the Tentacle Day of the Tentacle

Hello, Jekyll

I’ve logged quite a lot of hours battling databases, plugins, and a GUI editor to write (and occasionally design) blog posts. Wordpress has served me well, but to simplify the process I’ve ported my blog to Jekyll. It’s great to be static! Writing already feels more casual and enjoyable.

Over the past few years, Paravel has used Jekyll to build the latest version of our site, Dave’s blog, Reagan’s blog, TMFO, and the DayTrip Blog. We even use it regularly for prototyping with clients.

The familiarity I’d gained on those projects made the process relatively easy. Here’s a rough outline of how it went:

Export & Archive
  1. Via Tomomi Imura’s advice, I exported comments to Disqus.
  2. Content exports via Ben Balter’s Jekyll Exporter Wordpress plugin and the WP Static HTML Output plugin
  3. For good measure, I also FTP’d down all my files and backed up the server before launching the Jekyll version.
Measured Current Site Performance
Jekyll Setup
  1. Followed the quick start instructions
  2. Dropped all Wordpress jekyll-export/_posts files into the Jekyll _posts folder
  3. Created unique layouts for articles and notes
  4. Confirmed article art direction CSS made it to front matter
Added Features
Tidy Up
  • Added static pages and a 404
  • Fixed broken paths thanks to find & replace in project

At this point, I decided to leave off comments for now. I’m still on the fence, but am going to experiment with correspondence via social channels and (hopefully) other people’s blogs :)

There are heaps more to optimize and improve, but it’s been an enjoyable experience thus far. The writing process feels great again, and I have a new place to play (even though it’s the same old blog)!

Let me know if you spot any glaring errors or omissions. In the meantime, I’ll just leave this list of ideas for future improvements here for reference:

  • Improve performance
  • Clean up (reduce) tags
  • Research CDNs & caching
  • Think about sans body type
  • Experiment with CSS Grid on my homepage
  • Tie in other articles with more TLC than tags
  • Build a new layout for non-legacy articles so I can create unique article designs easier

David Lynch on Ideas

The thing is to be true to the idea. A lot of artists think that suffering is necessary, but in reality, any kind of suffering cramps the flow of creativity. […] Happiness in the doing is so important. And I always say it’s our life going by.

via Devour

The Marvel Symphonic Universe

First off, every Every Frame a Painting video is worth your time, but the latest one about the state of cinematic music composition is extra fascinating. I found lots of parallels for any industry that can be tempted to (over)imitate itself—especially when the process includes lots of people and phases.

Creativity and uniqueness take some risk.

Impossible Foods’ Meat-Free Burger

I love burgers, but wasn’t fully-aware of beef’s tax on our climate/environment. As Pat O. Brown, CEO and founder of Impossible Foods, states:

If you eat a quarter-pound impossible burger instead of a quarter-pound burger made from a cow, you save greenhouse gas emissions that are equivalent to driving 18 miles my yourself in a typical American car, you save water thats equivalent to taking a 10 minute shower, and free up a land area of 75 sqft.

I can’t wait to try one of these.