# 布局類型 Grid

{% embed url="<https://www.youtube.com/watch?t=178s&v=tzgIeG7vkjY>" %}

![](https://i.imgur.com/Ka1xLun.png)

在 Webflow 中的網格佈局使 CSS 網格在完全可視化，並且讓他放置於你想放的位置，讓你可以更直接地控制佈局和設計。

![](https://i.imgur.com/ZBZ4uy9.png)

你可以使用 Grid 來創建各種佈局，像是可以使用它來創建一個表格或是在較小的設備上輕鬆地將其轉換為卡片。

#### 創建和編輯 Grid

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

![](https://i.imgur.com/EMMnhcq.png)

**添加列和行**

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

**複製和刪除行和列**

要復製或刪除列或行，請右鍵單擊列或行標題並選擇複製或刪除。  當你將鼠標懸停在列或行上時，你還可以刪除或複製樣式面板中的任何行或列。

![](https://i.imgur.com/yLCKMat.png)

**調整列和行之間的間距**

你甚至可以調整每個間隔之間的距離。&#x20;

![](https://i.imgur.com/W8L7hdd.png)

&#x20;或“樣式”面板中的行或列標題中為列和行輸入自定義大小。

![](https://i.imgur.com/5J9uvjc.png)

**在 Grid 中手動定位內容**

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

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

![](https://i.imgur.com/cbtEoMq.png)

從上面的Youtube教學，你應該可以看到 Grid 基本上就是一個排版神器，如果學會使用他，你在製作網頁的時候會事半功倍，並且節省大量的時間再調整響應式網站的細節。