I am trying to make a grid layout. There are 7 items in a grid.
The layout I want to display is as following.
1 3 6
2 4 7
5
The actual layout displayed by the above code is
1
2 3
4
5 6
7
I tried to add self-align
for each grid, but it doesn’t work. How to fix this?
.fruit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: start;
}
.fruit {
width: 100%;
margin-bottom: 10px;
}
/* left column */
.fruit:nth-child(1),
.fruit:nth-child(2) {
grid-column: 1;
}
/* middle column */
.fruit:nth-child(3),
.fruit:nth-child(4),
.fruit:nth-child(5) {
grid-column: 2;
}
/* right column */
.fruit:nth-child(6),
.fruit:nth-child(7) {
grid-column: 3;
}
<div class="fruit-grid">
<div class="fruit">1</div>
<div class="fruit">2</div>
<div class="fruit">3</div>
<div class="fruit">4</div>
<div class="fruit">5</div>
<div class="fruit">6</div>
<div class="fruit">7</div>
</div>
3
Answers
One easy way would be the usage of
order
here:Hi this is what you need to complete your task. Hope this helps.
The solution provided are a bit verbose. You don’t need that much code to achieve what you want