I'm currently working on a grid system where the first part (one to five) should be the opposite of the second part (six to ten). I have successfully set up the first part, but I'm struggling with fitting the tenth piece into the grid. I attempted to adjust the grid row for that element, but it didn't work out as expected. Can anyone provide some guidance on how to resolve this issue?
https://i.sstatic.net/04gPh.png
.wrapper {
margin: 0 auto;
}
.wrapper > div {
background-color: rgba(233 171 88 / 0.5);
color: #d9480f;
aspect-ratio: 1 / 1;
border:1px solid black;
}
.wrapper {
display: grid;
grid-template-columns: repeat(14, 1fr);
/* grid-template-rows: repeat(12, 1fr); */
gap: 5px;
}
.one {
grid-row: auto / span 6
}
.three {
grid-row: 7 / span 6
}
.one, .three {
grid-column: auto / span 6;
}
.two {
grid-column: auto / span 8;
grid-row: auto / span 8
}
.four, .five {
grid-row: 9 / span 4;
grid-column: auto / span 4
}
.six {
grid-column: auto / span 8;
grid-row: auto / span 8;
}
.seven {
grid-row: auto / span 6;
}
.ten {
}
.seven, .ten {
grid-column: 9 / span 6;
}
.eight {
grid-column: 1 / span 4
}
.nine {
grid-column: 5 / span 4
}<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">six</div>
<div class="seven">seven</div>
<div class="eight">eight</div>
<div class="nine">nine</div>
<div class="ten">ten</div>
</div>