Blog Post

Excerpt – Modern CSS Layout: Decking Zombies with Style

Dividing the Horde (into Columns)

CSS columns are a simple way to add flexible text columns to your pages. This is useful when using responsive design because the width of your container element can change. Manual solutions require that the text be a certain length and stay in one element, artificially splitting the text into multiple tags, based on spacing rather than on content. CSS columns allow you to split content into multiple columns without worrying about where the column splits happen, making them more flexible and responsive.

Column-count: sets the number of desired columns. While use cases will vary, I’d recommend sticking to a max of three columns unless you have a super-wide screen or a compelling reason. Shorter line lengths often make reading easier, but if you go too short, your eye jumps too much between lines, tiring the reader. Too many columns also increases visual distractions, making it more difficult for the reader to focus on the content.

.horde-layout-columns {
    column-count: 3;
}

Column-gap: sets the gap between columns. Be sure to include a large enough gap that readers aren’t distracted by the columns they aren’t reading. Distracted readers let the zombies win.

.horde-layout-columns {
    column-gap: 1em;
}

Column-rule: sets a style between columns in a way that is similar to a border. Like borders, it takes three values: a rule color, a rule style, and a rule width. You can set each of these individually with column-rule-color, column-rule-style, and column-rule-width. Available rule styles are the same as those available for borders. While you can go super fancy with these, minimal and clean is almost always the right choice. Super-fancy rules make content harder to read, and, of course, let the zombies win.

.horde-layout-columns {
    column-rule: #0DEAD0 3px solid;
}

Column-span: allows an element to span more than one column (though it’s either across all columns or none). This is useful for letting an image, heading, diagram, table, or zombie-defying figure tag span the columns, creating a new section and/or providing clarity of subject and visual weight to the image/heading/diagram/table/figure/thingy.

.undead-column-item {
    column-span: all;
}

Night of the Living Tip:

There is one egregious issue when using column-span in Safari. It sometimes duplicates the content above and below the span, so a paragraph or heading that exists in the code after the spanning element may appear both above and below the spanning element. Honestly, sometimes I think the browser makers want the zombies to win!

Column-width: sets the minimum width of multiple columns. The browser will try to fit as many columns as possible that are at least as wide as the set width and will distribute any additional space across the existing columns.

.horde-layout-columns {
    column-width: 5em;
}

Columns is the shortcut property for column-count and column-width.

.horde-layout-columns {
    columns: 3 400px;
}

Orphans: This property sets the minimum number of lines that need to be shown at the bottom of a page, region, or column. In other words, if you set it to two and only one line of the next paragraph will fit into the last part of that page, region, or column, then that line will be pushed to the next page, region, or column.

.horde-layout-columns {
    orphans: 2;
}

Widows: is similar to orphans, but from the other direction. If the last line (or lines) of a paragraph go on to the next page, region, or column, it’s called a widow. If the widow property is set to two, then there must be at least two lines transferred to the next page, region, or column.

.horde-layout-columns {
    widows: 2;
}

Night of the Living Tip:

While both orphans and widows have wide support, neither works in Firefox, If you’re testing in Firefox, and they aren’t working, that’s why. That said, they shouldn’t cause any issues in Firefox if you include them.

Break-after: instructs the browser whether to break a page, region, or column after an element. If you’re familiar with page-break-after, this has the same functionality, but they changed the name to generalize it since it works on more than just pages. Values:

Auto: allows—but doesn’t require—breaks after the element this appears on.

Avoid: avoids any break (column, page, or region) after the element.

Page: forces a page break after the element.

Avoid-page: avoids a page break after the element.

Break-before: This is the same as break-after, but it works before the element in question. It takes the same values as break-after. Similar to the above this more generalized property name replaces page-break-before.

Break-inside: is the same as break-after and break-before (and takes the same values, except for “page”), but it governs whether or not a page break can happen inside an element.

.i-break-for-zombies-before {
    break-before: page;
}
.i-break-for-zombies-inside {
    break-inside: avoid;
}
.i-break-for-zombies-after {
    break-after: avoid-page;
}

Now let’s move on to Flexbox which is more complicated, but also more powerful.


Pick up Modern CSS Layout: Decking Zombies with Style from your favorite retailer.