CSS waterfall layout grid
CSS waterfall flow layout grid
A Grid Layout is a commonly used design technique for cascading content in an irregular pattern, creating a unique aesthetic. In web design, Grid Layout is often used to display https://coder-cafe.com/wp-content/uploads/2025/09/images, products, and other content, making the page look more aesthetically pleasing and engaging. This article will explain how to implement a Grid Layout using CSS.
1. Introduction to CSS Grid
CSS Grid Layout is a two-dimensional layout system that makes it easy to create complex grid layouts. By dividing a container into rows and columns, we can create flexible layout designs on web pages. CSS Grid layout supports a variety of properties and values, which can achieve a variety of layout effects.
2. Implementing a Waterfall Layout
To implement a waterfall layout, we can leverage the features of CSS Grid Layout to arrange content in an irregular pattern on a web page. Below is a simple example code demonstrating how to implement a waterfall layout using CSS Grid Layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Waterfall Layout</title>
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.item {
background-color: #f2f2f2;
border-radius: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid">
<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 class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>
</div>
</body>
</html>
In the example code above, we create a grid layout containing 10 items. By setting the .grid property to display: grid, we divide the container into a grid layout. Using the grid-template-columns property, we set the width of each column to minmax(200px, 1fr), which allows each column to adapt to its width while maintaining a minimum width of 200px. The gap property sets a 10px gap between columns. Each item has the .item class and is styled to display its content.
3. Implementation
Save the sample code above as an .html file and open it in your browser to see the page implementing the waterfall layout. The 10 items on the page will be arranged in an irregular grid pattern, creating a waterfall effect. You can add more items and adjust the styles to create a more diverse layout effect.
With CSS Grid Layout, we can easily implement a waterfall layout, making our web pages look more beautiful and attractive.