Grid布局中的概念

Grid 布局則是將容器劃分成“行"和“列”，產(chǎn)生單元格，然后指定"項目所在”的單元格，可以看作是二維布局，F(xiàn)lex布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局，Grid布局遠(yuǎn)比Flex布局強大。

學(xué)習(xí)grid布局首先要了解一些名詞概念的含義

• 網(wǎng)格容器: 把一個元素設(shè)為網(wǎng)格容器的方法，添加屬性 display: grid/inline-grid；容器上有它專門的屬性；
• 網(wǎng)格線：或稱為網(wǎng)格軌道，把網(wǎng)格容器內(nèi)的網(wǎng)格單元分割開，用瀏覽器的Grid Inspector 功能可看到網(wǎng)格線；
• 網(wǎng)格項目：或稱網(wǎng)格元素，就是放在網(wǎng)格容器內(nèi)的內(nèi)容；
• 網(wǎng)格單元/網(wǎng)格區(qū)域：網(wǎng)格元素中的最小單位，多個網(wǎng)格單元可稱為網(wǎng)格區(qū)域；
• 網(wǎng)格間距：網(wǎng)格線/網(wǎng)格軌道的寬度稱為成網(wǎng)格間距；
• 嵌套網(wǎng)格：網(wǎng)格容器內(nèi)可嵌套另一個或幾個網(wǎng)格；
• Grid Inspector：瀏覽器提供的方便查看grid布局的工具；

幾個函數(shù)、單位

有幾個grid布局中特有的單位/函數(shù)

• fr：網(wǎng)格容器中可用空間的一等分
• repeat()：標(biāo)識多個重復(fù)部分，例如repeat(3, 100px)，表示3個100px；
• minmax()：函數(shù)產(chǎn)生一個長度范圍，表示長度就在這個范圍之中，它接受兩個參數(shù)，分別為最小值和最大值，比如minmax(100px, 200px)表示長度范圍是最小值100px，最大值200px;
• span：跨度，網(wǎng)格線布局時，表示網(wǎng)格項目跨幾個網(wǎng)格單元；
• auto-fill：有時網(wǎng)格單元的大小是固定的，但是容器的大小不確定，這個屬性會根據(jù)容器大小盡可能多的分配網(wǎng)格，剩余的均分給網(wǎng)格單元；空白的網(wǎng)格單元留空；
• auto-fit：有時網(wǎng)格單元的大小是固定的，但是容器的大小不確定，這個屬性會根據(jù)容器大小盡可能多的分配網(wǎng)格，剩余的均分給網(wǎng)格單元；空白的網(wǎng)格單元不留空，再次均分給網(wǎng)格單元；

auto-fill 與 auto-fit的區(qū)別

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  // grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

其中核心為：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))；意思每個子元素至少需要200px的寬度，如果視口寬度足夠就平均分配剩余空間給每個子元素，至于換行問題需要看分配的所有的軌道空間夠不夠200，如果不夠200就換一行，把多的元素?fù)Q行，比如有580px（不考慮gap），不足以容納3*200=600，3個子元素，那么就換行，一行兩個子元素，那么剩余的80px呢，這就屬于剩余空間 ，將（1fr）平均分配給兩個軌道。

這里涉及填充模式中的auto-fit和auto-fill的區(qū)別，auto-fit和auto-fill只有在容器寬度大于子元素的最小寬度總和時才有顯示區(qū)別，例如容器隨著窗口現(xiàn)在有1500px寬度，子元素在一行排列總共需要600px（不考慮gap)。

auto-fit和auto-fill首先會盡可能多的創(chuàng)建基于min的200px的軌道寬度，例如創(chuàng)建1500/200=7.5。那么會有7個軌道的200px還剩余了100px的剩余空間，接著會把這100px再次分配到這7個軌道中，100/7=14.28。所以每個軌道的寬度現(xiàn)在為214.28px。到這里auto-fill和auto-fit做的事情是一樣的：

1.首先盡可能的以最小寬度創(chuàng)建軌道；

2.不足一個軌道的空間，等分給已有的軌道；

接下來：auto-fil auto-fill對空白軌道的處理不同

3.auto-fill 不占用空白軌道，auto-fit把空白軌道均分給有內(nèi)容軌道；

值得注意的是這種區(qū)別是在容器中元素數(shù)量元素的最小寬度<容器的總寬度時才會顯示看到的差異，如果元素數(shù)量最小寬度>容器寬度，那么auto-fill和auto-fit展現(xiàn)的效果是一樣的

Grid布局和其他布局的區(qū)別

• 傳統(tǒng)布局方式：利用position屬性 + display屬性 + float屬性布局, 兼容性最好, 但是效率低, 麻煩!
• flex布局方式：有自己的一套屬性, 效率高, 學(xué)習(xí)成本低, 兼容性強!
• grid布局：網(wǎng)格布局(grid)是最強大的布局方案, 但是知識點比較多, 學(xué)習(xí)成本相對較高, 目前兼容性不如flex布局！另外grid布局可通過設(shè)置屬性變?yōu)楹蚮lex布局一樣的效果。

網(wǎng)格線編號布局

當(dāng)你使用網(wǎng)格布局時，編號線總是存在。這些線從 1 開始按行和列編號。

例如：我們定義一個三行三列的布局如下，行和列方向上我們有 4 條線。

  .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
  }

現(xiàn)需要一個網(wǎng)格區(qū)域是從最左上角開始，橫向占一列，縱向占三行，可以如下寫：

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 4;

grid-column和grid-row可簡寫如下：

  grid-column: 1/2;
  grid-row: 1/4;

可用默認(rèn)跨度為1簡寫如下：

  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;

可用默認(rèn)跨度為1加上grid-column和grid-row可簡寫：

  grid-column: 1;
  grid-row: 1/4;

可使用grid-area簡寫為：

  grid-area: 1/1/4/2;

可使用span表示跨度簡寫為：

  grid-column: 1;
  grid-row: 1 / span 3;

網(wǎng)格線名稱布局

用grid-template-rows和grid-template-columns屬性定義網(wǎng)格時，可命名網(wǎng)格線；

.wrap {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [content-end];
}

用grid-area命名網(wǎng)格區(qū)域，則隱式的創(chuàng)建行列網(wǎng)格線；

例如：

  grid-area: hd;

則隱式的命名網(wǎng)格線： hd-start hd-end

用[sidebar-start main-start]可定義網(wǎng)格線的多個名字；

有了網(wǎng)格線名稱則可以用來定位布局項目：

.box1 {
  grid-column-start: main-start;
  grid-column-end: main-end;
  grid-row-start: main-start;
  grid-row-end: main-end;
}

網(wǎng)格區(qū)域名稱布局

使用grid-area命名網(wǎng)格區(qū)域，在網(wǎng)格容器內(nèi)用grid-template-areas指定區(qū)域位置：

  .header { grid-area: hd }
  .footer { grid-area: ft }
  .sidebar { grid-area: sb }
  .content { grid-area: main }
  .wrap {
    display: grid;
    grid-template-rows: minmax(100px, auto);
    grid-template-columns: repeat(3 1fr);
    grid-template-areas: 
      "hd hd hd"
      "sb main main"
      "ft ft ft"
  }

使用grid-template可同時設(shè)置屬性：grid-template-rows、grid-template-columns、grid-template-areas

上例可簡寫：

  .header { grid-area: hd }
  .footer { grid-area: ft }
  .sidebar { grid-area: sb }
  .content { grid-area: main }
  .wrap {
    display: grid;
    grid-template: 
      "hd hd hd" minmax(100px auto)
      "sb main main" minmax(100px auto)
      "ft ft ft" minmax(100px auto)
      / 1fr 1fr 1fr
  }

使用grid可同時設(shè)置屬性：grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow；注：此屬性會把 grid-gap值重置為0；

上例可簡寫：

  .header { grid-area: hd }
  .footer { grid-area: ft }
  .sidebar { grid-area: sb }
  .content { grid-area: main }
  .wrap {
    display: grid;
    grid: 
      "hd hd hd" minmax(100px auto)
      "sb main main" minmax(100px auto)
      "ft ft ft" minmax(100px auto)
      / 1fr 1fr 1fr
  }

grid-template-areas中留空的單元用句點符'.'占位；

Grid布局軸線對齊

網(wǎng)格布局方式下共有兩條軸線用于對齊——塊軸（一般垂直方向的）和行軸（內(nèi)聯(lián)軸）。塊方向的軸是采用塊布局時塊的排列方向。行軸與塊方向的軸垂直，它的方向和常規(guī)內(nèi)聯(lián)流中的文本方向一致。

對齊元素到塊軸的屬性是align-items align-self

作用在網(wǎng)格容器上的屬性 align-items 的取值有：

• auto
• normal
• start
• end
• center
• stretch
• baseline
• first baseline
• last baseline

作用在網(wǎng)格元素上的屬性 align-self 的取值同 align-items

對齊元素到行軸的屬性是justify-items justify-self

justify-items作用在網(wǎng)格容器上，justify-self作用在網(wǎng)格元素上，取指同以上兩個屬性。

place-items 屬性是對 align-items 和 justify-items 的簡寫。

place-self 屬性是對 align-self 和 justify-self 的簡寫。

對齊網(wǎng)格軌道到塊軸的屬性是 align-content

作用在網(wǎng)格容器上，其值有：

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline

對齊網(wǎng)格軌道到行軸的屬性是 justify-content

其屬性值同align-content，space-content是對 align-content justify-content的縮寫。

布局示例

• 使元素內(nèi)容水平、垂直居中

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}
.item1 {
  align-self: center;
  justify-self: center;
}

• 使元素在網(wǎng)格容器內(nèi)水平、垂直居中

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 200px);
  grid-template-areas:
    ". . . "
    ". a . "
    ". . . ";
}
.item1 {
  grid-area: a;
}

• 自動填充網(wǎng)格軌道

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

• 靈活的軌道數(shù)量

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

以上就是羊了個羊的中強大的Grid布局的詳細(xì)內(nèi)容，更多關(guān)于羊了個羊 Grid布局的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論