How to Display List Items as Columns with CSS3?

Displaying List Items as Columns with CSS3 Columns

Can you display lists in rows or columns depending on screen size? This is a common challenge in responsive web design. While tables are an option, CSS3 provides a more elegant solution with its columns property.

Here's an example HTML structure:

<div>

To display these list items as columns, add the following CSS:

#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

#limheight li {
  display: inline-block; /* Necessary */
}

The result will be three columns of list items, as shown:

1   4   7
2   5   8
3   6   9

Adjust the column-count value to change the number of columns. For responsiveness, you can use media queries to switch between one-column and multi-column layouts based on screen size.

The above is the detailed content of How to Display List Items as Columns with CSS3?. For more information, please follow other related articles on the PHP Chinese website!