如何使用 CSS 網格佈局創建簡單佈局

如果您曾經涉足過印刷設計，您就會知道網格佈局的想法起源於何處。 網格是一種精確的測量工具，用於在頁面上定位設計元素。 Web 上經常使用此想法來使內容井井有條且統一，從而改善用戶的觀看體驗。

當網頁設計的實踐是新的時，佈局非常簡單。 頁眉、側邊欄、內容區域和頁腳。 現在，隨著網絡的發展，我們的佈局變得更加複雜，作為網頁設計師，我們有更多的事情要應對。 我們經常需要大量的內容區域、響應式設計、多頁面佈局模板設計等等。 為了實現設計並使其正確顯示，需要浮動和定位。 浮點數聽起來很簡單，但有時使用起來會很棘手。

幸運的是，網格提供了一種更簡單的方式來設計和顯示 Web 內容。 現在是成為一名設計師的好時機，因為 CSS 網格佈局正在迅速獲得關注。 可能感覺網格是近年來網頁設計中的一個新想法，但不管你信不信，CSS 網格佈局已經投入使用多年。 瀏覽器對它們的支持很快就出現了，所以現在它們可以幫助緩解設計師多年來不得不處理的關於定位的一些挫折感。

終於到了進入網格並探索新的設計可能性的時候了！

CSS 網格支持

這完全取決於您需要支持的瀏覽器，但是很有可能您在使用 CSS 網格時不必擔心“標記模式”。 您可以隨時訪問 Can I Use 文檔來仔細檢查，但對 CSS 網格的支持已大大增加，許多設計師能夠在生產中使用它，這是值得慶祝的！

CSS 網格佈局基礎

通過使用 CSS，網格佈局將有助於定義網頁上的內容區域。 CSS 網格佈局規範中定義了一組相對較新的屬性。 在進一步了解這種新的佈局設計方式時，這是一個很好的參考資源。 CSS 網格佈局有助於簡化事情並使創建佈局更容易。 將網格視為可以定義測量值的結構。

網格的一部分

線條

在這種情況下，有 5 條垂直線和 3 條水平線。 行的編號從一開始。 在此示例中，垂直線從左到右顯示，但這取決於書寫方向。 因為這裡顯示的是從左到右閱讀，如果是從右到左，事情就會顛倒過來。 可以為線條命名（可選），這有助於在 CSS 中引用它們。

曲目

軌道是兩條平行線之間的空間。 在圖中，有四個垂直軌道和兩個水平軌道。 線路和軌道之間存在巨大的雙重努力。 線條是參考內容開始和結束位置的好方法。 曲目是內容實際去向的地方。

細胞

單元格位於水平和垂直軌道相交的地方。 圖中有八個單元格。

領域

單元格在指定區域時發揮作用。 區域是可以跨越多個單元格的矩形形狀。 與線一樣，區域可以隨意命名。 圖中包含幾個標籤：“A”、“B”和“C”。

創建網格佈局

在開始佈局之前勾勒出草圖會很有幫助。 沒有什麼可以替代好的舊方格紙。

網格的 HTML

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

容器非常重要。 容器內是網站的不同內容塊。 容器內網格項的順序無關緊要。 接下來，我們將使用 CSS 將它們放置在我們的佈局中。

CSS 樣式

完成 HTML 標記後，最重要的聲明是在 CSS 中完成的。 在容器內，您需要應用display:grid或display:inline-grid 。 如果您想要塊級網格，請使用display:grid 。 將display:inline-grid用於行內級網格。

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

grid-template-columns和grid-template-rows屬性用於指定行和列的寬度。 grid-template-columns已設置為 1fr 和 3fr。 這是用小數單位形成網格的地方。 使用這些值，很明顯有兩列並且它們的寬度不相等。 設置為 3fr 的列比其他列寬三倍。 這解釋了側邊欄如何顯得比內容區域更窄。

可以進行響應式自定義，但使用小數單位是很好的第一步。 可以使用grid-column-gamp和grid-row-gap控制區域之間的間距。

事情看起來很緊湊，但如果有更多的規格，事情就會成形。

此示例從放置標題開始，但可以按照最適合您的順序放置元素。 如果您想從頁腳開始，那也可以。

讓我們從標題開始，它從第 1 列行到第 4 列行以及第 1 行行到第 2 行行。CSS 將如下所示：

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

您可能會注意到側邊欄被壓扁了，我們幾乎看不到它。 我們需要做一些重新排列。 在此佈局中，參考線條以獲取位置將有助於安排。 線條作為指導。 標題位於第一行和第二行之間。 對於側邊欄，它將從第三行開始到第六行結束。 標題行以 2 結尾，因此將放在它的正下方。 要查看示例，請參閱 Codepen 上的項目。

我們使用grid-column-start來指定元素的起始垂直線。 在這種情況下，它將設置為三個。 grid-column-end指示元素的結束垂直線。 在這種情況下，此屬性將等於四。 其他行值也將以同樣的方式設置。 側邊欄的位置在那裡，它只是被內容區域覆蓋。

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

主要內容從第三欄開始，到第四欄結束。 側邊欄和內容區域的頂部是偶數，因此它們的grid-row-start都是三個。 您可能想知道內容和側邊欄是如何變高的。 通過在容器上設置高度，在本例中為 400px，現在它比其他元素高。

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

最後兩個內容區域是附加內容區域和頁腳。

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

可以更有效地編寫結束和開始聲明。 你可能會看到grid-column-start: 1; 和grid-column-end: 3; 用速記寫的。 這看起來像grid-column: 1 / 3; . 同樣的想法可以用來聲明列行信息。

響應優勢

現在已經創建了一個佈局，它看起來很“桌面”。 平板電腦和移動設備呢？ CSS 網格佈局與媒體查詢配合得很好，因此設計可以適應不同的屏幕尺寸。 真正酷的是您可以在這些不同的媒體查詢斷點處更改內容區域。 作為設計師，這意味著您可以在不同的斷點處選擇最適合您的佈局的內容。 例如，如果您希望將“額外內容”放置在“內容”區域上方，您可以指定正確的列和行。

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

通過讓列從 1 開始到 4 結束，我們使內容區域全寬。 網格行的放置使得“額外內容”現在位於“內容”之上。

CSS 網格佈局的瀏覽器工具

當您設計佈局或檢查其他網站時，Firefox 提供了一個很好的工具來處理 CSS 網格佈局。 它被稱為 CSS Grid Playground，它使檢查網格變得非常直觀。 通過轉到檢查器，佈局選項卡中有一個選項可以直觀地查看網格的構造方式。 使用此工具探索不同的網格屬性如何影響整體網格佈局和設計將使設計過程更容易。

CSS 網格佈局是一種全新的、令人興奮的創建 Web 佈局的方式。 如您所見，創建簡單的頁面佈局時啟動和運行起來非常容易。 這個簡單的示例為如何製作更複雜的佈局奠定了良好的基礎。 隨著這項技術的普及，在為各種設備和斷點設計時，這項技術將具有優勢，可以進行佈局定制。