Multicolumn lists and sections in online documentation

A single-column layout sometimes wastes a lot of space in an online documentation. It can therefore make sense to display certain content in multiple columns if the browser window is currently wide enough. With just a few lines of CSS code and two small HTML snippets, this can be implemented.

Example 1: Three-column list

As an example, here is a list of the countries of the European Union. Shrink and enlarge the browser window to see the responsiveness of the list. If there is not enough space for all three columns, two columns or a single column is used instead. Try it!

Finally, we continue here with a single column again. Finally, we continue here with a single column again. Finally, we continue here with a single column again.

Example 2: Two-column section

As another example, here is some placeholder text. Shrink and enlarge the browser window to see the responsiveness of the columns. If there is not enough space for both columns, a single column is used instead. Test it.

Finally, we continue here with a single column again. Finally, we continue here with a single column again. Finally, we continue here with a single column again.

Implementation

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

.two-columns {  
  column-count: 1;
}
.three-columns {  
  column-count: 1;
}
@media screen and (min-width: 500px) {
 .three-columns {  
   column-count: 2;
   column-gap: 35px;
   break-inside: avoid;  
 } 
}
@media screen and (min-width: 750px) {
 .two-columns {  
   column-count: 2;
   column-gap: 35px;
   break-inside: avoid;  
 }
 .three-columns {  
   column-count: 3;
   column-gap: 35px;
   break-inside: avoid;  
 } 
}

The breakpoints for the number of columns are set to 500 and to 750 pixels in this example. The spacing between the columns is 35 pixels. You can adjust these values as needed.

Step 2: Put an HTML snippet with the following content in front of the three-column list:

<div class="three-columns">

Step 3: Put the following HTML snippet at the end of the three-column list.

</div>

Note: Alternatively, you could assign the “three-columns” class directly to an HTML list (ol or ul). However, not all authoring tools convert lists to HTML lists. Therefore, the shown solution with a DIV element works more universally.

For the two-column list, the procedure is similar: First include the CSS code, then place the following HTML snippet in front of the beginning of the two-column section:

<div class="two-columns">

The end of the two-column area is marked by the HTML snippet:

</div>

___
 
Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.