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.
Maybe you're traveling down 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.
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.