This article aims to guide readers on how to use the `column-count` property of CSS in HTML to efficiently implement a multi-column list layout similar to WinForm. The characteristic of this layout is that content items fill columns in a vertical direction. When one column is filled, it automatically flows to the next column. It can also adapt to content items of different heights to achieve a dynamic and responsive multi-column display effect. Through concise CSS code, developers can easily create multi-column lists with clear structure and adaptive content, without the need for complex JavaScript or Flexbox/Grid layout.

Understand multi-column layout requirements

In web development, we sometimes need to render a special list layout that behaves like a multi-column listbox in desktop applications such as WinForm. Specifically, list items first fill the first column vertically, and when the height of the first column reaches the container limit or has accommodated the specified number of items, the remaining items automatically flow to the second column, and so on. The challenges with this layout are:

1. Dynamic content: The number and content of list items are not fixed.
2. Variable height: Individual list items may have different heights.
3. Automatic flow: When one column is filled, the content automatically flows to the next column.
4. Horizontal scrolling (optional): Allows horizontal scrolling when the total width of all columns exceeds the container.

Although the traditional Flexbox or Grid layout is powerful, more complex logic or JavaScript may be required to achieve this "first vertically then horizontally" automatic filling of multiple columns effect. However, CSS’s multi-column layout module offers a more straightforward and elegant solution.

Core solution: CSS column-count

The CSS column-count property is the key to achieving this multi-column layout. It belongs to the CSS Multi-column Layout Module and allows a container to divide its content into a specified number of columns. The browser automatically handles content flow and column balancing.

Working principle

When applying the column-count attribute to a container element, the browser:

1. Divides the container's available width into columns based on the specified number of columns.
2. Fill the first column with the child elements in the container in document flow order from top to bottom.
3. When the first column is filled (or reaches a natural breakpoint, such as a child element boundary), the content automatically flows to the second column and continues filling.
4. This process continues until all columns are filled, or all content is displayed.

This mechanism perfectly fits our needs for WinForm-style multi-column lists, because it naturally implements the "vertical first, then horizontal" filling logic, and can automatically adapt to changes in the height of child elements.

Practical examples

The following will use a specific code example to show how to use column-count to implement a multi-column list.

HTML structure

First, we need a parent container to wrap all list items. Each list item can be a simple div or other block-level element.

 <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>

In this example, .container is our parent container, and each number represents a list item.

CSS styles

Next, apply the column-count attribute to the parent container.

 .container {
  column-count: 3; /* Divide the content into 3 columns*/
  column-gap: 20px; /* Optional: Set the spacing between columns */
  width: 300px; /* Example: Set a fixed width for the container*/
  border: 1px solid #ccc; /* Example: Conveniently observe the container border*/
  padding: 10px; /* Example: padding*/
  box-sizing: border-box; /* Make sure the width includes padding and border*/
  /* Allow horizontal scrolling if content exceeds width*/
  /* Note: column-count will usually try to fit the container width,
     But if the child element width is fixed and the sum exceeds, or the container is not wide enough to accommodate all columns,
     You may need to handle overflow manually.
     In this scenario, if the number of columns is fixed, the width of the container is not enough to display all columns.
     Browsers often shrink column widths to fit, or decide whether to overflow based on the content.
     If you want to fix the column width and allow horizontal scrolling, you may need to combine `column-width` or other layout methods.
     For this example's "vertical first, then horizontal" flow, `column-count` is sufficient.
  */
}

.container div {
  /* Example: Add some styles to list items to make them easier to distinguish */
  padding: 5px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  border: 1px solid #eee;
  text-align: center;
}

/* Simulate elements of different heights */
.container div:nth-child(even) {
  height: 30px; /* Even-numbered items are taller*/
}
.container div:nth-child(odd) {
  height: 20px; /* Odd-numbered items are shorter*/
}

In the above CSS, we set the column-count of .container to 3. This means that all div elements within the container will automatically be displayed in three columns. The column-gap attribute is used to set the gap between columns to improve readability. By setting different heights for odd and even items, we show how column-count can handle child elements of different heights gracefully.

Effect demonstration

After applying the above code, you will see an effect similar to the following:

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

The numbers will be filled in order from top to bottom and left to right, and the browser will intelligently adjust the layout even if the elements are of different heights.

Advanced Considerations and Notes

1. Column gap (column-gap): You can use the column-gap attribute to control the horizontal spacing between columns.
2. Column separator line (column-rule): If necessary, you can use the column-rule attribute (short form, similar to border) to add a separator line between columns, for example, column-rule: 1px solid #ccc;.
3. Column-width: In addition to column-count, column-width can also be used to specify the ideal width of each column. If column-count and column-width are set at the same time, the browser will give priority to column-width based on the available space and content amount, and calculate the actual number of columns. If you only set column-width, the browser will automatically calculate the maximum number of columns it can accommodate.
4. Content break controls (break-inside, break-before, break-after): By default, the browser may break content anywhere to fit the column. If you want an element (such as a title or image) not to be broken across columns, use break-inside: avoid;.
5. Horizontal scrolling: The original question mentions "Scroll sideways if width exceeds". column-count itself allows content to be automatically distributed under a fixed number of columns. If the container is not wide enough to display all columns (for example, the content of each column is a fixed width and the total width exceeds the parent container), browsers will usually try to shrink the column width. If you want to force fixed column widths and allow horizontal scrolling, this usually means that the width of the parent container needs to be large enough to accommodate all columns, or combined with overflow-x: auto;. However, with column-count, it's more about how the content is divided into a fixed number of columns within the available space, rather than a fixed column width. If you need fixed column widths and horizontal scrolling, you may want to consider Flexbox or Grid layout combined with min-width and overflow-x: auto;. But in this scenario, column-count has well solved the "vertical first and then horizontal" flow layout problem.
6. Browser compatibility: The column-count attribute is widely supported in modern browsers. For older browsers, it may be necessary to add a prefix (such as -webkit-column-count), but this is usually no longer necessary.

Summary

Through the column-count property of CSS, we can implement a WinForm-like multi-column list layout in HTML very concisely and efficiently. This method not only has a small amount of code and is easy to understand and maintain, but also can adapt well to dynamic content and variable-height list items, achieving automatic vertical-horizontal content flow. Column-count is undoubtedly a powerful and practical tool for scenarios that require displaying large amounts of data and improving information density and readability in multiple columns. Mastering this feature will take your web layout capabilities to the next level.

The above is the detailed content of Implementing WinForm style dynamic multi-column list layout in HTML. For more information, please follow other related articles on the PHP Chinese website!