什么是CSS列，如何填充它

我们可以使用各种CSS属性来管理网页的列，’column-fill’就是其中之一。column-fill CSS属性用于设置内容在多列中的显示方式。例如，它是否应该按自然流程排列或在所有列之间平衡。

有时，我们需要在所有列中设置相等的内容，以提高应用程序的用户体验。

语法

用户可以按照以下语法使用column-fill CSS属性。

column-fill: auto | balance | initial | inherit;

列填充 CSS 属性值

auto - 它将内容设置为自然流程。例如，它将内容填充到第一列，然后才发送内容到第二列。
balance - 它用于在所有列中设置相等的内容。
initial - 它设置默认值，即 ‘balance’。
inherit - 它继承父元素的 column-fill 属性值。

示例1

在下面的示例中，我们定义了两个 div 元素并添加了文本内容。同时，我们为两个 div 元素设置了固定的尺寸。然后，我们将列数设置为 2，并将列填充设置为 auto。

在输出中，我们可以观察到它首先填充第一列，然后再进入第二列。如果第一列没有完全填满，内容将保留在第一列中。

<html>
<head>
   <style>
      div {
         background-color: red;
         padding: 20px;
         font-size: 1.3rem;
         margin: 20px;
      }
      .javascript {
         column-count: 1;
         column-fill: auto;
         column-gap: 20px;
         column-rule: 1px solid #000;
      }
      .svelte {
         column-count: 2;
         column-fill: auto;
         column-gap: 20px;
         column-rule: 3px dotted blue;
      }
   </style>
</head>
<body>
   <h3> Using the <i> column-fill CSS property </i> to set the content in columns </h3>
   <div class = "javascript">
      JavaScript is a popular programming language used for both front-end and back-end development. It is known for its versatility, allowing developers to create dynamic and interactive websites and applications.
   </div>
   <div class = "svelte">
      Svelte is a web application framework that allows developers to build highly performant and reactive user interfaces. It is designed to optimize the code and minimize the amount of code sent to the browser, resulting in faster load times and better user experience.
      Svelte uses a reactive approach to building user interfaces, meaning that changes in data are automatically reflected in the user interface without needing to write additional code. This can significantly reduce development time and make the code easier to maintain.
   </div>
</body>
</html>

示例2

在下面的示例中，我们定义了两个与第一个相同的div元素。然后，我们为第一个div设置了4个列，为第二个div设置了3个列。

此外，我们为两个div元素的“column-fill”属性设置了“balance”值。在输出中，我们可以看到内容在多个列之间是如何平衡的，即使不满的列底部也有空间。

<html>
<head>
   <style>
      div {
         width: 600px;
         height: 200px;
         background-color: green;
         padding: 20px;
         font-size: 1.3rem;
         margin: 20px;
         color: white;
      }
      .python {
         column-count: 4;
         column-fill: balance;
         column-gap: 20px;
         column-rule: 1px solid red;
      }
      .react {
         column-count: 3;
         column-fill: balance;
         column-gap: 20px;
         column-rule: 3px dotted blue;
      }
   </style>
</head>
<body>
   <h3> Using the <i> column-fill CSS property </i> to set the content in columns </h3>
   <div class = "python">
      Python is a versatile programming language widely used for web development, data analysis, machine learning, and
      scientific computing. It has a simple and easy-to-learn syntax, making it a popular choice for beginners.
   </div>
   <div class = "react">
      React is a JavaScript library used for building user interfaces. It allows developers to create reusable UI
      components and efficiently update the DOM as the application state changes. React is widely used for building
      single-page applications and mobile applications.
   </div>
</body>
</html>

用户学会了使用CSS的column-fill属性来设置在多列之间内容应该如何显示。使用balance值将内容等分在具有’auto’高度的列中是推荐的方法，这样我们可以克服底部的空间。