博客 / 詳情

返回

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等格的方塊。效果圖如下：
image.png

<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佔得位置。得出的圖形如下：

image.png

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軸。

image.png

那我們可以直接從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;
}

那原來寫法便可以改為此種寫法。一目瞭然。

image.png

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的值，如以上代碼。

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

image.png

<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別名，就能得到以下的圖。

image.png

我們再把用來標尺的背景圖去除。就能得到以下結構：

image.png

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

假如我們想把每個佈局設置下間隔，可以在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;
}

image.png

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區域變大。

image.png

這裏我們重複寫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,不過他的講解基本是粵語和視頻，很多筆記我只能在看的過程自己整理，雖然直接我也從事程序開發，但是很多時候只知道要這麼做，卻不知道為什麼要這麼做，所以工作幾年後重新回頭鞏固知識，以上是我在學習過程中自己整理的學習筆記，希望可以幫到大家。

佈局 , grid , HTML , 前端
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.