I've encountered an issue where the CSS on two pages, with slight color changes, is behaving differently in terms of grid layout. Despite multiple attempts to troubleshoot by adjusting items, grid-template-layout, and other parameters, the issue persists. The only solution that worked was copying and pasting the code from the functioning page to the non-functioning page. I've exhaustively gone through everything, but can't pinpoint the source of the discrepancy between the two pages.
The desired outcome is 4 columns with equal widths.
However, the current state is as follows: one page displays the desired layout, while the other has uneven column widths - with the first column being larger, the second medium, and the last smaller. Additionally, when adding columns, the attributes of the largest/medium/smaller columns switch randomly.
.the-grid {
padding-bottom: 20px;
max-width: 1640px;
margin: auto;
}
.the-grid-layout {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 60px;
-webkit-align-items: top;
-webkit-box-align: top;
-ms-flex-align: top;
align-items: top;
max-width: 1640px;
margin: 0 auto 120px;
position: relative;
}
.item {
position: relative;
}
.image-cont {
background-size: cover;
width: 100%;
height: 50px;
margin-bottom: 20px;
background-repeat: no-repeat;
}
.heading-cont {
background-color: rgb(255, 255, 255);
text-align: center;
padding: 30px 20px;
transition: all 0.15s ease-in-out 0s;
}<section class="the-grid">
<div class="the-grid-layout">
<div class="item">
<a href="/content-url">
<div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
<div class="heading-cont">
<h5 class="heading">Item Title</h5>
</div>
</a>
</div>
<div class="item">
<a href="/content-url">
<div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
<div class="heading-cont">
<h5 class="heading">Item Title</h5>
</div>
</a>
</div>
<div class="item">
<a href="/content-url">
<div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
<div class="heading-cont">
<h5 class="heading">Item Title</h5>
</div>
</a>
</div>
<div class="item">
<a href="/content-url">
<div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
<div class="heading-cont">
<h5 class="heading">Item Title</h5>
</div>
</a>
</div>
<div class="item">
<a href="/content-url">
<div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
<div class="heading-cont">
<h5 class="heading">Item Title</h5>
</div>
</a>
</div>
<div class="item">
<a href="/content-url">
<div class="image-cont" style="background-image:url(http://via.placeholder.com/350x150);"></div>
<div class="heading-cont">
<h5 class="heading">Item Title</h5>
</div>
</a>
</div>
</div>
</section>