Recently, I designed a masonry layout with CSS grid.
I had a specific requirement for this layout - it needed to have a maximum of 8 columns and also be responsive based on the screen size.
Initially, everything worked perfectly until the number of items in my "masonry" exceeded or fell below 8. When the count was less than 8, I wanted the columns to be centered within the "masonry".
HTML
<body>
<div class="masonry">
<p class="subheading-text">Automobiles</p>
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/235/1672659803.jpeg">
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/233/download (2).jpeg">
<p class="subheading-text">Badhai</p>
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/223/advertisement(2).jpeg">
<p class="content-text"><strong>Lorem</strong> 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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop </p>
<p class="subheading-text">Business</p>
<p class="content-text"><strong>WANTED</strong> Investor/Partner Rs.3.5 Cr for our Packaging Material mfg Unit Nr. Mumbai 7021629703 9821009496</p>
<p class="subheading-text"gt;Education</p>
<p class="content-text"><strong>Lorem</strong> 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, when an unknown printer took a galley of type and</p>
</div>
</body>
CSS
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.masonry {
--masonry-gap: 15px;
--masonry-brick-width: 200px;
column-gap: var(--masonry-gap);
column-fill: initial;
column-width: var(--masonry-brick-width);
max-width: 1740px;
}
.masonry > * {
break-inside: avoid;
margin-bottom: var(--masonry-gap);
}
@supports (grid-template-rows: masonry) {
.masonry {
display: grid;
gap: var(--masonry-gap);
grid-template-rows: masonry;
grid-template-columns: repeat(
auto-fill,
minmax(var(--masonry-brick-width), 1fr)
);
align-tracks: stretch;
}
.masonry > * {
margin-bottom: initial;
}
}
.masonry {
padding: 8px;
}
.content-text {
padding: 10px;
margin: 0px;
border: 1px solid black;
border-radius: 5px;
transition: 0.15s ease-in-out;
}
.content-text:hover {
background-color: antiquewhite;
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
.heading-text {
margin: 0px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background-color: #ca4040;
color: white;
border-radius: 5px;
}
.subheading-text {
margin: 0px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
color: #404eca;
border: 3px solid #404eca;
border-radius: 5px;
}
.content-img {
width: 100%;
transition: 0.15s ease-in-out;
}
.content-img:hover {
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
If you can provide any assistance on how to solve the alignment issue within the 'masonry' container, it would be greatly appreciated.
I've tried various methods to center the contents inside the 'masonry' div, especially when the brick count falls below 8, but they always end up being left-aligned due to the fixed max-width set at 1740px for the 'masonry' div.