C2-09b - Layout:Grid - Webflow Academy 大師班

使用 CSS 網格在響應式佈局中定位內容。

‍

成績單

在本課中：

創建和編輯網格

將內容放在網格中

移動、跨越和對齊網格內容

設計響應式網格

Webflow 中的網格佈局使 CSS 網格在完全可視化的畫布上栩栩如生。這使您可以更直接地控制佈局和設計。使用網格，您可以在網格中的任何位置重新定位和調整項目大小，以更快地生成功能強大的響應式佈局。

您可以使用網格來創建各種佈局。例如，您可以使用它來創建一個表格，您可以在較小的設備上輕鬆地將其轉換為卡片。

‍

創建和編輯網格

要創建網格，請從“添加”面板中選擇網格元素。您還可以將網格佈局應用於樣式面板中的任何現有元素。

編輯網格

要編輯網格，請在選擇網格後單擊樣式面板中佈局下的編輯網格。

要退出網格編輯模式，請按ESC或單擊畫布上的完成。

添加列和行

要添加列和行，請選擇出現在畫布上或樣式面板中的添加按鈕。

複製和刪除行和列

要復製或刪除列或行，請右鍵單擊列或行標題並選擇複製或刪除。

當您將鼠標懸停在列或行上時，您還可以刪除或複製樣式面板中的任何行或列。

重新排序行和列

要在“樣式”面板中重新排列行或列，請打開網格設置並將鼠標懸停在您要移動的行或列上，然後拖動出現的手柄。

調整列和行之間的間距

間隙允許您在不添加邊距或填充的情況下指定網格項目之間的空間。要調整列和行之間的間隙大小，請單擊並拖動畫布上的間隙。

或者，您可以在樣式面板中輸入所需的間隙大小。

調整列和行大小

要調整網格列的大小，請在畫布上選擇列標題並將其拖動到所需的大小。

您還可以在畫布上或“樣式”面板中的行或列標題中為列和行輸入自定義大小。

FR 單位 (Unit)

網格佈局引入了一個額外的長度單位來幫助我們定義網格：FR 單位。FR 單元代表網格容器中可用空間的一小部分。您可以使用它來定義行和列的長度，就像百分比或像素單位一樣。但是，與固定百分比或像素單位不同，FR 單位會在調整間隙的同時自動計算單元格空間。

大小值為 1FR 的列將拉伸或收縮以填充網格容器中的可用空間。如果添加或刪除列，所有具有 1FR 單位的列都會相應調整。

了解更多關於 FR 單元的信息。

‍

最小/最大設置

設置最小/最大值可確保您的行和列不會縮小到設定的最小值或擴大到設定的最大值。例如，一行的默認高度為 auto，並且會擴大或縮小以適應裡面的內容。

如果您希望行的最小高度為 200 像素，則可以將最小值設置為 200 像素，將最大值設置為自動。這樣，行將根據內容增長，並且永遠不會縮小超過 200 像素。您可以對列執行相同的操作。

要為任何列或行輸入最小/最大值，請在畫布上的軌道標題或樣式面板中輸入所需的值。

將內容放在網格中

您可以在網格內添加任何內容：標題、圖像、div 塊，甚至是另一個網格。您添加到網格的任何內容都將成為該網格的子元素。默認情況下，每個新的子網格都會填充一個單獨的網格單元格——從左到右填充下一個可用單元格。如果一行中沒有更多可用的單元格，則會生成一個新行來容納新的網格子級。

改變網格內容流動的方向

您可以通過更新樣式面板中的方向設置來更改網格子項的方向。在這裡，您可以選擇默認行設置，即從左到右放置子級。或者，將方向更改為列，將子項從上到下放置。

在網格中手動定位內容

要覆蓋自動放置設置以在網格中手動定位項目，請在將元素拖入網格時按住Shift 。任何手動定位在網格中的項目都將保留手動位置設置。

要將現有網格子項的位置設置更改為手動，請選擇網格子項並更新樣式面板中的位置設置。

手動放置的子網格將保留在其指定的網格單元中。雖然自動放置的網格子項移動到下一個單元格以容納新的網格子項。

在網格單元格中嵌套多個元素

您可以通過在子網格中嵌套元素來將多個元素添加到單個網格單元。為此，您首先需要將佈局元素（例如 Div 塊）作為直接網格子元素添加到網格中。

將佈局元素（如 Div 塊）添加為網格子元素後，您可以在將元素拖動到網格單元格時按住Control將其他元素添加到該 Div 塊。

網格中的重複內容

有 2 種方法可以復製網格子項以在網格中的多個單元格中重複使用相同的內容：

按住AltOption

（在 Windows 上）或

（在 Mac 上）並拖動內容以創建副本並將其移動到新的網格單元中

選擇並複制內容，然後選擇網格並粘貼內容

在網格中移動、跨越和對齊內容

將內容放置在網格中後，您可以隨意操作它們。您可以移動內容以將它們重新定位在不同的單元格中。您可以跨越內容以佔用多個單元格。您還可以調整網格內內容的對齊方式。

移動網格子項

要重新定位網格中的內容，請選擇網格子項並將其拖動到畫布上或Navigator中的所需位置。

設置網格子順序

您還可以在樣式面板的網格子設置部分中設置網格子的順序。

對齊網格中的內容

要更新網格內所有子項的對齊方式，請選擇網格並在“樣式”面板中更改對齊設置。

要更改單個子網格的對齊方式，請選擇子網格並更新樣式面板的子網格部分中的自對齊設置。

跨格子

要跨越多個網格單元格的網格子級，請選擇網格子級並拖動出現在網格單元角上的手柄。

您還可以在樣式面板中跨越網格子項。對於具有自動定位功能的子網格，指定子網格應該跨越多少列和多少行。

對於手動定位的子項，輸入項目開始和結束的列和行。

觀看有關在響應式網格中跨越內容的視頻教程。

鎖格子定位

如果您滿足以下條件，則負網格子定位值非常有用：

不想在每次添加新列時重新跨越導航欄以填充所有列

無論您向網格中添加多少行，都希望將頁腳保留在網格的最後一行

想要保持主要內容部分始終在您的網格中居中

負數允許您相對於網格的末端定位子元素——它們從右到左或從下到上引用單元格。

要使您的導航欄跨越所有列，請將其放置在第 1 列（第一列）和第 -1 列（最後一列）之間。

要將頁腳始終保持在網格的最後一行，請將其放置在 -1/ -1 行。

如果您想讓孩子在網格中居中，每邊的列數相同，請將“end”值設置為“start”值的負數。示例 3/-3 或 2/-2。現在，如果您刪除較小斷點上的列，則子級將保持居中。

清除網格子設置

網格子設置僅適用於所選元素，它們不會與類一起保存。樣式面板中的粉紅色標籤顯示應用於當前斷點上選定元素的更改設置。這些樣式會級聯到較低的斷點，並用橙色標籤表示。當您在較小的斷點上覆蓋繼承的（橙色）樣式時，指示器將再次變為粉紅色。

要刪除任何應用的網格子設置，請單擊粉紅色標籤，然後單擊重置。

重疊網格子項

手動定位的子網格在同一個單元格中相交時會自動重疊。您還可以控制這些重疊元素的堆疊順序。您可以通過在Navigator中重新定位它們，或者通過調整定位和 z-index 設置來做到這一點。

觀看有關重疊網格內容的視頻教程。

填充空的網格單元格

當您跨越網格子級時，空單元格可能會保留在網格中。要使用內容自動填充這些單元格，請在樣式面板中啟用密集設置。

注意：密集嘗試將網格子項放入網格的空單元格中。這可能對可訪問性不利，因為它只會改變項目的顯示位置，而不是它們出現在頁面源中的位置。

設計響應式網格

要設計您的網格以便跨屏幕響應，您可以手動刪除較小視口上的列，或啟用自動調整以自動生成列和行以適應較小的屏幕尺寸。

跨斷點手動設置網格佈局樣式

為了確保您的網格在所有設備上都能響應，請在較小的斷點上查看您的網格並根據需要刪除列。

如果您無法刪除較小斷點上的列，請嘗試：

將網格方向設置為行

確保您沒有在這些列中手動定位網格子項

確保您沒有跨越這些列的子元素

啟用自動調整

自動調整是 CSS 網格最強大的功能之一，它允許您自動重複和換行列，以便您可以構建適用於每個屏幕尺寸的佈局 - 無需對每個斷點進行調整。

要啟用自動調整，請刪除除一列和一行之外的所有內容。設置列的最小和最大尺寸並啟用自動調整。

更多列將自動生成並重複以響應式分發內容。

觀看有關使用自動調整將收藏列表轉換為響應式網格的視頻教程。

完美創建網格後，了解如何使用網格區域創建可重複使用的佈局模板。


https://showcased.webflow.io/projects/bloger-magazine
https://showcased.webflow.io/projects/art-project-42-gradient-tiles
https://showcased.webflow.io/projects/8xflow-styleguide
https://showcased.webflow.io/projects/bandw-grid-modal
https://showcased.webflow.io/projects/grid-section-from-iphone-13
https://showcased.webflow.io/projects/mm011-retro-3d-grid