Is there a smart and simple way to float elements from bottom left corner to top right corner?
My solution with display:grid is too static and has fix cols and not more than 10 items. I`m searching for a smart solution which works with multiple cols and reams of elements.
.cart { border: 5px solid; padding: 8px; width: 240px; height: 200px; display: flex; align-items: flex-end;}.box { background-color: lightgray; padding: 4px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; grid-template-areas: "box6 box7 box8 box9 box10""box1 box2 box3 box4 box5";}.egg { width: 40px; aspect-ratio: 3 / 4; background-color: sandybrown; border-radius: 100% 100% 100% 100% / 120% 120% 80% 80%; box-shadow: inset -4px -8px 20px brown; font-family: sans-serif; font-weight: bold; display: flex; align-items: center; justify-content: center;}.egg:nth-child(1) { grid-area: box1;}.egg:nth-child(2) { grid-area: box2;}.egg:nth-child(3) { grid-area: box3;}.egg:nth-child(4) { grid-area: box4;}.egg:nth-child(5) { grid-area: box5;}.egg:nth-child(6) { grid-area: box6;}.egg:nth-child(7) { grid-area: box7;}.egg:nth-child(8) { grid-area: box8;}.egg:nth-child(9) { grid-area: box9;}.egg:nth-child(10) { grid-area: box10;}<div class="cart"><div class="box"><div class="egg">1</div><div class="egg">2</div><div class="egg">3</div><div class="egg">4</div><div class="egg">5</div><div class="egg">6</div><div class="egg">7</div><div class="egg">8</div></div></div>