使用 CSS 網格在響應式佈局中定位內容。
成績單
在本課中：
Webflow 中的網格佈局使 CSS 網格在完全可視化的畫布上栩栩如生。這使您可以更直接地控制佈局和設計。使用網格，您可以在網格中的任何位置重新定位和調整項目大小，以更快地生成功能強大的響應式佈局。
您可以使用網格來創建各種佈局。例如，您可以使用它來創建一個表格，您可以在較小的設備上輕鬆地將其轉換為卡片。
跨格子
要跨越多個網格單元格的網格子級，請選擇網格子級並拖動出現在網格單元角上的手柄。
您還可以在樣式面板中跨越網格子項。對於具有自動定位功能的子網格，指定子網格應該跨越多少列和多少行。
對於手動定位的子項，輸入項目開始和結束的列和行。
觀看有關在響應式網格中跨越內容的視頻教程。
鎖格子定位
如果您滿足以下條件，則負網格子定位值非常有用：
- 不想在每次添加新列時重新跨越導航欄以填充所有列
- 無論您向網格中添加多少行，都希望將頁腳保留在網格的最後一行
- 想要保持主要內容部分始終在您的網格中居中
負數允許您相對於網格的末端定位子元素——它們從右到左或從下到上引用單元格。
要使您的導航欄跨越所有列，請將其放置在第 1 列（第一列）和第 -1 列（最後一列）之間。
要將頁腳始終保持在網格的最後一行，請將其放置在 -1/ -1 行。
如果您想讓孩子在網格中居中，每邊的列數相同，請將“end”值設置為“start”值的負數。示例 3/-3 或 2/-2。現在，如果您刪除較小斷點上的列，則子級將保持居中。
重疊網格子項
手動定位的子網格在同一個單元格中相交時會自動重疊。您還可以控制這些重疊元素的堆疊順序。您可以通過在Navigator中重新定位它們，或者通過調整定位和 z-index 設置來做到這一點。
觀看有關重疊網格內容的視頻教程。
啟用自動調整
自動調整是 CSS 網格最強大的功能之一，它允許您自動重複和換行列，以便您可以構建適用於每個屏幕尺寸的佈局 - 無需對每個斷點進行調整。
要啟用自動調整，請刪除除一列和一行之外的所有內容。設置列的最小和最大尺寸並啟用自動調整。
更多列將自動生成並重複以響應式分發內容。
觀看有關使用自動調整將收藏列表轉換為響應式網格的視頻教程。
完美創建網格後，了解如何使用網格區域創建可重複使用的佈局模板。
