願只有一個Grid Layout

時間 2019-11-16

標籤只有一個 grid layout 简体版

原文原文鏈接

CSS3新增佈局三劍客之Grid Layoutcss

1、前言

相比較Multi-Columns Layout 和Flexible Box Layout，Grid Layuot更像是二者的結合，固然這裏並非說Grid Layout能夠取代兩者。html

另外Grid Layout與當前很是火熱的Flexible Box Layout有一個本質上的區別就是維度不同。在使用Flexible Box Layout時，咱們只能經過flex-direction定義主軸沿着某一方向，而在Grid Layout中大相徑庭。git

2、核心用法

下面一步步去了解Grid Layout的核心用法：github

一、宏觀角度

宏觀上能夠將Grid Layout當作由行和列組成，這一點能夠類比HTML中的table標籤，接下來用Grid語法聲明一個3行3列的結構。佈局

.grid {
    display: grid;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    grid: repeat(3, 1fr) / repeat(3, 1fr);
  }
  .grid > div:nth-child(odd) {
    background-color: #f5f5f5;
  }
  .grid > div:nth-child(even) {
    background-color: #eee;
  }
複製代碼

經過設置display屬性爲grid或者inline-grid，可使得該元素變成Grid佈局容器，這基本是新增佈局聲明的一個通用套路。flex

上述grid屬性是一個複合屬性，等價下面的代碼。ui

.grid {
    /* grid: grid-template-rows / grid-template-columns */
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
  }
複製代碼

fr是Grid Layout中新增的單位，能夠類比Flexible Box Layout中的flex-grow屬性。spa

上述九宮格中的每個小格子在Grid中有一個專門的術語 -- Grid Cell。code

二、微觀角度

從微觀的角度去看Grid Layout，首先你須要瞭解另外一個術語 -- Grid Line。cdn

不知道讀者們有沒有看過製做豆腐的過程，其中有一個步驟是用線將整塊的豆腐割開，那條線和上述的Grid Line是同樣同樣的。

那麼咱們前面所說的行與列就須要用一個更專業的術語來描述 -- Grid Track。

Grid Track實際上就是相鄰的兩條Grid Line所造成的區域。

在Grid Layout中是看不見Grid Line的，可是可使用它，它默認是數字編號的形式，還記得上面的九宮格佈局嗎？經過設置display和grid屬性，只是將容器劃分告終構，可是並無設置子元素的放置方式，幸虧Grid Layout會爲每個子元素設置一個默認位置，例如第一行第一列的元素會這樣設置。

/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
  grid-area: 1 / 1 / 2 / 2;
複製代碼

上述的數字就是Grid Line的編號，而且它還支持自定義命名。

.grid {
    position: relative;
    margin: 100px auto;
    width: 500px;
    height: 500px;
    display: grid;
    grid: [line-row-1]1fr[line-row-2]1fr[line-row-3]1fr[line-row-4] / [line-col-1]1fr[line-col-2]1fr[line-col-3]1fr[line-col-4];
  }
  .grid > div:nth-child(1) {
    grid-area: line-row-1 / line-col-1 / line-row-4 / line-col-3;
  }
複製代碼

三、Grid Area

Grid Area也是一個比較重要的術語，它主要由一個或者多個Grid Cell組成。前面的例子中，咱們已經看到能夠經過Grid Line爲Grid Area分配空間，而且它還有另外一種使用的方式。

.grid {
    position: relative;
    margin: 100px auto;
    width: 500px;
    height: 500px;
    display: grid;
    grid: "first first second" "first first fouth" "first first third";
  }

  .grid > div:nth-child(1) {
    grid-area: first;
  }
  .grid > div:nth-child(2) {
    grid-area: second;
  }
  .grid > div:nth-child(3) {
    grid-area: third;
  }
  .grid > div:nth-child(4) {
    grid-area: fouth;
  }
複製代碼

一樣是上述的例子，咱們能夠這樣放置子元素，是否是特別的友好。

四、絕對定位在Grid Layout中的表現

絕對定位你們應該很熟悉，其位置主要由包含塊或者初始化包含塊決定，一般咱們都是經過設置父級元素的position屬性來肯定包含塊，可是在Grid Layout中能夠經過grid-area屬性達到一樣的效果。

.grid {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 100px auto;
    display: grid;
    grid: repeat(2, 1fr) / repeat(2, 1fr);
    border: 1px dashed red;
    padding: 10px;
  }

  .demo1 {
    grid-area: 2 / 1 / 3 / 2;
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: red;
  }
複製代碼