Grid 入門基礎筆記

最近在網上看了Grid的入門基礎， 作一下筆記本身記錄下。

前面的話

---

有了 grid 之後能夠更簡單的完成複雜頁面的二維佈局。 而不須要去摳1px的margin、padding，而頭痛許久。

本文經過幾個小例子進行演示

建立HTML結構

---

首選建立一個class爲box的div 裏面有9個class爲content的子div; 友好的是grid依然能夠配置flex使用; 咱們爲.contet的寫上一些樣式; 代碼以下

HTML 代碼:

<div class="box">
      <div class="content">1</div>
      <div class="content">2</div>
      <div class="content">3</div>
      <div class="content">4</div>
      <div class="content">5</div>
      <div class="content">6</div>
      <div class="content">7</div>
      <div class="content">8</div>
      <div class="content">9</div>
    </div>

CSS 代碼:

* {
        margin: 0;
        padding: 0;
    }
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        border: 1px solid red;
      }

此時在瀏覽器中打開頁面, 正常的盒子形狀從上向下排列; 顯示爲下圖:

grid 出場 (定義grid)

---

下面有請咱們的主角 Grid 出場。 使用方式爲display: grid;在看咱們的css代碼:

CSS 代碼:

.box {
    display: grid;
    /* display: inline-grid; 行內元素的grid 不接受定義寬高 */
  }

小夥伴 grid-template-columns 和 grid-template-rows (構建行與列)

---

此時頁面並無什麼變化, grid 須要一些小夥伴來配置它. 見下表:

代碼	功能	單位	簡寫
grid-template	定義列 與 行的數量及之間的比例關係	px dr auto em 非負值	grid-template: grid-template-columns / grid-template-rows;
grid-template-columns	確認有幾列及列於列之間的大小比例	px dr auto em 非負值	--
grid-template-rows	確認有幾行及行與行之間的大小關係	px dr auto em 非負值	--

註解: fr 單位(等分); fr 是爲網格佈局定義的一個新單位。它能夠幫助你擺脫計算百分比，並將可用空間(父元素的高與寬)等分。

咱們小夥伴加入代碼中在看一下效果

.box {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 200px 200px 200px;
    /* 簡寫爲 */
    /* grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;*/
  }

上面的代碼表示咱們將讓頁面構成, 3行, 3列的九宮格佈局; 每一格的寬度爲 300px 高爲200px; 以下圖:

咱們也可使用新的單位 dr, 咱們來改一下代碼:

.box {
    display: grid;
    /* 將寬高設置300px */
    width: 300px; 
    height: 300px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

/* 當咱們有不少fr要寫的時候手寫代碼會比較麻煩 
   所以可使用`repeat()` 函數 
   它接收兩個參數 1. 要拷貝的次數 2. 要拷貝的內容  代碼以下: 
*/

  / *
    grid-template-rows: repeat(3, 1fr);
   */
  }

修改代碼之後的頁面, 能夠看得出來, 子div的寬高都變爲了平均的100px; 效果以下圖:

小夥伴 grid-gap (區域之間的距離)

---

grid-gap 它的主要功能是記錄區域與區域之間的間距

代碼	功能	參數	簡寫
grid-gap	只能建立列與列或行與行之間的間距，但不能建立列和行與網格容器邊緣的間距。	px fr % em 非負值	grid-gap: grid-row-gap grid-column-gap;
grid-row-gap	建立行與行之間的間距	px fr % em 非負值	--
grid-column-gap	建立列與列之間的間距	px fr % em 非負值	--

咱們來修改下代碼:

CSS 代碼:

.box {
    display: grid;
    width: 300px;
    height: 300px;
    /* 給父div加上背景色 */
    background: #09c;
    /* 讓父div居中 */
    margin: 30px auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* 使每一個子div之間的間距爲10px 可是與父元素的邊緣沒有間距 */
    grid-gap: 10px;
  }

加入 grid-gap:10px後, 子div之間有了10px的間距, 能夠看到父元素的背景色, 效果以下圖:

效果圖:

小夥伴 grid-area 等 (位置變化)

---

在flex 佈局方法中設計到一些元素的位置變化像order屬性它的值越小越靠前顯示, 在grid中也有提供這種位置變化, 並且它使用起來更加方便, 首先咱們來介紹幾個小夥伴:

代碼	功能	參數	簡寫
grid-row-start	移動後的位置開始的行數	Number	---
grid-row-end	移動後的位置結束的行數	Number	---
grid-row	移動後所在行的位置	Number	grid-row:grid-row-start / grid-row-end;
grid-column-start	移動後的位置開始的列數	Number	---
grid-column-end	移動後的位置結束的列數	Number	---
grid-column	移動後所在列的位置	Number	grid-row:grid-row-start / grid-row-end;
grid-area	移動位置的簡寫	Number	grid-area:row-start/column-start/row-end/column-end;

首先須要理解 grid 行與列之間的關係 它就像笛卡爾座標系從左上角開始以此向右邊和下邊延伸, 每一行或每一列就是一個座標系, 可是它的原點值是從1開始的; 以下圖:

當明白了 grid 中這麼一個"座標系"之後就能夠嘗試着移動子元素的位置, 下面的代碼將內容是6的子div移動至內容是2的位置; 看代碼:

CSS 代碼:

/* 尋找到要移動的div */
  .content:nth-child(6) {    
    /*
    要移動值 區域 2 的位置, 從上面的"座標系"的圖能夠清楚看到之後的位置的
    行的開始數爲1 , 結束位置爲 2;
    列的開始位置爲 2, 結束的位置爲3;
    */
    grid-row-start: 1;
    grid-row-end: 2;
    /* 簡寫爲 */
    /*grid-row: 1/2;*/

    grid-column-start: 2;
    grid-column-end: 3;

    /* 簡寫爲 */
    /*grid-column: 2/3;*/

    /* 超級簡寫 */
    /*grid-area: 1/2/2/3;*/
  }

效果圖:

grid 在移動位置的同時能夠改變原來咱們定義好的比例值, 代碼示例:

CSS 代碼:

/*咱們將上面的css代碼修改成以下*/
 .content:nth-child(6) {  
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 4; /* 咱們讓6號div移動後的位置在第四列結束 */

  /* 也可寫作下面的狀況 */

  /* grid-column-end: span 2; */

   /* 能夠理解爲從移動後的位置佔用幾個"座標單位", 當值大於咱們在 `grid-template` 中定義的行數 或者 列數時, `grid` 會按照你重新定義的數去重新分配行數或列數 */
 }

當咱們改變了移動後的結束值時, 也就是此時6號div 在列的"座標軸"至關因而佔用了兩個單位的寬度, 在chrome審查元素模式下,看起來很明顯, 6號佔了兩個小方塊的位置; 效果以下圖:

效果圖:

grid-template-areas 命名法佈局

---

grid 還爲咱們提供了一種更加直觀的佈局方式, 咱們能夠經過在子元素中定義屬性grid-area 給當前子元素的位置定義一個名字, 在父元素的屬性grid-area中按照名稱的排列來實現佈局: 請看下面的代碼演示

HTML 代碼:

<!-- 這是一個很常見的佈局 -->
<div class="wrap">
  <header class="header textStyle">header</header>
  <aside class="aside textStyle">aside</aside>
  <main class="main textStyle">main</main>
  <footer class="footer textStyle">footer</footer>
</div>

CSS 代碼:

* {
    margin: 0;
    padding: 0;
  }

  .textStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
  }


  .wrap {
    display: grid;
    width: 100%;
    height: 500px;
    margin: 20px auto;
    background: #eee;
    /* 須要三行 兩列的佈局 */
    grid-template: 1fr 5fr 1fr/ 1fr 3fr; 
    grid-gap: 10px;
    /* 三行兩列 這樣寫很直觀 */
    grid-template-areas: "header-area header-area"
               "aside-area main-area"
               "footer-area footer-area";
  }

  .header {
    grid-area: header-area; /* 定義名稱 */
    background: #60D194;
  }

  .aside {
    grid-area: aside-area;
    background: green;
  }

  .main {
    grid-area: main-area;
    background: #09c;
  }

  .footer {
    grid-area: footer-area;
    background: blue;
  }

效果圖:

參考文獻

---

參考自如下文章:

https://zhuanlan.zhihu.com/p/26757425?group_id=844328463711240192
https://www.w3cplus.com/css/learncssgrid.html