1.作用在父容器上的屬性
(1) display : grid
(2)grid-template-columns : 設定列數
(3)grid-template-rows : 設定行數
從**中可以看到,給box設定了三行三列的網格,每乙個網格寬高分別為100px 100px;
這樣重複設定同樣的值會比較麻煩,這時候我們可以使用repeat()值和fr單位。fr是比例單位,等分可用空間。將上面**換一下,看看效果:
#box
可以看到,效果是一樣的,所有在對網格的行和列設定重複同樣的值時,可以使用repeat()的方式。
(4)grid-template-areas : 劃分區域的(區域必須是矩形區域)
例如:
#box
#box div:nth-of-type(1)
#box div:nth-of-type(2)
#box div:nth-of-type(3)
#box div:nth-of-type(4)
#box div:nth-of-type(5)
#box div:nth-of-type(6)
#box div:nth-of-type(7)
#box div:nth-of-type(8)
#box div:nth-of-type(9)
結果如下:123
4567
89
(5) grid-column-gap : 列的間距
(6) grid-row-gap : 行的間距
例如:
結果如下:#box
#box div:nth-of-type(1)
#box div:nth-of-type(2)
#box div:nth-of-type(3)
#box div:nth-of-type(4)
#box div:nth-of-type(5)
#box div:nth-of-type(6)
#box div:nth-of-type(7)
#box div:nth-of-type(8)
#box div:nth-of-type(9)
(7)justify-items : 子項的水平居中方式
選項: 預設 : stretch 預設值,拉伸。表現為水平或垂直填充。 start, center,end
(8)align-items : 子項的垂直居中方式
選項: 預設 : stretch 預設值,拉伸。表現為水平或垂直填充。 start, center,end
(9) justify-content : 整體網格的水平對齊方式
選項:預設:stretch, start, end, center, space-between, space-around(子項之間的空間是邊距的二倍),space-evenly(平分空間)
(10) align-content : 整體網格的垂直對齊方式
選項:預設:stretch, start, end, center, space-between, space-around(子項之間的空間是邊距的二倍),space-evenly(平分空間)
2、作用在子項上的
grid-area : 找指定的區域
grid-column-start 水平方向上佔據的起始位置
grid-column-end 水平方向上佔據的結束位置
grid-row-start 垂直方向上佔據的起始位置
grid-row-end 垂直方向上佔據的結束位置
每個網格的行和列都有預設的排序
例:
#box
#box div
結果如下:123
現在使box下的div從列的第三條邊開始,列的第四條邊結束,
結果如下:#box
#box div
《逆戰班》
Grid網格布局入門筆記
指定乙個容器採用網格布局,在父元素中定義grid屬性 display grid 塊級元素布局 或display inline grid 行內元素 在容器中新增了網格布局後,就要劃分行和列,columns 列 row 行 grid template columns 定義每一列的寬度 grid temp...
Grid網格布局
前言 就目前為止,css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援,但對於實現布局而言,這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話,那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局,只能指定 專案 針對軸線的位置,可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格,然後指定 專案所在 的單元格,可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列,每一列為33....