Creating layouts using CSS is one of the most fundamental skills for a web developer. A well-designed layout is the backbone of any successful website, as it improves user experience and usability.
There are three most common methods for creating webpage layouts: columns, grids, and flexbox. Let's begin by discussing how to create a multi-column layout.
By default, the block-level elements will span over the entire viewport. But in practice, you don't want these elements, especially the text elements, to occupy too much horizontal space, as research shows that the optimal length of a single line is around 80 characters. People have limited attention span, and texts longer than that can be difficult for users to read.
The obvious solution for this problem is to split the layout into columns, which can be easily achieved using the column-* properties.
Column count and column width
To begin with, you can specify the number of columns using the column-count property.
The browser will automatically choose the column width that will fit the entire layout inside the container.
Alternatively, you can set the column width, and let the browser pick the column count.
The browser will create as much columns as it possibly can, and then the remaining space will be shared by all columns. Which means you are unlikely to get the column width you specify, unless the viewport size is exactly divisible by the specified column width.
You can verify this claim using the Developer Tools in your browser.
It is not possible to customize the size for individual columns. If you want a more complex layout, you have to use grid or flexbox instead.
Column gap
You can also customize the gap between columns using the column-gap property. The default option is normal, which corresponds to 1em.
You can change that by setting a new length or percentage value. The percentage would be relative to the width of each column.
Open demo in new tabColumn rule
Using the column-rule property, you can also add a vertical rule between the columns, similar to how you may define a border. You can define a width, a style (solid, dotted, and more), and a color.
1column-rule: 4px dotted blue;Spanning over columns
Sometimes, you might want an element to span over multiple columns. Take the <h2> element in the previous demo as an example, it is a bit cramped inside one column. The layout might look better if the heading can be taken out of the multi-column layout and be allowed to span over multiple columns.
This can be done with the column-span property by setting it to all, which allows the element to span over all columns.
Unfortunately, there are only two options, all and none, which means you cannot tell the element to span over a certain number of columns. This is because the column properties are designed to create simple multi-column layouts. There are not much customizations available.
In the next two lessons, we will discuss grids and flexbox, which are used to create much more complex layouts.