Grid佈局

最近在從新鞏固html方面的知識，這裏分享下本身學習過程當中跟隨別人學習的筆記和心得。

目前，網頁佈局通常有table，float，flexbox和grid佈局。

table和float佈局較爲老，目前有淘汰趨勢了，而flexbox佈局是如今比較流行的佈局方式。

flexbox佈局屬於一維佈局，Grid屬於二維佈局的排版方式。

一個Flexbox容器智能控制一個方向，水平或者垂直方向。若是要控制另外一個方向，則要再添加一層flexbox容器。

Grid能夠一次控制2個方向，就能夠直接定義容器內元素的位置了。

Grid Line

下面用項目直接來看：

咱們畫出了一個5*5個格子的div容器，id定義爲grid-container，其中row和column都標註了起始點至結束點的線條序列。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:100px 100px 100px 100px 100px;
  grid-template-columns:100px 100px 100px 100px 100px;
}

如以上代碼，咱們設置將容器設置爲grid佈局，而且rows和columns分隔成100px等格的方塊。效果圖以下：

<div id="grid-container">
  <div class="cell-1"></div>
  <div class="cell-2"></div>
</div>

容器中，咱們設定了2個div，分別是cell-1和cell-2。

.cell-1{
  background-color:green;
  grid-row:2/4;
  grid-column:1/3;
}
.cell-2{
  background-color:yellow;
  grid-row:4/6;
  grid-column:3/6;
}

按以上代碼，咱們設置了2個子div的背景色和row與column佔得位置。得出的圖形以下：

grid-row:num/num和grid-column:num/num意思是row或者column方向由第幾條線到第幾條線的值，這些線在grid佈局裏咱們稱爲==grid line==。

除了這種寫法，咱們還有另外幾種寫法：

第二種寫法：

.cell-1{
  background-color:green;
  grid-area:2/1/4/3;
}
.cell-2{
  background-color:yellow;
  grid-area:4/3/6/6;
}

grid-area：grid-area定義的順序是gird-row的第一個grid line值，grid-column的第一個grid line值， gird-row的末尾grid line值，grid-column的末尾grid line值。

第三種寫法：

.cell-1{
  background-color:green;
  grid-row:2/span 2;
  grid-column:1/span 2;
}
.cell-2{
  background-color:yellow;
  grid-row:4/span 2;
  grid-column:3/span 3;
}

grid-row:num/span num和grid-column:num/span num意思是從第幾個grid line延伸幾格的意思。

通常第三種方法較爲經常使用。

最後種方法

由於咱們實際項目中，不可能看到grid line的具體數字的，最後種方法，咱們須要定義grid line的座標值，直接根據座標值來定位。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
}

咱們直接在父容器中，設定grid line的座標值。rows方向設定爲Y軸，columns設定爲X軸。

那咱們能夠直接從css代碼就一目瞭然知道grid line的座標軸了。

.cell-1{
  background-color:green;
  grid-row:Y1/Y4;
  grid-column:X1/X3;
}
.cell-2{
  background-color:yellow;
  grid-row:Y4/Y6;
  grid-column:X3/X6;
}

那原來寫法即可以改成此種寫法。一目瞭然。

Grid Areas

grid的分隔線咱們稱做grid line，而grid中的方格咱們則成爲grid area。

仍是直接用代碼演示：

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
}

咱們直接定義grid-template-areas的值，如以上代碼。

這裏定義的值的意思即是給每一個方塊設置了別名，而.則表明忽略該方塊：

<div id="grid-container">
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>

咱們設置grid-container的div使用grid佈局，而且有四個子容器

.cell-1{
  background-color:green;
  grid-area:header;
}
.cell-2{
  background-color:yellow;
  grid-area:footer;
}
.cell-3{
  background-color:red;
  grid-area:nav;   
}
.cell-4{
  background-color:black;
  grid-area:main;
}

這時候咱們設定每一個子容器所擁有的area別名，就能獲得如下的圖。

咱們再把用來標尺的背景圖去除。就能獲得如下結構：

是否很眼熟，通常的網頁佈局就出現了。

假如咱們想把每一個佈局設置下間隔，能夠在grid-container設置row-gap和column-gap屬性，並把背景色寬度高度從新設置。即可以發現以下圖的佈局結構了。

#grid-container{
  display:grid;
  width:540px;
  height:540px;
  background-color:#eee;
  grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6];
  grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6];
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

fr和repeat()

fr這個單位是專門用於Grid的比例的單位，1fr即佔一份的意思。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:1fr 1fr 1fr 1fr 1fr;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

好比這裏，設置了5個1fr，那麼1fr就表示佔1/5的大小。

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:3fr 1fr 1fr 1fr 1fr;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

grid-template-rows改爲3fr 1fr 1fr 1fr 1fr;，則表明第一個row佔比3/7權重區域。從下圖看，top區域變大。

這裏咱們重複寫fr有點累吧，因此這時候能夠用到repeat這個函數。

repeat(time,content):time表明要重複多少次，content則表明要重複些什麼。

因此，剛纔的代碼能夠改爲這樣：

#grid-container{
  display:grid;
  width:500px;
  height:500px;
  background-color:#eee;
  grid-template-rows:3fr repeat(4,1fr);
  grid-template-columns:repeat(5,1fr);
  grid-template-areas:"header header header header header"
                      "nav main main main main"
                      "nav main main main main"
                      "nav main main main main"
                      ". footer footer footer .";
  row-gap:10px;
  column-gap:10px;
}

這樣就會很清晰，當分隔數量多的時候，就不會亂了。但要注意一點：

==repeat不適用於grid-template-areas==

以上就是css grid佈局的全部內容，前端學習過程要感謝B站的CodingStartup的Steven,不過他的講解基本是粵語和視頻，不少筆記我只能在看的過程本身整理，雖然直接我也從事程序開發，可是不少時候只知道要這麼作，殊不知道爲何要這麼作，因此工做幾年後從新回頭鞏固知識，以上是我在學習過程當中本身整理的學習筆記，但願能夠幫到你們。