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
Selected Reading
How to create a list grid view with CSS and JavaScript?
A list grid view allows users to switch between displaying content in a grid layout (multiple columns) or a list layout (single column). This is commonly used in dashboards, galleries, and data presentation interfaces where users need different viewing options.
Syntax
/* Grid Layout */
.column {
float: left;
width: 50%;
}
/* List Layout */
.column {
width: 100%;
}
Example: Interactive List Grid View
The following example creates a switchable list/grid view with JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
}
.column {
float: left;
width: 50%;
padding: 10px;
color: white;
margin-bottom: 10px;
border-radius: 8px;
text-align: center;
transition: width 0.3s ease;
}
.row:after {
content: "";
display: table;
clear: both;
}
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
margin-right: 5px;
border-radius: 4px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h1>List Grid View Example</h1>
<h2>Click the buttons to switch between views</h2>
<div id="btnContainer">
<button class="btn" onclick="listView()">List</button>
<button class="btn active" onclick="gridView()">Grid</button>
</div>
<br>
<div class="row">
<div class="column" style="background-color: #9a09ad;">
<h2>Item 1</h2>
<p>Content for first item</p>
</div>
<div class="column" style="background-color: #7123d8;">
<h2>Item 2</h2>
<p>Content for second item</p>
</div>
</div>
<div class="row">
<div class="column" style="background-color: #138f55;">
<h2>Item 3</h2>
<p>Content for third item</p>
</div>
<div class="column" style="background-color: #cf451b;">
<h2>Item 4</h2>
<p>Content for fourth item</p>
</div>
</div>
<script>
var elements = document.querySelectorAll(".column");
function listView() {
Array.from(elements).forEach(item => {
item.style.width = "100%";
});
updateActiveButton(0);
}
function gridView() {
Array.from(elements).forEach(item => {
item.style.width = "50%";
});
updateActiveButton(1);
}
function updateActiveButton(activeIndex) {
Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
if (index === activeIndex) {
item.classList.add("active");
} else {
item.classList.remove("active");
}
});
}
</script>
</body>
</html>
Output
Grid View: Four colored boxes arranged in a 2x2 grid layout with "Grid" button highlighted. List View: When "List" button is clicked, all four boxes stack vertically in a single column with "List" button highlighted.
Key Features
The example demonstrates several important concepts −
- CSS Transitions: Smooth width animation when switching views
- JavaScript DOM Manipulation: Dynamic style changes and button state management
- Responsive Design: Content adapts to different layout modes
- Event Handling: Button clicks trigger view changes
Modern Alternative with CSS Grid
For modern browsers, CSS Grid provides a cleaner approach −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
transition: grid-template-columns 0.3s ease;
}
.container.list-mode {
grid-template-columns: 1fr;
}
.item {
background-color: #4a90e2;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
</body>
</html>
A cleaner grid layout that can be toggled by adding/removing the "list-mode" class with JavaScript.
Conclusion
List grid views provide flexible content presentation options. While floats work for basic implementations, modern CSS Grid offers cleaner, more maintainable solutions with better responsive behavior.
Updated on: 2026-03-15T15:16:34+05:30
2K+ Views
Advertisements