如何使用 CSS 網格佈局創建卡片佈局

編者註：這篇客座文章是由 Abbey Fitzgerald 撰寫的，他是一位用戶體驗軟件工程師和網頁設計師，他熱愛編寫代碼的藝術。

CSS 網格佈局正在改變網頁設計師的工作方式，允許以更有效的方式佈置網站內容。

人們期待已久，但最終這種方法真正流行起來，並且在許多情況下，它已經投入生產。 它徹底改變了網站的設計方式，一旦設計師掌握了它，它將為網頁佈局提供更大的靈活性。

如果您嘗試過使用 CSS Grid 進行設計並查看了 Web 上的教程，您可能已經找到了與整體佈局方法相關的信息。 諸如：頁眉、內容、頁腳等。

然而，CSS Grid 也可用於其他網站細節，例如卡片。 卡片佈局是顯示內容的常用方式，可以使用 CSS Grid 高效地創建它們。 通過使用這種方法，卡片內容區域很容易重複，可以在許多不同的設備類型上查看，並且大小很容易控制。

CSS 網格佈局工具

在進行過程中，您會想要檢查頁面上的內容。 Firefox 具有用於查看網格區域的出色開發人員工具。 使用 Firefox 開發人員工具，您可以看到勾勒出網格輪廓的疊加層。 Firefox Developer Edition 也有這個能力。

選擇要顯示的疊加網格（根據您的設計，可以有多個）。 網格顯示設置允許您通過顯示行號、區域名稱以及您希望行如何延伸來更仔細地查看。 這將有助於您設計。

使用 CSS 網格佈局的簡單卡片

如果您是 CSS Grid 的新手，您會想要溫習一下基礎知識並創建一個簡單的 CSS Grid 佈局。 卡片是顯示內容的絕佳方式，也是一種有趣且易於使用的 UI 元素。 它們還為用戶提供了一種很好的格式，可以快速掃描內容並與他們最感興趣的內容互動。卡片還允許設計人員以視覺上吸引人的方式設置內容格式，包括精美的圖像、介紹內容、鏈接等等！

卡片和整體頁面佈局

順便說一句，了解 CSS Grid 不必用於整個頁面佈局很重要。 如果需要，可以在頁面的某些區域使用網格。 由於這是關於卡片佈局的教程，因此即使頁面的其餘部分不使用 CSS 網格，也可以在此處專門使用網格方法。 只要定義了網格區域並display: grid; 在包裝器上聲明，可以使用這種方法。

使用一定數量的卡片

在某些情況下，規劃一定數量的卡片很容易。 對於一定數量的內容，卡片的數量將保持不變。 例如，可能有四張卡片解釋業務產品，每張產品都在自己的卡片上。

對於這個示例（以及其他示例），所有.card項目都在.cards容器元素中。 要做到這一點，非常簡單。

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

將.cards的值顯示到網格很重要。 沒有這個，就不能創建網格區域。 下一步是定義grid-template-columns並選擇樣式。 實際的卡片樣式將使用.card類聲明。

在此示例中，您將看到多個帶有.card類的文章標籤。 在 Codepen 上查看。

重複設置卡數

這是卡片開始成形的地方。 要在每行中創建可變數量的列，請將 repeat 與repeat()函數一起使用。 該函數有兩個參數：重複次數和重複值。

例如， grid-template-columns: repeat(3, 200px); 計算到grid-template-columns: 200px 200px 200px; .

小數單位

您會看到示例代碼使用了“fr”。 那到底是什麼？ 這種測量單位在 CSS Grid 中流行起來。 Fr 表示“小數單位”， 1fr佔用可用空間的 1 部分。 它有助於簡化空間計算。

小數單位可以單獨使用，也可以讓您指定1fr的寬度，您也可以添加子元素。 多個 fr 將在所有子元素之間平均共享。

可以指定不同的小數單位。 例如，當網格列為1fr 2fr 1fr時，兩個小數單位佔用的空間是一個小數單位的兩倍。

對動態數量的卡片重複

在某些情況下，您可能不知道所需卡片的數量，因此計劃固定數量是行不通的。 將採用與 repeat 相同的方法，但可以選擇使用自動填充來適應盡可能多的需要。

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

除了auto-fill之外還需要寬度聲明。 請牢記，對於 px 值，當沒有足夠的空間容納卡片時，右側可能會有空間，但情況不一定如此，稍後您將看到。

Minmax 用於更好地控制卡片寬度

Minmax 是完美的解決方案，因為小數單位本身會使卡片全寬。 在樣式聲明中同時添加 repeat 和 minmax 將消除可能的空白區域，並且卡片會顯得更加流暢。

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

列將始終適合網格，卡片至少為 200 像素。 當最小空間不能完全適合空間時，這就是最大寬度發揮作用的地方。 當另一張 200px 寬度的卡片放不下時，其他卡片將大於 200px，因此它們會拉伸以填充更多空間並平均分配。 [文章id=”21612″ align=”right”]

移動的

由於已經計劃好最小和最大的卡片，現在是談論移動的好時機。 卡片在更大和更小的設備上都能很好地工作，因為內容是可消化的塊，而且卡片可以很容易地放大和縮小。 CSS Grid 有助於創建出色的移動體驗，在某些情況下，它比單獨的媒體查詢要容易得多。

在此示例中，卡片需要縮小尺寸以適應移動設備並放大尺寸以成為可用空間的一小部分，因此它們在較小的設備上顯示為全寬，不需要單獨的媒體查詢：

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

卡片的最小寬度為 300px。 行中會出現盡可能多的 300px 卡片。 當設備非常小時，很可能沒有可用空間連續放置兩張卡。 這就是1fr發揮作用的時候。 分數單位非常適合響應式設計。 當兩張 300 像素的卡片放不下時，這就是移動視圖變得非常明顯的地方。 當1fr被聲明為最大寬度時，一張卡片將佔據所有可用空間並且它們將相互堆疊。

網格間隙

現在卡片的寬度已經確定，需要決定卡片之間的空間。 此屬性在網格容器上可用，它使在設計中創建裝訂線變得容易。 Grid-column-gap在每張卡片之間創建空間。 當您看到grid-gap時，它指的是grid-row-gap和grid-column-gap的簡寫。 Grid-row-gap是卡片上下的空間， grid-column-gap是卡片左右的空間。

CSS 網格佈局資源

說到 CSS 網格佈局，有很多東西要學，也有很多可能性。 了解 CSS 網格佈局的最佳方法是進行一些額外的閱讀和試驗。 那裡有很多很棒的資源，但這裡有一些可以幫助您入門：

• 網格示例
• Wes Bos 的 CSS 網格佈局課程
• Mozilla 介紹 CSS 網格