Responsive masonry grid CSS layout is created by custom pure CSS without any JavaScript code or library. We can use this grid design for the grid masonry gallery page. CSS masonry columns will change according to screen size like on the desktop 4 columns, tablet 3 columns, and mobile 1 column grid layout.
Here we have used a simple CSS grid trick, not masonry flexbox CSS. There we can see all the cards adjust from left to right align.
HTML
<div class="middle-div">
<h2>Masonry Grid With CSS</h2>
<p>Responsive masonry layout using CSS grid</p>
<div class="masonry-grid">
<div class="review-item">
<img src="/images/image-one.jpg">
</div>
<div class="review-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text </p>
</div>
<div class="review-item">
<img src="/images/image-two.jpg">
</div>
<div class="review-item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<div class="review-item">
<img src="/images/image-three.jpg">
</div>
<div class="review-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="review-item">
<img src="/images/image-four.jpg">
</div>
<div class="review-item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<div class="review-item">
<img src="/images/image-five.jpg">
</div>
<div class="review-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="review-item">
<img src="/images/image-six.jpg">
</div>
<div class="review-item">
<img src="/images/image-one.jpg">
</div>
<div class="review-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="review-item">
<img src="/images/image-two.jpg">
</div>
<div class="review-item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<div class="review-item">
<img src="/images/image-three.jpg">
</div>
<div class="review-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="review-item">
<img src="/images/image-four.jpg">
</div>
<div class="review-item">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
<div class="review-item">
<img src="/images/image-five.jpg">
</div>
<div class="review-item">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div class="review-item">
<img src="/images/image-six.jpg">
</div>
</div>
</div>HTML
body {
font-family: sans-serif;
margin: 0px;
padding: 0px;
background: #f1f1f1;
}
h2, p {
text-align: center;
}
h2 {
font-size: 32px;
margin: 50px 0px 11px;
}
p {
font-size: 17px;
line-height: 32px;
margin: 0;
}
img {
display: block;
max-width: 100%;
}
.middle-div {
max-width: 1200px;
margin: 0 auto;
}
/* Masonry Grid CSS */
.masonry-grid {
column-count: 4;
-webkit-column-count: 4;
-moz-column-count:4;
column-gap: 20px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
margin: 50px 0px;
}
.review-item {
width: 100%;
padding: 10px;
margin: 10px 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0px 0px 8px 0px #c0c0c0;
display: inline-block;
background-color: #fff;
}
/*Responsive Masonry Grid CSS */
@media (max-width: 1199px) {
.masonry-grid {
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
}
}
@media (max-width: 991px){
.masonry-grid {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
}
}
@media (max-width: 767px){
.masonry-grid {
column-count: 1;
-webkit-column-count: 1;
-moz-column-count: 1;
}
}