如何在不改變 DOM 順序的情況下，實作這種布局https://ibb.co/Y8TQLcC？我被網格模板區域困住了一個多小時。
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
display: grid;
grid-template-areas:
"one three";
"two"
}
.one {
grid-area: one;
border: 1px solid;
}
.three {
grid-area: three;
border: 1px solid;
}
.two {
grid-area: two;
border: 1px solid;
}<div class="parent">
<div class="one">one</div>
<div class="three">three</div>
<div class="two">two</div>
</div>uj5u.com熱心網友回復：
您grid-template-areas的定義不正確。把它想象成一個粗略的表格/網格，同時告訴 css 哪些行和列的單元格在輸出中以哪種方式起作用。
更改grid-template-areas為以下將起作用：
grid-template-areas:
"one one three"
"one one three"
"two two three";
}
完整的代碼變成這樣：
body {
margin: 0;
}
* {
box-sizing: border-box;
}
.parent {
display: grid;
grid-template-areas:
"one one three"
"one one three"
"two two three";
grid-template-rows: auto; height: 100vh;
}
.one {
grid-area: one;
border: 1px solid;
}
.three {
grid-area: three;
border: 1px solid;
}
.two {
grid-area: two;
border: 1px solid;
}<div class="parent">
<div class="one">one</div>
<div class="three">three</div>
<div class="two">two</div>
</div>uj5u.com熱心網友回復：
修復了網格容器的網格模板區域以獲得基于 3 x 3 瓷磚的所需網格布局并為其提供視口的螢屏高度：
.parent {
display: grid;
height: 100vh;
grid-template-areas:
"one one three"
"one one three"
"two two three";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348951.html