How to Create Dynamic Grid Layout using CSS?
A dynamic grid layout using CSS can help us to build responsive and flexible web designs. In this article, we are going to learn about different approaches to achieving dynamic grid layouts, with their syntax, and example code for each method. A dynamic grid layout adjusts based on the content and screen size. It is useful for building responsive designs where the number of columns and their sizes adapt automatically. CSS Grid and Flexbox are two popular methods for creating such layouts.
There are different approaches to create dynamic grid layout using CSS:
Table of Content
CSS Grid Layout
CSS Grid Layout provides a two-dimensional grid system to create complex layouts. It is ideal for creating both rows and columns, making it perfect for dynamic designs.
Syntax:
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.item {
background: #f0f0f0;
padding: 20px;
}
Example: Below is the example code of a grid layout using CSS Grid which creates a grid with items that automatically adjust their size and number based on the container width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Grid Layout</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.item {
background: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
Output:
Flexbox Layout
Flexbox is another layout model that can be used for creating dynamic grids. It works well for one-dimensional layouts, but can also be adapted for grids.
Syntax:
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1 1 100px;
background: #f0f0f0;
padding: 20px;
}
Example: This illustrates the items that will wrap into new rows when there's not enough space, maintaining a responsive layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1 1 100px;
background: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
Output:
CSS Grid with Auto-Fill/Auto-Fit
Using auto-fill and auto-fit with CSS Grid can create more flexible grid layouts that automatically adjust based on content.
Syntax:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.item {
background: #f0f0f0;
padding: 20px;
}
Example: To illustrate that the grid columns will automatically adjust to fit the container width, creating a dynamic and responsive design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Dynamic Grid with Auto-Fit</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.item {
background: #f0f0f0;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
Output:
Conclusion
Creating dynamic grid layouts with CSS allows us to build flexible and responsive designs easily. By using CSS Grid and Flexbox, we can create layouts that adjust to different screen sizes and content. We have discussed different approaches of creating a dynamic grid layouts in this article.
