Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Display a List in N Columns Format
In this article, we will learn how to display a list in "n" column format in HTML and CSS with the help of columns, column-count, and grid CSS properties.
Displaying a list in columns can be a useful way to save space and make the information more visually appealing. We can achieve this by using different approaches that rely on columns, column-count, and grid properties respectively.
Let's understand each approach in detail.
Approach 1
In this approach, we will use the column-count CSS property to determine the number of columns we will divide our content into. Let's understand this with the help of an example
Example
Filename: 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>
Approach 2
In this approach, the list items will be wrapped inside a container with the class list-container. By using CSS Flexbox properties, such as display: flex and flex-wrap: wrap, the list items will automatically flow into multiple columns based on the available space.
Example
Filename: 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>
Approach 3
In this approach, the list items will be wrapped inside a container with the class list-container. By utilizing CSS Grid properties, such as display: grid and grid-template-columns, the items will be displayed in multiple columns based on the specified number of columns.
Example
Filename: 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>
Conclusion
In this article, we learned how to display a list in "n" column format with the help of 3 different approaches. In the first, second, and third approaches, we used the column-count, flexbox layout and grid CSS properties to divide the content into the desired number of columns.
974 Views
