目前 cs 佈局方案中，網格佈局可以算得上是最強大的佈局方案了。它可以將網頁分為一個個網格，然後利用這些網格組合做出各種各樣的佈局。

一、基本概念

1.1 容器和專案

採用網格佈局的區域稱為“容器”，容器內部的採用網格定位的子元素稱為“專案”

<div class="wrapper">
  <dil class="item">1</div>   
  <div classa item>2</div>   
  <div class.item >3</div>  
</div>

一旦給 wrapper 設定成 gird 佈局，上面的程式碼中，wrapper 就是容器，item 就是專案。

1.2 行、列、單元格、網格線

二、容器的幾個重要屬性

2.1 display：

• grid
• inline-gird

2.2 定義列和行

• grid- template- columns：用來指定列的寬度
• grid- template-rows：用來指定行的高度

.main{
    width: 600px;
    height: 600px;
    border: 1px solid red;  
    margin: 10epx auto;  
    display: grid;

    // 定義每行的寬度，定義幾個就會有幾行
    grid-template-rows: 200px 200px 200px;
    grid
 
-template-columns: 200px 200px 200px;
}

2.21 這兩個屬性中的值：

• 可以是具體的數值
• 也可以是百分比
• 還可以是 r 關鍵字