https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid ：學習網址

一、啓用網格：display:grid;

通過將屬性display的值設爲grid，使 HTML 元素變爲網格容器。在 CSS 網格中，父元素稱爲容器（container），它的子元素稱爲項（items）。

二、設置列數：grid-template-columns

grid-template-columns屬性值的個數表示網格的列數，而每個值表示對應列的寬度。

三、設置行數：grid-template-rows

行數屬性值的個數表示網格的行數，每個值表示對應行的高度。

下面是一個3列2行，每列100px,每行50px;的container容器

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* 下面代碼表示將網格分爲3列，每列寬度100px */
    grid-template-columns:100px 100px 100px;
    /* 下面代碼表示將網格分爲2行，每行高度50px */
    grid-template-rows:50px 50px;
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

效果如下：

四、CSS 網格單位

在 CSS 網格中，可以使用絕對定位和相對定位單位如px和em來確定行或列的大小。
fr：設置列或行佔剩餘空間的一個比例，
auto：設置列寬或行高自動等於它的內容的寬度或高度，
%：將列或行調整爲它的容器寬度或高度的百分比，

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    /*下面代碼爲將容器分爲3列，第二列爲100px，剩下的按比例分爲3份，第一列佔1份，第三列佔2份*/
    grid-template-columns: 1fr 100px 2fr;
    /*將容器分爲2行，每一行高度50px*/
    grid-template-rows: 50px 50px;
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

效果如下：

五、創建多列之間的間距：grid-column-gap

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 多列之間的間距爲10px */
    grid-column-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

效果如下：

六、創建多列之間的間距：grid-row-gap

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 設置多行的間距爲10px */
    grid-row-gap:10px;
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

效果如下：

七、grid-gap快速設置行與列的間隙

grid-gap是grid-row-gap和grid-column-gap的簡寫，它更方便使用。如果grid-gap有一個值，行與行之間和列與列之間將添加等於該值的間隙。但是，如果有兩個值，第一個值將作爲行間隙的高度值，第二個值是列間隙的寬度值。

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 在行之間添加10px的間隙，在列之間添加20px的間隙 */
    grid-gap:10px 20px;
  }
</style>
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

效果如下：

八、線（lines）

網格的假想水平線和垂直線被稱爲線（lines）。這些線在網格的左上角從 1 開始編號，垂直線向右、水平線向下累加計數。
這是一個 3x3 網格的線條：

九、grid-column屬性

grid-column屬性是第一個用於網格項本身的屬性。使用用grid-column屬性定義網格項開始和結束的位置，進而控制每個網格項佔用的列數。如下
grid-column: 2 / 4;這會讓網格項從左側第二條線開始到第四條線結束，佔用兩列。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    /* 使類爲item5的網格項佔用網格的最後兩列。 */
    grid-column: 2 / 4;
  }
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

十、grid-row屬性

grid-row:可以用grid-row屬性來確定開始和結束的水平線。
grid-row: 2 / 4;：這會讓網格項從上方第二條線開始到第四條線結束，佔用兩行。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    grid-column: 2 / 4;
    /* 使類爲item5的元素佔用最後兩行。 */
    grid-row: 2 / 4;
  }
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

十一、 justify-self 水平對齊

在 CSS 網格中，每個網格項的內容分別位於被稱爲單元格（cell）的框內。你可以使用網格項的justify-self屬性，設置其內容的位置在單元格內沿行軸對齊的方式。默認情況下，這個屬性的值是stretch，這將使內容佔滿整個單元格的寬度。該 CSS 網格屬性也可以使用其他的值：
start：使內容在單元格左側對齊，
center：使內容在單元格居中對齊，
end：使內容在單元格右側對齊.

<style>
  .item1{background: LightSkyBlue;}
  
  .item2 {
    background: LightSalmon;
    /* 使用justify-self屬性讓類爲item2的網格項居中。 */
    justify-self:center;
  }
  
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

十二、align-self 垂直對齊

使用align-self屬性，設置內容在單元格內垂直對齊方式。默認情況下，這個屬性的值是stretch，這將使內容佔滿整個單元格的高度。
start：使內容在單元格頂部對齊，
center：使內容在單元格垂直對齊，
end：使內容在單元格底部對齊.

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  
  .item3 {
    background: PaleTurquoise;
    /* 值爲end使類爲item3的網格項底端對齊 */
    align-self:end;  
  }
  
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

十三、justify-items水平對齊所有項目

對網格容器使用justify-items使它們一次性沿行軸對齊，它將使網格中所有的網格項按所設置的方式對齊。默認情況下，這個屬性的值是stretch，這將使所有網格內容佔滿整個單元格的寬度。
start：使所有網格延行軸左側對齊，
center：使所有網格延行軸居中對齊，
end：使所有網格延行軸右側對齊.

使用justify-itemss
<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /*  justify-items水平對齊所有子項目 */
    justify-items:center;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

十四、align-items 垂直對齊所有項目

對網格容器使用align-items屬性可以給網格中所有的網格項設置沿列軸對齊的方式。默認情況下，這個屬性的值是stretch，這將使所有佔滿整個單元格的高度。
start：將所有內容對齊到網格區域(grid area)的頂部，
center：將所有內容對齊到網格區域(grid area)的中間（垂直居中），
end：將所有內容對齊到網格區域(grid area)的底部.

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    /* 讓所有網格列軸末尾對齊。 */
    align-items:end;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下

十五、區域（area）——grid-template-areas

可以通過給容器加上grid-template-areas來實現，將網格中的一些網格單元格組合成一個區域（area），併爲該區域指定一個自定義名稱。
例如：下面的代碼將頂部三個單元格合併成一個名爲header的區域，將底部三個單元格合併爲一個名爲footer的區域，並在中間行生成兩個區域————advert和content。

grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";

注意：

在代碼中，每個單詞代表一個網格單元格，每對引號代表一行。
除了自定義標籤，你還能使用句點（.）來表示一個空單元格

十六、 grid-area屬性設置元素在命名區域中的位置

如下：使用grid-area屬性，把類爲item5元素放到container容器中的footer區域

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    /*使用grid-area屬性，把類爲item5元素放到footer區域*/
    grid-area:footer;
  }
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    grid-template-areas: 
      "header header header"
      "advert content content"
      "footer footer footer";
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

十七、使用grid-area創建區域模板

除了使用grid-area放置在模板中命名區域的位置的方式，如果網格中沒有定義區域模板，你也通過grid-area創建區域模板，寫法如下：
grid-area: 起始水平線 / 起始垂直線 / 末尾水平線 / 終止垂直線 ;
item1 { grid-area: 1/1/2/4; }:網格項將佔用第 1 條和第 2 條水平線之間的行及第 1 條和第 4 條垂直線之間的列。

下面是：

用grid-area屬性將類爲item5的元素放置在第 3 條和第 4 條水平線及第 1 條和第 4 條垂直線之間的區域內

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    /* 用grid-area屬性將類爲item5的元素放置在第 3 條和第 4 條水平線及第 1 條和第 4 條垂直線之間的區域內。*/ 
    grid-area:3/1/4/4;
  }
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

十八、使用 repeat 函數減少重複

當使用grid-template-columns和grid-template-rows定義網格結構時，你需要爲添加的每一行和每一列都輸入一個值。有一種更好的方法——使用repeat方法指定行或列的重複次數，後面加上逗號以及需要重複的值。

寫法如下：

grid-template-rows: repeat(100, 50px);：該行代表有一個添加 100 行網格的例子，使每行高度均爲 50px：

示例：

用repeat代替grid-template-columns屬性的值中的重複代碼。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* 使用repeat方法代替上面註釋掉的代碼 */
    grid-template-columns:repeat(3,1fr);

    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

十九、使用 minmax 函數限制項目大小

內置函數minmax也可以可用於設置grid-template-columns和grid-template-rows的值。它的作用是在網格容器改變大小時限制網格項的大小。爲此，你需要指定網格項允許的尺寸範圍。

語法：

grid-template-columns: 100px minmax(50px, 200px);：grid-template-columns被設置爲添加兩列，第一列 100px 寬，第二列寬度最小值是 50px，最大值是 200px。

示例：

minmax函數替換repeat函數中的1fr，限定其最小值爲90px，最大值爲1fr

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* minmax函數替換repeat函數中的1fr，限定其最小值爲90px，最大值爲1fr */
    /* grid-template-columns:repeat(3,1fr); */
    grid-template-columns: repeat(3,  minmax(90px, 1fr));

    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

二十、使用 auto-fill 創建彈性佈局

repeat方法帶有一個名爲自動填充（auto-fill）的功能
grid-template-columns:repeat(auto-fill, minmax(60px, 1fr));該代碼的效果：列的寬度會隨容器大小改變，在可以插入一個 60px 寬的列之前，當前行的所有列會一直拉伸

需要注意的是：

如果容器無法使所有網格項放在同一行，餘下的網格項將移至新的一行。

用法示例：

在第一個網格中，用auto-fill和repeat來填充網格，其中列寬的最小值爲60px，最大值爲1fr。如下：

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* 在第一個網格中，用auto-fill和repeat來填充網格，其中列寬的最小值爲60px，最大值爲1fr*/
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  
  .container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
<div class="container2">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

二十一、使用 auto-fit 創建彈性佈局

auto-fit效果幾乎和auto-fill一樣。不同點僅在於，當容器的大小大於各網格項之和時，auto-fill將會持續地在一端放入空行或空列，這樣就會使所有網格項擠到另一邊；而auto-fit則不會在一端放入空行或空列，而是會將所有網格項拉伸至合適的大小。

注意：

如果容器無法使所有網格項放在同一行，餘下的網格項將移至新的一行。

使用示例：

在類爲container2的網格中，用auto-fit和repeat來填充網格，其中列寬的最小值爲60px，最大值爲1fr。

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
  
  .container2 {
    font-size: 40px;
    min-height: 100px;
    width: 100%;
    background: Silver;
    display: grid;
    /*在類爲```container2```的網格中，用```auto-fit```和```repeat```來填充網格，其中列寬的最小值爲60px，最大值爲1fr。 */  
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
   
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>
  
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>
<div class="container2">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

效果如下：

二十二、在網格中創建網格

將元素轉換爲網格只會影響其子代元素。因此，在把某個子代元素設置爲網格後，就會得到一個嵌套的網格。

示例：

用display和grid-template-columns，使類爲item3元素轉換爲有兩列且寬度爲auto和1fr的網格。

<style>
  .item1 {
    background: LightSkyBlue;
    grid-area: header;
  }
  
  .item2 {
    background: LightSalmon;
    grid-area: advert;
  }
  
  .item3 {
    background: PaleTurquoise;
    grid-area: content;
    /* 用display和grid-template-columns，使類爲item3元素轉換爲有兩列且寬度爲auto和1fr的網格。*/
    display:grid;
    grid-template-columns:auto 1fr;
  }
  
  .item4 {
    background: lightpink;
    grid-area: footer;
  }
  
  .itemOne {
    background: PaleGreen;
  }
  
  .itemTwo {
    background: BlanchedAlmond;
  }
  
  .container {
    font-size: 1.5em;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "advert header"
      "advert content"
      "advert footer";
  }
</style>
  
<div class="container">
  <div class="item1">header</div>
  <div class="item2">advert</div>
  <div class="item3">
    <div class="itemOne">paragraph1</div>
    <div class="itemTwo">paragraph2</div>
  </div>
  <div class="item4">footer</div>
</div>

grid佈局—讓css變得更簡單

一、啓用網格：display:grid;

二、設置列數：grid-template-columns

三、設置行數：grid-template-rows

下面是一個3列2行，每列100px,每行50px;的container容器

效果如下：

四、CSS 網格單位

效果如下：

五、創建多列之間的間距：grid-column-gap

效果如下：

六、創建多列之間的間距：grid-row-gap

效果如下：

七、grid-gap快速設置行與列的間隙

效果如下：

八、線（lines）

九、grid-column屬性

效果如下：

十、grid-row屬性

效果如下：

十一、 justify-self 水平對齊

效果如下：

十二、align-self 垂直對齊

十三、justify-items水平對齊所有項目

十四、align-items 垂直對齊所有項目

效果如下

十五、 區域（area）——grid-template-areas

注意：

十六、 grid-area屬性設置元素在命名區域中的位置

效果如下：

十七、 使用grid-area創建區域模板

下面是：

十八、使用 repeat 函數減少重複

寫法如下：

示例：

效果如下：

十九、使用 minmax 函數限制項目大小

語法：

示例：

效果如下：

二十、使用 auto-fill 創建彈性佈局

需要注意的是：

用法示例：

效果如下：

二十一、使用 auto-fit 創建彈性佈局

注意：

使用示例：

效果如下：

二十二、在網格中創建網格

示例：

效果如下：

十五、區域（area）——grid-template-areas

十七、使用grid-area創建區域模板