10 個方便的 CSS 網格代碼片段

CSS 網格規範並不完全是“新的”，但它在主流開發世界中絕對是更新的。 許多前端程序員甚至還不知道 CSS 網格屬性，更不用說它們如何應用於界面了。

您可以通過四處搜索找到大量教程，但我也建議您學習代碼片段。 通過這種方式，您可以深入到真實世界的項目中，這樣您就可以看到 CSS 網格在實時網頁上是如何工作的。

這個集合應該提供大量資源來幫助您學習、自定義和重新設計 CSS 網格，以適應您在 Web 上所做的任何事情。

1.多圖英雄塊

讓我們從這個帶有網格屬性的非常酷的英雄塊開始。 這種設計模仿了許多雜誌風格網站上的主頁英雄形象部分。

開發人員 Rachel Andrew 使用她自己項目中的一些自定義 CSS 創建了這個。 它工作得非常好，並且設計完全響應啟動。

更不用說它在移動屏幕上看起來很棒了。 不是您在大圖像塊中總能找到的東西。

這是學習 CSS 網格的絕佳資源，也是編寫雜誌風格博客主題的任何人的方便片段。

2. CSS 網格佈局

grid-auto-flow 屬性在此演示中使用“密集”設置完全顯示。 當網格調整大小時，這會強制項目在頁面中進一步向下擠壓。

使用此設置，您可以對哪些頁面元素更改位置、這些更改發生的位置以及網格應如何響應進行大量控制。 這比主要用於響應式設計的媒體查詢更重要。

如果您不確定此代碼的作用，請記住：Google 是您的朋友！ 許多很棒的帖子和堆棧溢出線程涵蓋了整個設置。

3. 不那麼嚇人的南瓜事實

這是一個非常酷的片段，由一些基本的南瓜事實創建。 好吧，南瓜事實由 CSS 網格佈局組織。

該代碼實際上是在 SCSS/Sass 上運行的，這意味著您需要熟悉該語言才能深入研究。但是如果您想查看基本屬性，也可以在 CodePen 內將 Sass 代碼編譯為原始 CSS。

關於這個設計，我最喜歡的事情之一是顏色和排版。 它真的用南瓜圖標和所有那些黃色/橙色色調尖叫萬聖節。

4.自動六邊形佈局

這可能是我為這個畫廊找到的最實用的項目之一。 查看此網格樣式並嘗試調整瀏覽器的大小。

您會注意到六角形項目重新格式化以相應地適應頁面。 這可能是處理包含大量照片的複雜頁面的最佳方式。 我經常在會議網站和擁有大量員工的公司的“關於我們”頁面上看到這種佈局。

現在有了 CSS 網格結構，您無需擔心手動響應樣式。 這個代碼片段是開始規劃類似佈局的最佳起點。

5. CSS Grid 中的 Pokedex

我還沒有在 CSS 網格中看到像這個 Pokedex 這樣有創意的東西。 它依賴於 HTML 和 CSS 以及一些 JavaScript 來自動填充單元格大小。

當您調整頁面大小時，您會注意到圖形本身的大小也會增加。 這使用 CSS 非常容易處理，一旦您了解了一些網格屬性，它就更容易了。

請注意，這不是交互式的，因此您無法單擊任何內容或打開新頁面。 但是在佈局基礎一成不變的情況下，添加這些功能將非常簡單。

6.簡單的網格

這是一個非常有趣的想法，它將印刷設計風格帶到了網絡上。 在 CodePen 上查看這個示例，其中包含許多帶有標題和超大字體的列。

網格佈局本身依賴於具有預定義間隙的設置列。 這意味著當您調整瀏覽器大小時，某些列會根據這些規則分解。

這是確保某些列始終彼此相鄰出現或至少出現在視圖中的絕佳方式，因此它們易於閱讀。

7. 帶有 Flexbox 後備的 CSS 網格

並非所有瀏覽器都趕上了 CSS 網格結構。 這就是為什麼這個片段教你如何使用 flexbox（和浮動）作為後備設計自定義 CSS 網格。

這實際上很棘手，因為如果網格屬性受支持，您想使用它們，但如果不支持，您希望瀏覽器忽略它們。 值得慶幸的是，代碼註釋很好，因此您可以深入研究甚至嘗試自己調整一些功能。

我不會稱這是一個完美的後備解決方案，但它絕對比沒有好。

8. 網格術語演示

不確定所有這些令人困惑的 CSS 網格術語？ 然後這個片段可能有助於清除問題。

如果您深入研究此示例，您會發現一些突出顯示的功能以及沿途解釋網格的文章。 您還將學習如何正確查看網格線以及如何在頁面上準確查看 CSS 網格。

請注意，您不會從這個演示中收集到所有內容，因為它沒有涵蓋所有內容。 這只是對最簡單的屬性的一個小介紹，並帶有視覺輔助工具來提供幫助。

9. 使用網格模板列：repeat()

有關 grid-template-columns 屬性的一個非常具體的示例，請查看此現場演示。 它向您展示瞭如何使用重複功能，而不是在 CSS 中多次聲明相同的列值。

同樣，瀏覽器支持仍在趕上這一點，但大多數現代 Web 瀏覽器都使用這種技術。

更不用說您會在 CSS 中找到大量註釋來幫助您理解它的作用。

10.純CSS網格填字遊戲

最後看看 Adrian Roworth 的純 CSS 填字遊戲。 整個佈局僅基於 HTML 和 CSS 代碼，特別是佈局結構的 CSS 網格屬性。

更瘋狂的是，您可以在填字框中輸入內容來真正解決難題。 多麼酷啊！

請注意，這件事非常複雜，它是此處列出的少數不適合移動設備的項目之一。 但這證明了我們在網絡上的網格佈局已經走了多遠，所以我希望在不久的將來我們會看到更多這樣的東西。