CSS 如何以n列格式显示列表

在本文中，我们将学习如何使用HTML和CSS中的columns、column-count和grid CSS属性以“n”列格式显示列表。

以列的方式显示列表可以节省空间并使信息更具视觉吸引力。我们可以通过使用依赖于columns、column-count和grid属性的不同方法来实现这一点。

让我们详细了解每种方法。

方法1

在这种方法中，我们将使用column-count CSS属性来确定我们将内容分成的列数。让我们通过一个例子来理解这个概念。

示例

文件名：index.html

<html lang="en">
<head>
   <title>How to display a list in n columns format?</title>
   <style>
      ul {
         column-count: 3;
      }
   </style>
</head>
<body>
   <h3>How to display a list in n columns format?</h3>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
   </ul>
</body>
</html>

方法2

在此方法中，列表项将被包裹在一个带有类名为list-container的容器中。通过使用CSS的Flexbox属性，如display:flex和flex-wrap:wrap，列表项将根据可用空间自动分流到多列。

示例

文件名：index.html

<html lang="en">
<head>
   <title>How to display a list in n columns format?</title>
   <style>
      .list-container {
         display: flex;
         flex-wrap: wrap;
      }
      .list-item {
         flex-basis: 33.33%; /* Adjust this value for the desired number of columns */
      }
   </style>
</head>
<body>
   <h3>How to display a list in n columns format?</h3>
   <div class="list-container">
      <div class="list-item">Item 1</div>
      <div class="list-item">Item 2</div>
      <div class="list-item">Item 3</div>
      <div class="list-item">Item 4</div>
      <div class="list-item">Item 5</div>
      <div class="list-item">Item 6</div>
      <div class="list-item">Item 7</div>
      <div class="list-item">Item 8</div>
      <div class="list-item">Item 9</div>
      <div class="list-item">Item 10</div>
   </div>
</body>
</html>

方法3

在这个方法中，列表项将被包裹在一个带有类名list-container的容器中。通过利用CSS Grid属性，如display: grid和grid-template-columns，根据指定的列数，列表项将以多列的形式显示出来。

示例

文件名：index.html

<html lang="en">
<head>
   <title>How to display a list in n columns format?</title>
   <style>
      .list-container {
         display: grid;
         grid-template-columns: repeat(3, 1fr); /* Adjust this value for the desired number of columns */
         grid-gap: 10px; /* Adjust the gap between items */
      }
   </style>
</head>
<body>
   <h3>How to display a list in n columns format?</h3>
   <div class="list-container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
      <div>Item 7</div>
      <div>Item 8</div>
      <div>Item 9</div>
      <div>Item 10</div>
   </div>
</body>
</html>