Preparation: Column layout

CSS Columns is a module that defines a multi-column layout, showing how content flows between Columns and how gaps and separations are used. Browser compatibility is good, and production environments recommend using both the -moz and -webkit prefixes and no prefixes

columns

CSS multi-column layout can easily implement multi-column waterfall layout. Its two key properties are column-count and Cloumn-width

Column-count Specifies the number of columns in the multi-column layout. The value can be:

  • autoThe number of columns is determined by other CSS properties, such ascolumn-width
  • <number>Is used to describe the number of columns in which the element content is divided, ifcolumn-widthAlso set to non-zero,This parameter represents only the maximum number of columns allowed

Column-width specifies the optimal column width. The value can be:

  • autoThe number of columns is determined by other CSS properties, such ascolumn-count
  • <length>Is used to describe the optimal column width. The actual column width may be wider (to fill the available space) or narrower (when the available space is narrower than the specified column width), ifcolumn-widthAlso set to non-zero,This parameter represents only the maximum number of columns allowed

Since the two attribute values do not overlap, columns can be used as a shorthand:

Column-count: 5 → columns: 5 Column-width: 200px → columns: 200px ↓ columns: 5 200pxCopy the code

highly

In general, the height of a multi-column layout is automatically determined by the browser, but column height can also be limited by setting height or max-height. This will only allow you to increase to this height until a new column is generated, and the rest will be moved to the next column. (This invalidates our column-count setting)

Height not set:

After setting the maximum height, the number of columns exceeds column-count: 4:

Column clearance

The column-gap property sets the interval between columns. Values:

  • normalFor multi-column layouts, the default value is1emFor other types of layouts, the default value is0
  • <length>, non-negative integers
  • <percentage>, based on the percentage of the parent element width

Column line

You can use the column-rule attribute to add a division line between columns in a multi-column layout. It is similar to the border attribute and is an abbreviated attribute. It consists of the following three attributes:

  • column-rule-widthTo specify the width of the dividing linethin,medium,thickBetween the values
  • column-rule-style, specifies the style of the split line, andborder-stylesimilar
  • column-rule-color, specifies the color of the split line

Column-rule: thick inset blue:

Implement a waterfall flow using a multi-column layout

Implementing a waterfall flow with a multi-column layout is simple:

The DOM structure uses a container with a multi-column layout that prevents the elements from being arranged:

<div class="container">
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
</div>
Copy the code

The key is to set the attributes associated with the multi-column layout of the Container:

.container {
  width: 1000px;
  column-count: 4;
  column-gap: 1em;
  column-width: 220px;
}
.img-container {
  margin-bottom: 10px;;
  break-inside: avoid;
}
Copy the code

The full code is here.

In addition, we need to add a break-inside attribute on the inner element to prevent breaking outside of the content in a multi-column layout.

  • autoDoes not force or prohibit page or column breaks within an element
  • avoidTo avoid page breaks, column breaks, and zone breaks within elements
  • aviod-pageTo avoid page breaks within elements
  • aviod-columnTo avoid breaking columns within the element
  • aviod-regionTo avoid region breaks within the element

Effect achieved:

The advantages of a multi-column layout to implement a waterfall flow layout are that it is flexible and simple, doesn’t require JavaScript, and the DOM structure is simple, but I don’t see any drawbacks other than compatibility

Implement waterfall flow using Flex layout

When I was asked in an interview how to implement waterfall flow, I didn’t know the multi-column layout at the time and naturally thought of using Flex. Flex is perfectly fine, but the DOM structure is a little more complicated

You need to make the parent Flex container, use 4

columns, and add elements to each column. 
<div class="container">
  <div class="col">
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  </div>
  <div class="col">
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  </div>
  <div class="col">
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  </div>
  <div class="col">
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  </div>
</div>
Copy the code

CSS Settings are not complicated:

.container {
  display: flex;
  width: 1000px;
  justify-content: space-around;
}
Copy the code

The full code is here.

Effect achieved:

The advantages of this method are good compatibility, but the main disadvantages are that the DOM structure is complex, and the need to manually insert the obtained elements into different columns, but also need to consider the height of each column, put a column height is too much higher than other columns.

reference

  • Use CSS multi-column layout @mDN
  • column-rule-color@MDN
  • break-inside@MDN
  • Pure CSS implements waterfall flow (multi-column multi-column and Flex layout) @SegmentFault