CSS 網格布局（Grid）的兩種方式介紹（附代碼）

CSS 網格布局（Grid）能夠將網頁分成具有簡單屬性的行和列，可以直接使用 CSS 來定位和調整網格內的每個元素，也不需要為了實現某種布局進行多層嵌套，總而言之，css網格布局非常好用，下面我們就來看一看這篇文章給大家講述的css網格布局的內容。

1、CSS 網格布局（Grid）

CSS Grid 布局由兩個核心組成部分是父元素和子項目，父元素 是實際的 grid(網格)，子項目是 grid(網格) 內的內容。
下面是一個父元素和六個子項目

   <div class="box">        <div class="item div1">1</div>        <div class="item div2">2</div>        <div class="item div3">3</div>        <div class="item div4">4</div>        <div class="item div5">5</div>        <div class="item div6">6</div>    </div>

要把父元素元素變成一個 grid(網格)，只要簡單地把其 display 屬性設定為 grid

:

下面進行網格布局：

 .box {            width: 350px;            height: 350px;            /* background: #ccc; */            margin: 0 auto;            grid-gap: 5px;            display: grid;            grid-template-columns: 100px 100px 100px;            grid-template-rows: 100px 100px 100px;        }        .item {            border: 1px solid black;            box-sizing: border-box;        }        .div1 {            grid-column-start: 1;            grid-column-end: 3;            /*(div1從佔據從第一條網格線開始，到第三條網格線結束)*/            line-height: 100px;            text-align: center;            background: rgb(252, 0, 0);            /* grid-column: 1/3;(這是縮寫的形式) */        }        .div2 {            line-height: 100px;            text-align: center;            background: rgb(252, 134, 0);        }        .div3 {            grid-row-start: 2;            grid-row-end: 4;            /* grid-row: 2/4;(這是縮寫的形式) */            line-height: 200px;            text-align: center;            background: rgb(21, 207, 108);        }        .div4 {            grid-column-start: 2;            grid-column-end: 4;            line-height: 100px;            text-align: center;            background: rgb(18, 21, 189);            /* grid-column: 2/4;(這是縮寫的形式) */        }        .div5 {            line-height: 100px;            text-align: center;            background: rgb(16, 170, 197);        }        .div6 {            line-height: 100px;            text-align: center;            background: rgb(172, 126, 199);        }

上面代碼中的網格線(箭頭所指的地方就是一根網格線)：

2、響應式網格布局

和上面的差不多（添加了以下的內容）
使用grid-template-columns 屬性建立一個 12 列的網格，每個列都是一個單位寬度（總寬度的 1/12 ）
使用 grid-template-rows 屬性建立 3 行

使用 grid-gap 屬性在網格中的網格項之間添加一個間隙。

代碼如下：

       <div class="container">        <div class="header">頂部（一個點表示一個空白的格子），所以距離左邊和右邊各有一個格子的距離。</div>        <div class="menu">中間1</div>        <div class="content">中間2所以可以利用空白的格子來對你所要拍的網頁來進行布局</div>        <div class="footer">底部（一個點表示一個空白的格子），所以距離右邊有三個格子的距離。</div>    </div>

添加 grid-template-areas
這個屬性被稱為網格地區，也叫模板地區，能夠讓我們輕鬆地進行布局實驗。
：

代碼如下：

        .container {            display: grid;            grid-template-columns: repeat(12, 1fr);            grid-template-rows: 50px 350px 50px;            grid-gap: 5px;            grid-template-areas: ". h h h h h h h h h h ." " m m c c c c c c c c c c" "f f f f f f f f f . . .";        }        .container>p {            border: 1px solid #ccc;            box-sizing: border-box;        }        .header {            text-align: center;            line-height:50px;            grid-area: h;            color:rgb(219, 52, 169);        }        .menu {            grid-area: m;            text-align: center;            line-height:350px;        }        .content {            text-align: center;            line-height:350px;            grid-area: c;            color:rgb(25, 158, 69);        }        .footer {            color:rgb(212, 112, 18);            text-align: center;            line-height:50px;            grid-area: f;        }