The multi-column layout is one of the new layouts in CSS3, although it is low-key.

First, clear structure

The structure of the multi-column layout is simple, mainly consisting of multi-column Container and column box.

An element that has column-width and column-count attributes and is not auto is called a multi-column container.

Multi-column Container Displays contents through multiple column boxes.

Two, understand the basic usage

1, column-count and column-width

With these two properties, we can control the number of columns, but the width property is flexible compared to the count property.

When the width property is set, it does not mean that the column width is a fixed value. It also increases or decreases the width flexibly in the column layout container.

2, column-rule and column-gap

These two properties mainly help us set the spacing between columns and the style of the column, which is somewhat understandable:

Here you can make the column-rule wider, and you’ll be surprised.

3, the column – span

This property is similar to the SPAN property in table, but it has two values: None and All, and the content before and after it is rearranged according to the column layout rules.

Three, talk about the application

Now that you know the basics and usage, you are ready to layout an article beautifully:

It looks good, but it feels a little weird.

What’s the blame? Because you’ll rarely see websites that display articles formatted in this way. (Check out most magazines and news websites to verify this).

In fact, when I see this multi-column layout, the first thing that comes to my mind is the layout of ancient books. Then we can use this column layout to realize the layout of ancient books:

  .demo {
    width: 300px;
    margin: 100px auto;
    columns: 10;
    column-rule: 1px dashed rgb(213213213);direction: rtl;
    word-wrap: break-word;
    text-align: center;
  }
Copy the code

When using a multi-column layout to achieve this effect, note:

  • The width of each column must be about one word, so there are strict requirements for the width of the container;
  • Word-wrap: break-word attribute is used to wrap Chinese punctuation marks;

Is it possible to do this without a multi-column layout? Of course you can! And we get to know a new CSS3 member — Writing-Mode:

  .demo {
    width: 180px;
    margin: 50px auto;
    height: 170px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: 1px;
    writing-mode:vertical-rl;
    background: repeating-linear-gradient(to left, #000, #000 3%, #FFF 3%, #FFF);
    background-size: 30px 100%;
  }
Copy the code

The only downside here is that column styles can’t be as flexible as column-rule in column layout.

CSS always feels magical, so let’s use a multi-column layout to create a nine-grid layout:

Its biggest disadvantage is clearly shown by the figures in the figure. In fact, when implementing such a layout, it is particularly necessary to pay attention to the effect of the vertical margin of the child elements. This is left to the reader to practice.

Four,

As a new layout method in CSS3, it is not as eye-catching as Flex, mainly due to its relatively low pain points, but from the implementation of the nine grid layout above, it is not hard to see that it can do something.

  • Resources -W3C
  • The sample code