tips

Tip 004 - Columns

Columns are an age-old problem on the web. When it comes to layout, we've pretty much got it solved, between Bootstrap back in the day and CSS Grid today. But sometimes you want multiple columns, breaking up the content itself, newspaper-style. The layout-centric solutions would have you take your text, break it up, and put different parts in different pieces of markup, which just isn't feasible most of the time.

Thankfully, CSS has column functionality out of the box. For example, we can tell a container how many columns it should have; the content inside will try to split itself vertically into equal pieces to fit.

See the Pen 2 Columns by Kam Black (@kamblack) on CodePen.

Maybe you're traveling down the Intrinsic Design path and you don't want to outright command a certain number of columns. Using the column-width property, you can define an optimal width. Like flex-basis, this may not be the actual width, but it starts there, then grows if it can, or shrinks if it has to. As an added bonus, you can even include the column-count from the last example, and that will define a maximum number of columns.

See the Pen Intrinsically Responsive Columns by Kam Black (@kamblack) on CodePen.

In that last example I slipped in another potential feature. Using break-inside: avoid;, we can tell the paragraphs in the columns that we don't want the column breaking in the middle of a paragraph. There's other options there, but now we're venturing into unfinished-spec land, so if you're interested, here's the current draft spec. Columns as a whole are (currently) supported everywhere but in IE 11 and earlier, so as usual, do your due diligence and make sure you're supporting what you need to support.

 

Have you written a reply to this post? Send me the URL here: