standard logo    Personal Education

Home > Programming > CSS

CSS Balanced Columns

For several years, I've been adding to a list of Wicked Wonderful Wordies, releasing them as PDF files with 12 wordies per set. The column for the sets grew over time to take up a lot of vertical space on the web page. Splitting the long list into several shorter columns was what I needed, but I wanted to avoid manually dealing with adjusting the list as the new sets continued to be added. I went looking for a CSS solution. It is gratifying to say I found one.

I note that there is a minor issue with using paragraphs in the columns because the first column becomes shorter than expected with an un-intended paragraph at the top. The "fix" is to use <br> tags instead as shown for the second list below. An obvious extra benefit comes from the columns being more compact.

The code I came up with for my needs is shown below. In the style, adjust the column-width value to be appropriate to the need. The same is true for the height value. Experiment to decide whether column-fill should be auto or balance. For me, it didn't seem to matter. Now I can simply add a new row to the html list and the CSS will take care of gradually expanding the columns.


<style>
.container {
  column-width: 4em;
  column-fill: balance;
  height: 10em;
}
</style>

<div class="container">
  <p> <a href="wordies01-final.pdf">Set 1 </a></p> (doesn't look good)
  
  <a href="wordies01-final.pdf">Set 1 </a><br> (aligns much better and is compact)

As a side benefit, this technique has also been applied to the list of CSS experiments on the index page of this section of the web site. The column width needed to be 18em to work for the index, and the height was set to 60% of the frame (parent element). Lots of tricky stuff involved in keeping things relative measurements instead of fixed sizes like 10px or 10mm.

How does it look?

Paragraph tags in column make an odd offset, though it may work fine if you're working on regular text columns.

Sets of 12 wordies with answer key (US Letter PDF)

Set 1

Set 2

Set 3

Set 4

Set 5

Set 6

Set 7

Set 8

Set 9

Set 10

Set 11

Set 12

Set 13

Set 14

Set 15

Set 16

Set 17

Set 18

Set 19

Set 20

Set 21

Set 22

Set 23

Set 24

Set 25

Set 26

Set 27

Set 28

Set 29

Set 30

Set 31

Set 32

Set 33

Set 34

Set 35

Using line breaks fixes the odd spacing, while also making the list more compact.

Set 1
Set 2
Set 3
Set 4
Set 5
Set 6
Set 7
Set 8
Set 9
Set 10
Set 11
Set 12
Set 13
Set 14
Set 15
Set 16
Set 17
Set 18
Set 19
Set 20
Set 21
Set 22
Set 23
Set 24
Set 25
Set 26
Set 27
Set 28
Set 29
Set 30
Set 31
Set 32
Set 33
Set 34
Set 35

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns