From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript
Chapter 6.7: Multiple Columns
We know that it is very common for newspapers and magazines to break articles down into a multiple-column format. The reason for this is simply because people tend to find it easier to read things when the width of the column is small enough that you don’t have to move your eyes a long distance to get to the next line. As newspapers and magazines tend to use large sized sheets of paper, it makes sense to have multiple columns.
In the old days, columns had to be laid out by hand where layout boards were used to put pieces of text. We could do the same thing with our flexbox or grid layouts. The issue with doing things manually is getting the paragraphs to properly flow between different columns. Desktop publishing software had the advantage of making laying out pages easier. Balancing text between the columns was handled for you. CSS does the same thing with the columns attribute.
The source for this is:
columns: 2;
max-width: 1000px;
}
There are two ways you can specify the number of columns that you want to use. You can specify the number of columns, as we did above, or you can specify the size of a column. The difference between these approaches is what gets adjusted. By specifying the number of columns, the number will stay the same but the size of the columns will be adjusted as the display gets adjusted. By specifying a column size, the number of columns will be adjusted based on how many columns of the specified size will fit in the available area.
Another issue that you may have noticed with the above code is that the first paragraph in the first column is laid out below the first paragraph of the second column. Why is this? For some reason, the margins of the first paragraph gets applied. To solve this we can simply set the top margin of the first paragraph’s top to 0.
columns: 250px;
max-width: 1000px;
}
.cols250 p:first-child {
margin-top: 0;
}
You can also use column-width or column-count to be specific. You also have control over the gap between the columns by specifying the column-gap. Sometimes, you may want the gap between the columns to be more distinct. Many magazines will have lines between the columns. The term for this line is the rule which is set by using the column-rule attribute. This has three parameters for it, which in typical CSS logic means that it is a shortcut attribute with three additional attributes covering the individual parameters.
The column-rule-style describes the style of the line that you want to use which includes none, dotted, dashed, solid, double, groove, ridge, inset, and outset.
The column-rule-width is the size of the line that you are going to draw. This can be done by specifying an actual size that you want (example 2px) or by specifying a generalized constant. The constants are thin, medium, and thick.
The final column rule attribute is the column-rule-color which determines the color of the line.
columns: 3;
max-width: 1000px;
column-gap: 2em;
column-rule: dotted medium #440066;
}
.colsRule p:first-child {
margin-top: 0;
}
columns: 2;
max-width: 1000px;
column-fill: auto;
}
columns: 2;
max-width: 1000px;
column-fill: balance;
}
Another thing that newspapers and magazines do is have images that the text wraps around. We will look at how this can be done in the next section.
Chapter contents
Chapter 6 Contents
6.1 Layout Cheat Sheets
This chapter's summary cheat sheet.
6.2 The Layout problem
Why layout is complicated for web pages.
6.3 Display blocks
The basic display types.
6.4 Flexible Boxes
A box that contains other components and sizes them to fit the available space.
6.5 Grid
A flexible grid where you can lay out your design.
6.6 Grid Templates
Using templates to make laying out components in a grid easy.
6.7 Multiple columns
Using the columns attributes to easily allow for multiple columns.
6.8 Floating
Having images (or other blocks) have text wrap around them.
6.9 Position
There are other ways of placing elements by using the position attribute.
6.10 Media Queries
Altering CSS based on the properties of the device the page is being rendered on.
6.11 Project: Tic-Tac-Toe
The project for this chapter.
6.12 Project Solution
Solution for this chapter's project