CSS Grid how to push items to the bottom and then to the left
In other words, you want your second button, when it is in an even position counting from the last, to be in the first column:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 1fr;
margin: 10px;
}
.container button:nth-child(2):nth-last-child(even) {
background-color: yellow;
grid-column: 1;
}<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<button>E</button>
</div>
<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
</div>
<div class="container">
<button>A</button>
<button>B</button>
</div>A flexbox idea:
.container {
display: flex;
flex-wrap:wrap;
margin: 10px;
}
.container button {
width:50%;
}
.container button:first-child:nth-last-child(odd) {
margin-right:1px; /* a tiny margin to push the next element */
}<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<button>E</button>
</div>
<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
</div>
<div class="container">
<button>A</button>
<button>B</button>
<button>C</button>
</div>
<div class="container">
<button>A</button>
<button>B</button>
</div>