您可以使用 CSS Grid（一種二維佈局）來製作響應式 Web 內容。如何使用 CSS 網格佈局，您可以輕鬆移動行而無需擺弄 HTML 代碼。在將頁面劃分為關鍵區域或指定由 HTML 基元構造的控件的組件之間的關係時，CSS 網格佈局表現出色。
網格佈局允許作者將元素對齊到列和行中，類似於表。但是使用 CSS 網格，比使用表格時更多的佈局是可行的或更簡單的。例如，像 CSS 定位元素一樣，網格容器的子元素可以定位自己，以便它們實際上重疊和分層。
如何使用 CSS 網格佈局
創建網格佈局
通過將 Display 值設置為 grid，您可以將任何佈局元素（部分、容器、塊、div）轉換為 CSS 網格佈局。該元素是您的網格容器。 Grid 容器的每個直接子元素都是一個Grid Item，具有用於Grid column 和Grid row 的額外設置以將項目放置在網格。
在構建器中編輯網格容器時，網格疊加層變得可見，指示網格單元格。單擊小的四方形元素操作圖標可以顯示/隱藏此疊加層。正如您在上面的屏幕截圖中看到的那樣，默認情況下，網格項目按行排列，覆蓋了網格容器的整個寬度。在您開始之前，這本身並不能釋放 CSS 網格的真正力量。
如何使用 CSS 網格
對於此說明，您需要創建一個父 div 元素（網格容器）和一個或多個子 div 元素以設置網格佈局（網格項）。
網格項是網格容器的直接子項。它們垂直排列成列，水平排列成行。行和列之間的空間稱為間隙。您可以使用這些屬性調整間距:
grid-column-gap，定義列之間的間距； grid-row-gap，定義行與行之間的間距；或 grid-gap，這是 grid-column-gap 和 grid-row-gap 的簡寫屬性。
什麼時候應該使用 CSS 網格?
雖然您幾乎可以在 Web 開發的任何方面使用 CSS 網格，但在某些情況下它是理想的。例如，當我們要實現複雜的設計佈局時，CSS Grid 優於 CSS float 屬性。這是因為 Grid 是二維佈局（有列和行），而 CSS float 屬性是一維佈局（有列或行）。
Grid 也是一個不錯的選擇，當我們元素之間需要一個空間或間隙。通過使用 CSS grid gap 屬性，兩個元素的間距比使用 CSS margin 和 padding 屬性容易得多，後者可能最終會使事情複雜化。
CSS Grid 的好處
CSS Grid 非常靈敏且靈活。由於它，二維佈局很容易製作。此外使用簡單，大多數網絡瀏覽器都支持 CSS 網格。使用 CSS 網格，您將擁有更大的靈活性和更清晰的標記（在您的 HTML 代碼中）。
這部分是因為使用 CSS 網格更改項目的位置不需要更改標記（HTML 代碼）。總體而言，CSS 網格佈局使我們能夠創建結合行和列的更複雜的佈局。
常見問題解答
如何自定義我的 CSS 網格?
設置網格容器和網格項目。 CSS 網格由水平和垂直網格軌道（行和列）組成。 … 添加排水溝。 …定位網格單元。 …調整網格單元格大小。 …定義命名網格區域。 …創建嵌套網格。
可以在 CSS 中使用網格嗎?
我的佈局可以使用 CSS 網格嗎?是的。與任何前端技術選擇一樣，使用 CSS 網格佈局的決定將取決於大多數網站訪問者使用的瀏覽器。