I have a grid container which has 3 columns and 6 child items. When i set the 'justify-content' property of this container to 'space-between', the grid element is not displayed properly. in Firefox everything is fine but in Chrome it seems that the height of rows is not calculated properly and the heights are less than expected. Here is my code which shows the problem:
.container {
background-color: #69D1C5;
display: grid;
grid-template-columns: repeat(3, minmax(auto, 200px));
justify-content: space-between;
gap: 10px
}
.container .item {
width: 100%;
background-color: #8980F5;
}<div class="container">
<div class="item">
Spectacular ice age wolf pup and caribou dug up in Canada
</div>
<div class="item">
Plant roots evolved at least twice, and step by step
</div>
<div class="item">
Spectacular ice age wolf pup and caribou dug up in Canada Spectacular ice age wolf pup and caribou dug up in Canada
</div>
<div class="item">
Plant roots evolved at least twice, and step by step
</div>
<div class="item">
Plant roots evolved at least twice, and step by step Plant roots evolved at least twice, and step by step
</div>
<div class="item">
Plant roots evolved at least twice, and step by step
</div>
</div>And here is the Codepen link: link
