wrapper { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? display: grid; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? /*通過display屬性設置屬性值為grid,網格容器中的所有子元素就會自動變成網格項目（grid item）*/
? grid-template-columns: repeat(3, 1fr); ? ?/*該屬性可連續創建的網格軌道，repeat()接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 道的尺寸。*/
? grid-gap: 10px; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? /*創建網格之間的間隙*/
? grid-auto-rows: minmax(100px, auto);? /*創建網格軌道的最小或最大尺寸。minmax()函數接受兩個參數：第一個參數定義網格軌道的最小值，第二個參數定義網格軌 ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 道的最大值，也接受auto值。auto值允許網格軌道基于內容的尺寸拉伸或擠壓。*/
.one {
? grid-column: 1 / 3; ? ? ? ? ? ?? /*網格的開始和結束線，如果只提供一個值，則指定了grid-row-start(grid-column-start)值；如果提供兩個值，第一個值是grid-row-start ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (grid-column-start)的值，第二個值是grid-row-end(grid-column-end)的值，兩者之間必須要用/隔開,而start和end通過網格線可以定位網格項 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 目。網格線實際上是代表線的開始、結束，兩者之間就是網格列或行。每條線是從網格軌道開始，網格的網格線從1開始，每條網格線逐 ? ? grid-row: 1; ? ? ? ? ? ? ? ? ? ? ? ? ? ? 步增加1，后面的two three four也是一樣的道理。
}
.two {?
? grid-column: 2 / 4;
? grid-row: 1 / 3;
}
.three {
? grid-column: 1;
? grid-row: 2 / 5;
}
.four {
? grid-column: 3;
? grid-row: 3;
}
.five {
? grid-column: 2;
? grid-row: 4;
}
.six {
? grid-column: 3;
? grid-row: 4;

?

?

摘自http://www.ynmm5.cc/?tdsourcetag=s_pcqq_aiomsg

轉載于:https://www.cnblogs.com/xxjb/p/9787361.html

總結

以上是生活随笔為你收集整理的web第五周的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。