- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are CSS columns and how to fill it?
We can manage the columns of the web page using the various CSS properties, and ‘column-fill’ is one of them. The column-fill CSS property is used to set how content should look in multiple columns. For example, it should be in the natural flow or balanced between all columns.
Sometimes, we require to set equal content in all columns to improve the user experience of the application.
Syntax
Users can follow the syntax below to use the column-fill CSS property.
column-fill: auto | balance | initial | inherit;
Column-fill CSS Property Values
auto − It sets the content in the natural flow. For example, it fills the first column and only sends content to the second column.
Balance − It is used to set equal content in all columns.
Initial − It sets the default value, which is ‘balance’.
Inherit − It inherits the value for the column-fill property from the parent element.
Example 1
In the example below, we have defined two div elements and added the text content. Also, we have set the fixed dimensions for both div elements. After that, we have set the column count equal to 2 and column-fill equal to auto.
In the output, we can observe that it fills the first column first and then only goes to the second column. If the first column is not fully 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 have defined two div elements like the first. After that, we have a column count equal to 4 for the first div and 3 for the second div element.
Also, we have set the ‘balance’ value for the ‘column-fill’ property of both div elements. In the output, we can see how content is balanced between multiple columns, and even any columns that are not full have space at the bottom.
<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 learned to use the column-fill property of CSS to set how content should appear between multiple columns. Using the balance value to divide content equally in column with ‘auto’ height is recommended. So we can overcome the bottom space.
113 Views
