一、grid佈局概述

grid佈局與flex佈局對比

grid佈局可以為網頁提供更強大的佈局功能，它與flex佈局的區別是。

flex佈局為一維佈局，一般一行或一列的佈局使用flex佈局。

grid佈局為二維佈局，同時需要兼顧行與列的佈局，可以使用gird佈局。

如果不考慮相容問題，flex佈局和grid佈局可以很好地替代浮動佈局。

grid佈局基本概念

grid容器的水平區域成為行（row），垂直區域成為列（column），行與列之間的較差與是單元格（cell），劃分網格的線成為網格線（gird line），瞭解了這些基本概念之後，就可以開始用相應的css屬性設定grid容器中的專案了。

二、grid容器

設定gird容器

透過下面程式碼可以將一個容器設定成為一個grid容器。

1 。container{

2 display：grid；

3 }

gird容器內部的元素稱為grid容器的專案，grid專案的float屬性會失效，透過grid容器的進一步設定，可以讓內部的專案按要求排列。

grid-template-columns屬性與grid-template-rows屬性

grid-template-columns可以設定gird容器中的專案有多少列，並指定列的寬度，例項程式碼如下所示

。container{

display：grid；

grid-template-columns： 100px 100px 100px；

}

。item{

border：1px solid red；

}

透過上面的樣式設定，可以將grid容器設定成為三列，並將每一列的寬度設定為100px。

除了設定制定尺寸的畫素，還可以透過fr單位設定列寬度的比例。修改上面的grid容器樣式如下所示

1 。container{

2 display：grid；

3 grid-template-columns： 1fr 1fr 2fr；

4 }

可以看到整個gird容器的列被4等分，其中第一列和第二列佔1份（1fr），第三列佔2份（2fr）。

gird-template-rows屬性可以設定gird容器中的專案有多少行，並指定行的寬度，例項程式碼如下所示：

。container{

display：grid；

grid-template-columns： 100px 100px 100px；

grid-template-rows： 100px 100px 100px；

}

透過上面的樣式，可以將grid容器設定成為一個三行三列的佈局，並且每一個單元格都為100px。

grid-column-gap屬性與grid-row-gap屬性

grid-column-gap屬性與grid-row-gap屬性可以為grid容器的航宇列之間設定間距，示例程式碼如下所示：

。container {

display： grid；

grid-template-columns： 100px 100px 100px；

grid-template-rows： 100px 100px 100px；

grid-row-gap： 20px；

grid-column-gap： 30px；

}

透過上面的樣式，可以將行（row）之間的間距設定為20畫素，將列（column）之間的間距設定為30畫素。

justify-items屬性與align-items屬性

justify-items屬性與align-items屬性可以設定單元的水平位置和垂直位置，例項程式碼如下所示：

。container {

display： grid；

grid-template-columns： 100px 100px 100px；

grid-template-rows： 100px 100px 100px；

/* 在單元格內水平居中 */

justify-items： center；

/* 在單元格記憶體執居中 */

align-items： center；

}

預設的情況下，grid容器單元格內的塊元素會適應單元的的寬度和高度，設定justify-items後，單元格內的元素會適應自身內容的寬度，設定align-items後，單元格內的元素會使用內容的高度。

將justify-items和align-items兩個屬性設定為center，可以將單元格內的內容垂直水平居中顯示。

justify-content屬性與aling-content屬性

透過justify-content屬性與aling-content屬性可以設定整個內容區域在容器裡面的水平位置和垂直位置。

三、grid專案

justify-self屬性與align-self屬性

justify-self屬性可以設定單元格內容的水平位置。

align-self屬性可以設定單元內容的垂直位置。

grid-column-start屬性與grid-column-end屬性

指定左右邊框垂直網格線

grid-row-start屬性與grid-row-end屬性

指定上下邊框水平網格線

四、課後練習

使用grid佈局實現一個聖盃佈局。

結合grid佈局和flex佈局實現融職教育的首頁。