我的網格有問題。我想創建一些這樣的：我希望這個模式重復幾次。但我的代碼不靈活。.grid { margin: 0 auto; display: grid; grid-template-columns: 32% 32% 32%; grid-column-gap: 20px; grid-row-gap: 20px; grid-template-areas: "a b c" "d e f" "g g g" "h i j" "k l m" "o o o";}.item1 { grid-area: a; }.item2 { grid-area: b; }.item3 { grid-area: c; }.item4 { grid-area: d; }.item5 { grid-area: e; }.item6 { grid-area: f; }.item7 { grid-area: g; }.item { background: red; border: 4px solid black; height: 20px; width: 100%;}<div class="grid"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div> <div class="item item5"></div> <div class="item item6"></div> <div class="item item7"></div></div>如何改進網格？我想重復方案 3 3 1。如果我有大約 100 個元素，這個解決方案將難以忍受
1 回答
慕妹3146593
TA貢獻1820條經驗 獲得超9個贊
您可以像下面這樣簡化。不需要grid-template-areas或grid-template-columns
.grid {
margin: 0 auto;
display: grid;
grid-gap: 20px;
}
.grid > .item:nth-child(7n) {
/* this will create 3 columns layout and force each 7th element to span all of them */
grid-column:span 3;
}
.item {
background: red;
border: 4px solid black;
height: 20px;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
- 1 回答
- 0 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消