網格-模板-使用ASCII技術的區域無法工作。什么時候grid-template-areas: "....... header header" "sidebar content content";改為：grid-template-areas: "....... header header" "sidebar header content";一切都崩潰了。如何使用CSS網格布局實現相同的效果？body {
margin: 40px;}.sidebar {
grid-area: sidebar;}.content {
grid-area: content;}.header {
grid-area: header;}.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas: "....... header header"
"sidebar content content";
background-color: #fff;
color: #444;}.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;}.header {
background-color: #999;}<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content</div></div>
https://codepen.io/rachelandrew/pen/oXKgoQ
1 回答
BIG陽
TA貢獻1859條經驗 獲得超6個贊
grid-template-areas
7.3.指定區域： the grid-template-areas財產
如果命名網格區域跨越多個網格單元，但這些單元格不形成單個填充矩形，則聲明無效。 在本模塊的未來版本中，可能允許非矩形或斷開的區域。
每個網格項都有一個網格區域，即網格項占用的一組矩形網格單元。
grid-template-areas: "....... header header" "sidebar content content";
header
grid-template-areas: "....... header header" "sidebar header content";
....
grid-template-areas
也grid-template-areas
- 1 回答
- 0 關注
- 375 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消