我正在將專案從串列插入到網格。
當我插入 2 個具有相同網格列的專案時，它會一個接一個地插入（這很好）。但是如果下一個專案可以放在行的頂部，我想把它放在那里。
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(7, 1fr);
}
.item1 {
grid-column: 3 / 4;
background-color: coral;
}
.item2 {
grid-column: 5 / 5;
background-color: red;
}<div class="container">
<div class='item1'>1</div>
<div class='item1'>2</div>
<div class='item2'>3</div>
</div>https://jsfiddle.net/epr5atvw/
如何移動第 3 項，使其位于第 1 項旁邊？我的串列已排序，我無法更改它。
uj5u.com熱心網友回復：
用 grid-auto-flow:column;
.container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(7, 1fr);
grid-auto-flow: column;
}
.item1 {
grid-column: 3 / 4;
background-color: coral;
}
.item2 {
grid-column: 5 / 5;
background-color: red;
}<div class="container">
<div class='item1'>1</div>
<div class='item1'>2</div>
<div class='item2'>3</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/328518.html
上一篇：如何覆寫MUI芯片中的標簽樣式