To quickly achieve similar newspaper layout effects, you can use CSS multi-column layout, and the core is enabled through column-count and column-width. 1. column-count specifies the number of columns and automatically adjusts the width; 2. column-width sets the ideal column width and automatically adjusts the number of columns; 3. When using both at the same time, the browser will give priority to satisfying the width and then adjusts the number of columns. Further optimizations include: 4. column-gap sets the column spacing, default 1em; 5. column-rule adds split lines, supporting color, width, and style abbreviations. Cross-column content processing: 6. break-inside: avoid prevents the elements from breaking internally; 7. break-before and break-after control elements to change columns before and after. Note that some tags need to be wrapped in div to take effect, and it is better to try it a few times in responsive design.

CSS multi-column layout is actually not that difficult. If used properly, you can quickly achieve the effect similar to newspaper typesetting. It is not as versatile as Flexbox or Grid, but it is particularly useful in specific scenarios, such as article column display.

How to enable multi-column layout?

The core is the two properties of column-count and column-width . You can use only one of them, or you can use them together.

• column-count : Specifies how many columns you want to display, and the browser will automatically adjust the width of each column.
• column-width : Specifies the ideal width of each column, and the browser will automatically determine how many columns to display according to the container size.

For example:

 .multi-column {
  column-count: 3;
}

This way the elements will be divided into three columns. If you write column-width: 200px; , if the container is wide, it may display four columns, and if it is a little narrower, it will become two columns.

Control column spacing and splitting lines

After dividing the columns, the default may seem a bit crowded, and you can add dot spacing and dividing lines.

• column-gap : Controls the spacing between columns, the default is 1em, and you can also set the pixel value yourself.
• column-rule : a border-like line used to separate columns. You can set color, width, and style in abbreviation.

for example:

 .multi-column {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

This way, there is a 20px gap between the three columns and a thin gray line in the middle, which is visually clearer.

How to deal with cross-column content?

Sometimes you want a certain part of the content not to be disassembled into different columns, such as a title or image block. It can be controlled by break-inside attribute.

 .no-break {
  break-inside: avoid;
}

This way the block will not be broken and displayed in different columns. Similarly, you can also use break-before or break-after to control whether to change columns before or after an element.

However, be aware that not all elements support these attributes, and some tags may need to be wrapped with a div to take effect.

Basically that's it. Although the multi-column layout has limited functions, it is simple to set up and is suitable for the layout of text-based content. It is not complicated but it is easy to ignore details, such as line break control and responsive changes. You can master it by trying it a few more times when actually using it.

The above is the detailed content of CSS tutorial on multi-column layout. For more information, please follow other related articles on the PHP Chinese website!