Hello, I am just starting to explore CSS grid. Take a look at the example below:
.platform {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px;
}
.item {
width:100%;
background-color:#aaa;
padding:10px;
box-sizing:border-box;
text-align:center;
}
.wrapmed {
max-width:400px;
}
.wrapsmall {
max-width:300px;
}<div class="platform">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
</div>
<br/><br/>
<div class="wrapmed">
<div class="platform">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
</div>
</div>
<br/><br/>
<div class="wrapsmall">
<div class="platform">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
</div>
</div>Overall, the grid setup is functioning fine. However, I want to ensure that there are never 3 items in one row and only 1 item in the next.
I aim to have either 4 columns, or two columns, or one. How can I achieve this desired layout behavior?
Update: The updated code snippet now showcases all three possible cases. Case 2 is the unwanted scenario.