grid layout網格佈局詳解

什麼是grid layout

grid 是Web的二維佈局系統。和html的表格有點像，由行和列組成，我們可以在上面設計每一個元素

grid的特點

grid layout 包括行、列、行間隙和列間隙
grid layout 可進行模板化設計
grid layout 是響應式佈局方式
grid layout 的子元素可以對自己進行定位

grid css屬性的基礎知識

創建一個grid佈局

.container {
  display: grid;
}

創建一個網格

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
.item {
  background-color: green;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}

<div class="container">
  <div class="item">11</div>
  <div class="item">22</div>
  <div class="item">33</div>
  <div class="item">44</div>
  <div class="item">55</div>
  <div class="item">66</div>
  <div class="item">77</div>
</div>

實際效果

隱性網格與顯性網格

顯性網格是指規劃的網格之內的部分，隱性網格是指規劃的網格之外的部分。
比如定義一個兩行兩列的網格，那麼第一行第二行和第一列第二列的交叉的部分就屬於顯性網格，第三行和第三列及以外的所有元素都屬於隱性網格

.container {
  display: grid;
  /*定義顯性網格部分的列寬，共兩行*/
  grid-template-columns: repeat(2, 100px);
  /*定義顯性網格部分的行高，共兩列*/
  grid-template-rows: repeat(2, 250px);
  /*定義隱性網格部分的行高*/
  grid-auto-rows: 200px;
  /*定義隱性網格部分的列寬*/
  grid-auto-columns: 50px;
}
.item {
  background-color: green;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}

<div class="container">
  <div class="item">11</div>
  <div class="item">22</div>
  <div class="item">33</div>
  <div class="item">44</div>
  <div class="item">55</div>
  <div style="grid-column: 3/4" class="item">66</div>
  <div class="item">77</div>
</div>

尺寸單位fr

.container {
  display: grid;
  /* 將可用的空間分成4份，第一列站兩份*/
  grid-template-columns: 2fr 1fr 1fr;
}

repeat函數

需要傳兩個參數

重複的次數，可以理解成每行或每列放置元素的次數
每次元素的尺寸，可以傳多個尺寸，用空格隔開

.container {
  display: grid;
  /*每行重複3次，每次一個元素，且佔用1份的空間*/
  grid-template-columns: repeat(3, 1fr);
}

.container {
  display: grid;
  /*每行重複3次，每次兩個元素，第一個元素佔用2份的空間，第二個元素佔用1份的空間*/
  grid-template-columns: repeat(3, 2fr 1fr);
}

minmax函數

這個函數也是需要傳兩個參數

最小尺寸
最大尺寸

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

空間足夠大時

拖動瀏覽器寬度，空間不足時

repeat函數的第一個參數爲auto-fill

結合minmax函數就可以設計一個響應式的佈局

.container {
  display: grid;
  /*會盡可能使用當前行的可用空間*/
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

拖動瀏覽器寬度

grid css屬性介紹

grid

更多介紹
這個屬性可以完全替換grid-template-rows, grid-template-columns, grid-template-areas和grid-auto-rows, grid-auto-columns, grid-auto-flow六個屬性

grid-gap

更多介紹
這個屬性定義網格的間隙，

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  /*行間距和列間距爲10px*/
  grid-gap: 10px
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  /*行間距爲10px，列間距爲1%*/
  grid-gap: 10px 1%
}

還可以使用grid-row-gap和grid-column-gap分別設置行和列間距

grid-gap: 10px 2% 
等同於
grid-row-gap: 10px;
grid-column-gap: 2%

grid-auto-flow

更多介紹
flow流動的意思，這個屬性就是用來定義網格元素的自動流動方向，默認row，按行一個個排列，
column就是按列排列，還有一個dense，會把小的元素插入網格前面的可用空間裏面

.container {
  display: grid;
  grid-template: repeat(3, 100px)/repeat(3, 100px);
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}

<div class="container">
  <div style="grid-column-start: 2" class="item">11</div>
  <div class="item">22</div>
  <div style="grid-row-start: 3" class="item">33</div>
  <div class="item">44</div>
  <div class="item">55</div>
  <div class="item">66</div>
  <div class="item">77</div>
  <div class="item">88</div>
  <div class="item">99</div>
</div>

沒有grid-auto-flow屬性相當於grid-auto-flow: row，按行排列，看效果

加入grid-auto-flow: column

修改grid-auto-flow: column dense，效果如下圖，本來44的左邊是空白，因爲有dense，導致自動把44放置在了這個空白處，44後面的元素也會自動往前排列
注意：如果前面的空間不足以放下44這個元素時，會空着，等後面有合適尺寸的元素放置進去

grid-auto-rows

更多介紹
這個屬性用於指定隱性網格行的高度尺寸

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 250px);
  /*隱性網格行的高度會按照這兩個尺寸交替使用*/
  grid-auto-rows: minmax(100px, 200px) 150px;
}

grid-auto-columns

更多介紹
這個屬性用於指定隱性網格列的寬度尺寸

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 250px);
  /*隱性網格列的寬度會按照這兩個尺寸交替使用*/
  grid-auto-columns: 50px min-content;
}

<div class="container">
  <div class="item">11</div>
  <div class="item">22</div>
  <div style="grid-column: 3/4" class="item">33</div>
  <div style="grid-column: 4/5" class="item">44</div>
  <div style="grid-column: 5/6" class="item">55</div>
  <div class="item">66</div>
  <div class="item">77</div>
  <div class="item">88</div>
</div>

grid-template-columns

更多介紹
這個屬性在上面喫的栗子中已經出現過很多次了，它的作用就是將顯性網格列的尺寸進行模板化，只需要簡單的這一個屬性就可以定義所有列的尺寸

.container {
  display: grid;
  grid-template-columns: 100px 20% 1fr minmax(100px, 300px)
}
.item {
  background-color: green;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}

grid-template-rows

更多介紹
類似於grid-template-columns，grid-template-rows是定義顯性網格行的尺寸模板

.container {
  height: 500px;
  display: grid;
  grid-template-columns: 100px;
  grid-template-rows: repeat(2,100px minmax(100px, 150px));
}

<div class="container">
  <div class="item">11</div>
  <div class="item">22</div>
  <div class="item">33</div>
  <div class="item">44</div>
</div>

grid-template-areas

更多介紹
可以把它理解成一個二位數組或者矩陣，佈局簡單粗暴
直接上代碼

.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: repeat(3, 100px);
  grid-template-areas: "aa aa aa"
                       "bb dd ee"
                       "bb cc cc";
}
.item {
  background-color: green;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}

<div class="container">
  <div style="grid-area: aa" class="item">11</div>
  <div style="grid-area: bb" class="item">22</div>
  <div style="grid-area: cc" class="item">33</div>
  <div style="grid-area: dd" class="item">44</div>
  <div style="grid-area: ee" class="item">55</div>
</div>

實際效果

grid-template

更多介紹
這個屬性可以完全替代grid-template-areas，grid-template-rows，grid-template-columns

/*一下兩種設置方式效果是一樣的*/
.container {
  display: grid;
  grid-template: 
      "aa aa aa" 100px
      "bb dd ee" 100px
      "bb cc cc" 100px / 100px 100px 100px;
}
.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: repeat(3, 100px);
  grid-template-areas: "aa aa aa"
                       "bb dd ee"
                       "bb cc cc";
}

grid item css屬性介紹

grid-row

更多介紹
可以理解爲絕對定位，定位自己在整個網格的哪一行以及跨度幾行

.container {
  display: grid;
  grid-template: repeat(3, 100px)/repeat(3, 100px);
  grid-auto-flow: dense;
}
.item {
  background-color: green; 
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}
.item1 {
  /*定位在第2行*/
  grid-row: 2;
}
.item2 {
  /*跨度兩行*/
  grid-row: span 2;
}
.item3 {
  /*定位在第2行，跨度兩行*/
  grid-row: 2 / span 2;
}

<div class="container">
  <div class="item item1">11</div>
  <div class="item item2">22</div>
  <div class="item item3">33</div>
  <div class="item">44</div>
  <div class="item">55</div>
</div>

grid-column

更多介紹
類似於grid-row，它是用來定位元素在網格中列的位置

grid-area

更多介紹
可以對grid-row和grid-column統一設置

.container {
  display: grid;
  grid-template: repeat(3, 100px)/repeat(3, 100px);
  grid-auto-flow: dense;
}
.item {
  background-color: green; 
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
}
.item1 {
  grid-area: span 3 / span 2
}

<div class="container">
  <div class="item item1">11</div>
  <div class="item">22</div>
  <div class="item">33</div>
  <div class="item">44</div>
</div>