Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to 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 CSS Multi-Column Layout, Flexbox, and CSS Grid 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 column-count, flexbox, and grid properties respectively.
Syntax
/* Multi-Column Layout */
selector {
column-count: number;
}
/* Flexbox Approach */
selector {
display: flex;
flex-wrap: wrap;
}
/* CSS Grid Approach */
selector {
display: grid;
grid-template-columns: repeat(n, 1fr);
}
Method 1: Using CSS Multi-Column Layout
In this approach, we use the column-count CSS property to determine the number of columns we will divide our content into
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Column List Layout</title>
<style>
.column-list {
column-count: 3;
column-gap: 20px;
list-style-position: inside;
}
.column-list li {
break-inside: avoid;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h3>Multi-Column List (3 columns)</h3>
<ul class="column-list">
<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>
A bulleted list displayed in 3 equal columns with items flowing from top to bottom in the first column, then continuing in the second column, and so on.
Method 2: Using Flexbox
In this approach, the list items are wrapped inside a container using CSS Flexbox properties. By setting flex-basis, items automatically flow into multiple columns
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox List Layout</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex-basis: calc(33.33% - 10px);
padding: 8px;
background-color: #f0f0f0;
border-radius: 4px;
}
</style>
</head>
<body>
<h3>Flexbox List (3 columns)</h3>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
<div class="flex-item">Item 7</div>
<div class="flex-item">Item 8</div>
<div class="flex-item">Item 9</div>
</div>
</body>
</html>
Nine gray boxes with rounded corners arranged in 3 columns and 3 rows, each containing "Item X" text. Items flow from left to right across rows.
Method 3: Using CSS Grid
In this approach, we use CSS Grid properties to create a precise column layout with grid-template-columns
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid List Layout</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
.grid-item {
padding: 10px;
background-color: #e3f2fd;
border: 1px solid #2196f3;
text-align: center;
border-radius: 4px;
}
</style>
</head>
<body>
<h3>CSS Grid List (3 columns)</h3>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
</div>
</body>
</html>
Nine light blue boxes with blue borders arranged in a precise 3x3 grid layout, each containing centered "Item X" text with equal spacing between all items.
Conclusion
We explored three effective methods to display lists in column format: CSS Multi-Column Layout for newspaper-style columns, Flexbox for flexible responsive layouts, and CSS Grid for precise control over positioning and alignment.
1K+ Views
