Home > Article > Web Front-end > What is a CSS column and how to populate it?
What is a CSS column and how to populate it?
- PHPzforward
- 2023-08-30 15:49:101387browse
We can use various CSS properties to manage the columns of web pages, and "column-fill" is one of them. The column-fill CSS property is used to set the appearance of content in multiple columns. For example, it should flow or balance naturally between all columns.
Sometimes, we need to set the same content in all columns to improve the user experience of the application.
grammar
Users can use the column-fill CSS property according to the following syntax.
column-fill: auto | balance | initial | inherit;
Column fill CSS property value
auto - It sets the content in the natural flow. For example, it fills the first column and only sends the content to the second column.
Balance - Used to set the same content in all columns.
Initial - Sets the default value, which is "Balance".
Inheritance - It inherits the value of the column fill property from the parent element.
Example 1
In the example below, we define two div elements and add text content. Additionally, we set fixed dimensions for both div elements. After that, we set the number of columns to 2 and column padding to auto.
In the output, we can observe that it fills the first column first and then only the second column. If the first column is not completely filled, the content remains in the first column.
<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>
Example 2
In the example below, we define two div elements like the first one. After that, the number of columns of the first div element is equal to 4 and the number of columns of the second div element is equal to 3.
In addition, we also set the "balance" value for the "column-fill" attribute of the two div elements. In the output, we can see how the content is balanced across multiple columns, and there's even space at the bottom of any column that's not full.
<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>
Users have learned to use the CSS column-fill property to set the way content is displayed between multiple columns. It is recommended to use balance values to divide content evenly among columns of "auto" height. This way we can overcome the bottom space.
The above is the detailed content of What is a CSS column and how to populate it?. For more information, please follow other related articles on the PHP Chinese website!