Is there a way to ensure the spacing between items is consistent?
I attempted to use grid-column-gap, but the gap varies because the number of items on each row differs. The first and third rows have a larger gap compared to the second row, which has the desired spacing.
Alternatively, I could set the item width to 100% and apply margins, but this would result in varying widths as the items on the second row would be smaller.
My goal is to:
- Center all items within the
#innerContainer - Maintain consistent spacing between items
- Ensure that each item has the same width
#container {
display: flex;
align-items: center;
justify-content: center;
}
#innerContainer {
display: grid;
grid-template-columns: repeat(60, 1fr);
grid-column-gap: 9px;
grid-row-gap: 9px;
}
.item {
width: 90px;
height: 90px;
background-color: blue;
grid-column: auto / span 15;
}
.item:nth-child(4)~.item {
grid-column: auto / span 12
}<div id="container">
<div id="innerContainer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>