CSS Only Masonry Layouts
Last Updated :
20 Jun, 2022
A Masonry layout is one in which things are placed one after the other in a straight line. Objects will migrate up into any gaps left by shorter items in the first line as they move onto the next line. It’s comparable to a grid layout with auto-placement, except the rows don’t follow a tight grid. Mostly this layout is used to display images or cards or posts on a website. There are a number of ways by which we can achieve it by using JavaScript or other scripting languages but here we are going to achieve only using CSS. In this article, we will see how we can build a masonry layout using HTML & CSS.
Approach: There are a couple of ways we can use to achieve masonry layout but this approach here involves usage of no complex knowledge and no usage of anything other than basic CSS, not even SCSS. To achieve the Layout we will implement a Multi-column Layout. Here the items won’t go vertically in order, but horizontally in order. Basically, the width of all the items is kept the same, and then the height is adjusted accordingly. That means we keep the width-to-height ratio of items the same so adjust the height of the items with respect to that ratio.
We are using the grid-layout display and instead of placing the items in a horizontal manner, we are placing them in a vertical manner. Because the width of the items will be identical, there will be no gap below the items. Also, the layout is completely responsive and adjusts itself according to the screen size. This approach can only be a problem to use when we are showing search results because then the earliest results will be shown at the end of the grid.
Property Used:
- Display property: This property is mainly used to determine how all the elements on the webpage are going to be aligned and shown. We are mainly using the Grid value of the property. Grid display is the closest to a masonry layout and this plays the most important role in arranging the items in that layout.
Example: This example describes the CSS Masonry Layouts.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #000;
font: 1.1em Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
display: block;
}
figure {
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 10px;
break-inside: avoid;
}
figure > img {
grid-row: 1 / -1;
grid-column: 1;
}
figure a {
color: black;
text-decoration: none;
}
figcaption {
grid-row: 2;
grid-column: 1;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.2em 0.5em;
justify-self: start;
}
.container {
column-count: 4;
column-gap: 10px;
}
</style>
</head>
<body>
<div style="margin: 3rem;
font-family: Roboto,
sans-serif">
<h1 style="color: green;
text-align: center">
GeeksforGeeks
</h1>
<h3 style="text-align: center;
color: aliceblue">
CSS Masonry Layouts
</h3>
</div>
<div class="container">
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">1</a>
</figcaption>
</figure>
<figure class="landscape">
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">2</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg" />
<figcaption>
<a href="#">3</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">4</a>
</figcaption>
</figure>
<figure class="landscape">
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">5</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">6</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">7</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">8</a>
</figcaption>
</figure>
<figure class="landscape">
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">9</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">10</a>
</figcaption>
</figure>
<figure>
<img src=
alt="gfgImg"/>
<figcaption>
<a href="#">11</a>
</figcaption>
</figure>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...