羊了個羊的中強大的Grid佈局

2022-09-20 22:02:33

Grid佈局中的概念

Grid 佈局則是將容器劃分成“行"和“列”，產生單元格，然後指定"專案所在”的單元格，可以看作是二維佈局，Flex佈局是軸線佈局，只能指定"專案"針對軸線的位置，可以看作是一維佈局，Grid佈局遠比Flex佈局強大。

學習grid佈局首先要了解一些名詞概念的含義

網格容器: 把一個元素設為網格容器的方法，新增屬性 display: grid/inline-grid；容器上有它專門的屬性；
格線：或稱為網格軌道，把網格容器內的網格單元分割開，用瀏覽器的Grid Inspector 功能可看到格線；
網格專案：或稱網格元素，就是放在網格容器內的內容；
網格單元/網格區域：網格元素中的最小單位，多個網格單元可稱為網格區域；
網格間距：格線/網格軌道的寬度稱為成網格間距；
巢狀網格：網格容器內可巢狀另一個或幾個網格；
Grid Inspector：瀏覽器提供的方便檢視grid佈局的工具；

幾個函數、單位

有幾個grid佈局中特有的單位/函數

fr：網格容器中可用空間的一等分
repeat()：標識多個重複部分，例如repeat(3, 100px)，表示3個100px；
minmax()：函數產生一個長度範圍，表示長度就在這個範圍之中，它接受兩個引數，分別為最小值和最大值，比如minmax(100px, 200px)表示長度範圍是最小值100px，最大值200px;
span：跨度，格線佈局時，表示網格專案跨幾個網格單元；
auto-fill：有時網格單元的大小是固定的，但是容器的大小不確定，這個屬性會根據容器大小盡可能多的分配網格，剩餘的均分給網格單元；空白的網格單元留空；
auto-fit：有時網格單元的大小是固定的，但是容器的大小不確定，這個屬性會根據容器大小盡可能多的分配網格，剩餘的均分給網格單元；空白的網格單元不留空，再次均分給網格單元；

auto-fill 與 auto-fit的區別

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就換一行，把多的元素換行，比如有580px（不考慮gap），不足以容納3*200=600，3個子元素，那麼就換行，一行兩個子元素，那麼剩餘的80px呢，這就屬於剩餘空間，將（1fr）平均分配給兩個軌道。

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

auto-fit和auto-fill首先會盡可能多的建立基於min的200px的軌道寬度，例如建立1500/200=7.5。那麼會有7個軌道的200px還剩餘了100px的剩餘空間，接著會把這100px再次分配到這7個軌道中，100/7=14.28。所以每個軌道的寬度現在為214.28px。到這裡auto-fill和auto-fit做的事情是一樣的：

1.首先儘可能的以最小寬度建立軌道；

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

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

3.auto-fill 不佔用空白軌道，auto-fit把空白軌道均分給有內容軌道；

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

Grid佈局和其他佈局的區別

傳統佈局方式：利用position屬性 + display屬性 + float屬性佈局, 相容性最好, 但是效率低, 麻煩!
flex佈局方式：有自己的一套屬性, 效率高, 學習成本低, 相容性強!
grid佈局：網格佈局(grid)是最強大的佈局方案, 但是知識點比較多, 學習成本相對較高, 目前相容性不如flex佈局！另外grid佈局可通過設定屬性變為和flex佈局一樣的效果。

格線編號佈局

當你使用網格佈局時，編號線總是存在。這些線從 1 開始按行和列編號。

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

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

現需要一個網格區域是從最左上角開始，橫向佔一列，縱向佔三行，可以如下寫：

  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;

可用預設跨度為1簡寫如下：

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

可用預設跨度為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;

格線名稱佈局

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

.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命名網格區域，則隱式的建立行列格線；

例如：

  grid-area: hd;

則隱式的命名格線： hd-start hd-end

用[sidebar-start main-start]可定義格線的多個名字；

有了格線名稱則可以用來定位佈局專案：

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

網格區域名稱佈局

使用grid-area命名網格區域，在網格容器內用grid-template-areas指定區域位置：

  .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可同時設定屬性：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可同時設定屬性：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佈局軸線對齊

網格佈局方式下共有兩條軸線用於對齊——塊軸（一般垂直方向的）和行軸（內聯軸）。塊方向的軸是採用塊佈局時塊的排列方向。行軸與塊方向的軸垂直，它的方向和常規內聯流中的文字方向一致。

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

作用在網格容器上的屬性 align-items 的取值有：

auto
normal
start
end
center
stretch
baseline
first baseline
last baseline

作用在網格元素上的屬性 align-self 的取值同 align-items

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

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

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

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

對齊網格軌道到塊軸的屬性是 align-content

作用在網格容器上，其值有：

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

對齊網格軌道到行軸的屬性是 justify-content

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

佈局範例

使元素內容水平、垂直居中

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

使元素在網格容器內水平、垂直居中

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

自動填充網格軌道

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

靈活的軌道數量

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

以上就是羊了個羊的中強大的Grid佈局的詳細內容，更多關於羊了個羊 Grid佈局的資料請關注it145.com其它相關文章！