Gird(1)

目錄

• 網格佈局 grid(1)
  • 實現方式
  • 對容器設置的屬性
    • 行高與列寬的設置
    • 單元格的間距
    • 內容的位置
    • 表格在容器的位置
  • 兼容問題

網格佈局 grid(1)

實現方式

display:grid 也可成爲行內元素 display:inline-grid

tip:設爲網格佈局之後，容器內的子元素的 float 、 display:inline-block/table-cell , vertical-align 和 column-*等
各項設置屬性都將失效

對容器設置的屬性

行高與列寬的設置

grid-template-columns 定義每一列的列寬
grid-template-rows 定義每一行的行高

.container{
    display:grid;
    grid-template-columns:  100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

grid中對屬性賦提供了多種方式
上面能夠使用33.3% , 33.3% , 33.3%
tip: 當重複的數值過多的時候還能夠使用repeat()

repeat()

這個方法主要用於過多重複，簡化代碼使用
其接受兩個參數

1. 第一個爲重複的次數

2. 第二個爲重複的值

.container{
    display:grid;
    grid-template-columns:  repeat(3,100px);/*repeat(3,33.3%)也是一種寫法*/
    grid-template-rows: repeat(3,100px);
}

但repeat()並非只能夠寫重複的單個值，它也能夠寫成重複模式

例：

#contanner{
    display: grid;
    grid-template-columns:repeat(3,80px 20px 50px);
    grid-template-rows:90px;
}

auto-fill 關鍵字

有時單元格的大小是固定的，可是容器的大小不肯定。若是但願每一列或者每一行容納儘量多的單元格，這時能夠使用auto-fill關鍵字表示自動填充。

auto-fit 關鍵字

與上面auto-fill相似，可是有不一樣的地方(詳見之後)

fr 關鍵字

爲了方便表示比列，網格佈局提供了fr關鍵字(fraction)的縮寫

若是兩列的寬度爲1fr和2fr，就表示後者是前者的兩倍

minmax()函數

函數產生一個長度範圍，表示長度就在這個範圍，接受兩個參數 最小和最大

.container{
    width:200px;
    display:grid;
    grid-template-columns: 1fr 1fr minmax(100px , 1fr);
    grid-template-rows: repeat(3,100px);
}

auto 關鍵字

例:grid-template-columns: 50px auto 50px;

第二列的寬度基本上是等於該列單元格最大寬度，除非在單元格內容設置了min-width，且這個值大於最大寬度。

單元格的間距

grid-row-gap 設置行與行的間隔（行間距）
grid-column-gap 設置列與列的間隔（列間距）

grid-gap 簡寫 （前綴 grid- 可去）

gap: <grid-row-gap> <grid-column-gap>;
若是grid-gap 省略了第二個值，瀏覽器會默認第二個值會等於第一個值

內容的位置

justify-items屬性設置單元格內容的水平位置(左中右)
align-items 屬性設置單元格內容的垂直位置(上中下)

屬性以下：

1. start:對齊單元格的起始邊緣

2. end:對齊單元格的結束邊緣

3. center：單元格內部居中

4. stretch:拉伸、佔滿單元格的整個寬度(默認值)

place-items爲簡寫

place-items : <align-items> <jsutify-items>

表格在容器的位置

justify-content 屬性是整個內容區域在容器裏面的水平位置(左中右)
align-content 屬性是整個內容區域的垂直位置(上中下)

屬性以下：

1. start:對齊容器的起始邊框

2. end:對齊容器的結束邊框

3. center：容器內部居中

4. stretch:項目大小沒有指定時，；拉伸佔據整個網格容器。

5. space-around:每一個項目兩側的間隔相等，因此，項目之間的間隔比項目與容器邊框的間隔大一倍

6. space-bewteen: 項目與項目的間隔相等，項目與容器邊框之間沒有間隔

7. space-evenly: 項目與項目之間的間隔相等，項目與容器邊框之間也是同長度的間隔

place-content 簡寫

place-content : <align-content> <justify-content>

grid-auto-columns/rows

有時，一些項目的指定位置，在現有網格的外部，好比網格只有三列，可是某一個項目指定在第五行。這時，瀏覽器會自動生成多餘的網格，以便放置項目

打開示例代碼

```css #container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; } .item { font-size: 2em; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; grid-row-start: 4; grid-column-start: 2; } .item-9 { background-color: #4dc7ec; grid-row-start: 5; grid-column-start: 3; } ```

上面對grid-auto-columns/rows的賦值，那些值表明着網格線，columns是從左到右的算起，rows是從上到下算起(詳細請看);

兼容問題

目前各大瀏覽器已經能夠有效的支持grid屬性，可是這個屬性對於低版本瀏覽器不支持，對於IE瀏覽器不支持，可是目前的IE Edge新版也是能夠支持這項屬性。

下圖爲各大瀏覽器支持狀況：

本文參考http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html