使用 CSS Grid 構建複雜佈局超實用的技巧!

前端小智發表於2022-02-14
CSS
作者：Shadeed
譯者：前端小智
來源：dmitripavlutin

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

網格佈局是現代CSS中最強大的功能之一。使用網格佈局可以幫助我們在沒有任何外部 UI 框架的情況下構建複雜的、快速響的佈局。在這篇文章中，將會介紹所有我們需要了解的 CSS 網格知識 ?。

CSS 網格的基礎知識

我們直接進入程式碼，如下所示，先寫些標籤，原始碼在這個連結裡面：https://codepen.io/Shadid/pen/zYqNvgv

<div class="container">
  <header>Header</header>
  <aside>Aside 1</aside>
  <section>Section</section>
  <aside>Aside 2</aside>
  <footer>Footer</footer>
</div>

在上面，我們建立了一個header、兩個aside和一個footer元素，並將它們包裝在一個container 元素中。我們為容器元素中的所有元素新增背景色和字型大小。

.container > * {
  background: aquamarine;
  font-size: 30px;
}

執行的網頁如下：

clipboard.png

現在我們新增一些網格屬性：

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"
}

/* Assign grid areas to elements */
header {
  grid-area: header;
}

aside:nth-of-type(1) {
  grid-area: aside-1;
}

aside:nth-of-type(2) {
  grid-area: aside-2;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

首先，我們定義了display:grid，它將啟用網格佈局，然後我們使用grid-gap在網格元素中增加間隙。

接下來，我們為每個html元素分配了一個網格區域名稱。在container 類中，我們可以使用grid-template-areas`屬性定 義html 模板的外觀，注意網格模板區域是如何排列的。

grid-template-areas: 
    "header"
    "aside-1"
    "aside-2"
    "section"
    "footer"

元素的順序與 dom 結構不同。但是，最終按我們網路區域的順序來展示。

clipboard.png

下一步是使我們的頁面具有響應性。我們希望在更大的螢幕上使用不同的佈局。CSS網格使得處理媒體查詢和建立響應式佈局變得非常容易。看下面程式碼：

@media (min-width: 670px) {
  .container {
    grid-template-areas: 
      "header  header  header"
      "aside-1 section  aside-2"
      "footer    footer    footer"
  }
}

我們所要做的就是在媒體查詢中重新排序網格模板區域。

圖片描述

網格列和行

如何使用 CSS 網格來組織列和？ 先從下面的程式碼開始：

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
  <div class="item">Six</div>
</div>

新增一些基本的 css

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
}

.item {
  background: lightcoral;
}

我們為上面的 dom 結構使用了網格佈局，並使用grid-gap增加了風格之間的間距。 現在，我們使用grid-template-columns屬性來新增一些列。

.container {
    display: grid;
    height: 100vh;
    grid-gap: 10px;
    grid-template-columns: 100px 200px auto auto;
}

就像這樣，我們使用了列。 我們指定第一列為100px，第二列為200px。 由於我們在第3列和第4列中應用了auto，因此剩餘的螢幕長度將在其中分成兩半。

clipboard.png

可以看到現在頁面中有一個空白。 如果我想將第六列移至第三列和第四列怎麼辦？ 為此，我們可以使用grid-column-start和grid-column-end屬性。

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: 5;
}

注意，我們使用grid-column-end: 5，值5指向列線。 第四列在網格的第五行結束。 grid-column-start和grid-column-end值是指網格線。

如果你覺得網格線的值讓人困惑，你也可以使用span，下面的效果與上面一樣：

.item:nth-of-type(6) {
  grid-column-start: 3;
  grid-column-end: span 2;
}

對於span 2，指定div佔用網格中的兩個插槽。 現在，假設要擴充套件第二列填充下面的空白區域。 我們也可以通過grid-column-start屬性輕鬆地做到這一點。

.item:nth-of-type(2) {
  grid-row-start: span 2;
}

我們使用span和grid-row-start來指定我們想要佔據兩個插槽。

clipboard.png

如上所見，我們已經能夠使用少量的CSS網格屬性來構建非常複雜的佈局。

有效地使用 grid-templates

現在來看看grid-templates，在本節中，我們將討論如何為不同的螢幕大小建立不同的佈局。

首先，還是先來一段 dom 結構：

<div class="container">
  <header>header</header>
  <aside>Left</aside>
  <section>Section</section>
  <aside>Right</aside>
  <footer>Footer</footer>
</div>

接著，新增一些樣式：

``
.container {
display: grid;
height: 100vh;
grid-gap: 10px;
}

.container > * {
background: coral;
display: flex;
justify-content: center;
align-items: center;
}`
``

我們給元素新增了背景色。從上面的程式碼中可以看到，我們也使用了flex屬性。我們可以將flex和grid結合在一起。在這個特殊的例子中，我們使用flex屬性中心對齊內容。

clipboard.png

對於移動端，我們希望section在header下面，right 在 section 下面，我們可以使用網格區域來完成。首先，我們定義網格區域：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
   "header"
    "section"
    "right"
    "left"
    "footer"
}

aside:nth-of-type(1) {
  grid-area: left;
}

aside:nth-of-type(2) {
  grid-area: right;
}

section {
  grid-area: section;
}

footer {
  grid-area: footer;
}

header {
  grid-area: header;
}

在 grid-template-areas 中可以看到，我們先有header ，然後是section，然後是right，最後是left。此外，我們希望我們的section比 left 和 right都大點。為了實現這一點，我們可以使用rid-template-rows 屬性 ?

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-areas: 
    "header"
    "section"
    "right"
    "left"
    "footer";
  grid-template-rows: 1fr 6fr 2fr 2fr 1fr;
}

少了一張圖片

我們可以根據需要設定移動端的檢視，接下我們使用媒體查詢來適配一下大螢幕：

@media (min-width: 500px)  {
  .container {
    grid-template-areas: 
      "header header  header"
      "left   section right"
      "footer footer  right";
    grid-template-rows: 1fr 6fr 1fr;
    grid-template-columns: 1fr 6fr 1fr;
  }
}

如何使用minmax函式動態跟蹤元素的大小

假設我們有兩列，它們均勻地佔據了螢幕上的可用空間。通過使用 grid-template-columns，我們可以很容易地做到這一點。但是，如果我們想要其中一個在200px到500px之間呢?我們的列可以適應不同的螢幕尺寸，但其中一個永遠不會大於500px或小於200px。

對於這些型別的場景，我們使用minmax函式。 讓我們來看看它的實際效果。

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
</div>
.container {
  display: grid;
  height: 100vh;
  grid-template-columns: minmax(200px, 500px) minmax(100px, auto);
}
.one {
  background: cyan;
}
.two {
  background: pink;
}

在這個例子中，第一列總是在200px到500px之間。然而，第二列的最小值可以是100px，對於更大的螢幕，它將覆蓋螢幕的其餘部分。

如何使用 repeat 函式？

我們討論一下元素中的重複模式。我們如何處理它們?我們可以重複我們的程式碼或使用javascript。不過，還有另一種方法可以用css來實現。repeat函式表示軌道列表的一個重複片段，允許以更緊湊的形式編寫顯示重複模式的大量列或行。

<div id="container">
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    Inflexible item of 100 pixels width.
  </div>
</div>
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

clipboard.png

巢狀網格

我還可以將網格巢狀在另一個網格中， 來看看如何實現這一點：

<div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item inner-grid">
    <div class="item">i</div>
    <div class="item">ii</div>
    <div class="item">iii</div>
    <div class="item">iv</div>
    <div class="item">v</div>
    <div class="item">vi</div>
  </div>
  <div class="item">Five</div>
  <div class="item">Six</div>
</div>

我們首先在外部container上宣告網格：

.container {
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}

注意，我們在網格模板中有一個repeat函式，並將其與一個minmax函式組合在一起。我們現在也可以將網格屬性應用到內部網格。

.inner-grid {
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

這樣，我們網格中巢狀了一個網格。

clipboard.png

今天就跟大家分享到這裡，感謝大家的觀看，我們下期再見！

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://blog.soshace.com/how-...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章