我有一個ul總共包含11專案。
我正在使用display: grid以實作第一列（兩列中的）包含元素7的布局。li
我試圖通過使用來遵循這里的方法，grid-template-areas但我left li的似乎相互重疊。
簡而言之，我希望第一列（左）包含7專案，第二列（右）包含4.
演示：
.grid {
display: grid;
grid-template-areas: "left right";
grid-template-columns: repeat(2, 1fr);
min-width: 375px;
padding: 10px 0;
list-style-type: none;
}
.grid__item:nth-child(-n 7) {
grid-area: left;
}<ul class="grid">
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Right</li>
<li class="grid__item">Right</li>
<li class="grid__item">Right</li>
<li class="grid__item">Right</li>
</ul>uj5u.com熱心網友回復：
你可以這樣做：
.grid {
display: grid;
grid-auto-flow:dense; /* this */
min-width: 375px;
padding: 10px 0;
list-style-type: none;
}
.grid__item {
grid-column:2; /* and this */
}
.grid__item:nth-child(-n 7) {
grid-column:1; /* and this */
}<ul class="grid">
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Left</li>
<li class="grid__item">Right</li>
<li class="grid__item">Right</li>
<li class="grid__item">Right</li>
<li class="grid__item">Right</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422182.html
標籤：
上一篇：如何使用css/html/js將背景顏色從亮藍色變為深藍色
下一篇：添加CSS時JS顏色更改停止作業