grid item last position for dynamic item length
Can i push a css grid item to the last position of the css grid with dynamic item length?
by MD Hasan Patwary
HTML
<div class="grid-layout">
<button>Button 1</button>
<button class="order-last">Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<button>Button 6</button>
<button>Button 7</button>
<button>Button 8</button>
</div>
CSS
.grid-layout {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.grid-layout button {
order: 1;
}
.grid-layout button.order-last {
grid-column: 1 / -1;
order: 9;
}