This tutorial details how to create a WinForm-like multi-column vertical flow list layout in HTML using the `column-count` property of CSS. It can automatically handle elements with different heights and dynamic changes in content, and achieve the effect of elements filling vertically and then overflowing horizontally to the next column. It also provides relevant advanced configurations and precautions to help developers build flexible and responsive multi-column layouts.

In modern web design, sometimes it is necessary to display a series of content in multiple columns, and the content is required to be filled vertically first, and then overflow to the next column when one column is filled. This layout method is similar to the multi-column list view in WinForm. The CSS column-count property provides a simple yet powerful solution for achieving this effect.

Understanding the column-count attribute

The column-count property is part of the CSS Multi-column Layout Module, which allows the block-level content of an element to be automatically divided into a specified number of columns. The browser takes care of calculating the width of each column and automatically distributes the content between those columns, ensuring that the content first fills the current column vertically and then flows to the next column. This feature is especially handy when dealing with dynamic content or when elements are of varying heights.

Basic implementation and examples

To implement a multi-column vertical flow layout, simply apply the column-count attribute to the parent container containing all list items.

HTML structure:

First, create a parent container and place a series of child elements inside it, each child element representing an item in the list.

 <div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

CSS style:

Next, apply the column-count attribute to the parent container .container, specifying the desired number of columns. For example, a setting of 3 will create a three-column layout.

 .container {
  column-count: 3; /* Specify the number of columns as 3 */
  /* Optional: add some styles to child elements to better observe the effect*/
  padding: 10px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
}

.container > div {
  padding: 5px 0;
  margin-bottom: 5px; /* Increase vertical spacing between items*/
  border-bottom: 1px dotted #ccc; /* Convenient to observe each item*/
}

Through the above code, the browser will automatically divide the content of numbers 1 to 15 into three columns, showing an effect similar to the following:

 1 6 11
2 7 12
3 8 13
4 9 14
5 10 15

When the number of list items or content height changes, column-count automatically adjusts the distribution of elements within the column without manual intervention.

Advanced configuration and precautions

Although the column-count attribute is powerful, combined with other related attributes and some considerations, finer control and a better user experience can be achieved.

1. Column-gap

To improve readability, you usually need some spacing between columns. You can use the column-gap attribute to define the horizontal distance between columns.

 .container {
  column-count: 3;
  column-gap: 20px; /* Set the gap between columns to 20 pixels*/
}

2. Column-rule

Adding visual dividers between columns can further enhance the clarity of your layout. The column-rule attribute allows you to define the style of the separator line, and its usage is similar to the border attribute.

 .container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ddd; /* Set the column separator line: 1 pixel solid line, gray */
}

3. Dynamic column width (column-width)

In addition to directly specifying the number of columns column-count, you can also specify the ideal minimum width of each column through the column-width attribute. The browser will automatically calculate the optimal number of columns based on the available width of the container and the value of column-width.

 .container {
  column-width: 150px; /* Each column must be at least 150 pixels wide*/
  /* If column-count and column-width are set at the same time, column-count has higher priority*/
}

4. Avoid elements breaking-inside

In some cases, you may not want a specific child element (such as a title or a complete card) to be split between columns. This behavior can be prevented using the break-inside: avoid; attribute.

 .container > div.no-break {
  break-inside: avoid; /* Prevent the element from breaking internally and keep it intact*/
}

5. Responsive design

Combined with media queries (@media), column-count or column-width can be dynamically adjusted according to the screen size to adapt to different devices and viewport sizes to achieve responsive layout.

 @media (max-width: 768px) {
  .container {
    column-count: 2; /* Display two columns on the small screen*/
  }
}

@media (max-width: 480px) {
  .container {
    column-count: 1; /* Display one column on a very small screen*/
  }
}

6. Horizontal scrolling processing

The column-count property typically attempts to fit the specified number of columns into the available width of its parent container. This means that if the number of columns is fixed, the content will automatically resize to fit. If your requirement is to have a fixed width per column and require horizontal scrolling when all fixed-width columns combined exceed the width of the parent container, then the column-count property may need to be used in conjunction with other layout methods (such as display: flex or display: grid combined with fixed-width children), or use the column-width property and ensure that the container is set to overflow-x: auto;. However, for most WinForm-like multi-column vertical flow layouts, column-count is graceful enough to handle content overflow to the next column without the need for explicit horizontal scrolling.

7. Compatibility

Modern browsers have good support for the CSS Multi-column Layout Module. For very old browser versions (such as IE9 and earlier), you may need to use a vendor prefix (such as -webkit-column-count) or consider alternatives. Normally, standard properties can now be used directly.

Summarize

The column-count property of CSS provides an efficient and easy-to-use solution for implementing multi-column vertical flow layout in HTML. It automatically handles dynamic content, elements of different heights, and balancing between columns, greatly simplifying the development process. By combining column-gap, column-rule and other attributes with responsive design strategies, developers can build a multi-column list layout that is both beautiful and practical to meet diverse web page display needs.

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