CSS Gap 如何新增空間以增強 Web 佈局
##＃ 快速鏈接
⭐什麼是間隙?
⭐如何寫出 CSS 間隙屬性
⭐使用 Flexbox 的間隙
⭐使用網格間隙
⭐在多列佈局中使用間隙
要點
CSS gap 屬性作為一種適應性強的方法來描述網頁佈局中各種設計元件之間的空間關係。
「gap」屬性提供了一種方便的方法，透過分別為行和列指定單獨的值來指定水平和垂直間距。
void 元素的使用與各種 CSS 佈局系統相容，例如 Flexbox、網格和多列排列。
層疊樣式表 (CSS) 提供了一系列用於組織網頁內元素放置的方法，從精確的定位技術到更靈活的基於網格的設計。同樣重要的是要考慮這些組件周圍和之間的空白的散佈和分佈，這可以透過各種方法來實現。其中一種方法是利用間隙特性，該特性以其跨不同結構配置的適應性而聞名。
什麼是間隙?
在視覺設計領域，空白的利用和CSS「間隙」屬性的熟練操作是實現美觀且功能合理的佈局的基本原則。明智地應用這種看似簡單的屬性，可以成為創造和諧構圖的基石，在認知和情感層面上與觀眾產生共鳴。
您可以利用此屬性來指定三種不同空間排列中元素之間間隙的尺寸:
⭐ 靈活的盒子佈局（“Flexbox”）
⭐網格佈局
⭐多列佈局
所有當代網頁瀏覽器都支援間隙屬性，該屬性作為盒子模型品質（例如邊距和填充）的補充元素。
如何寫出 CSS 間隙屬性
間隙性質的基本結構可以表示如下:
gap: <row-gap> <column-gap>;
每個值可以由測量值或比例以及可選的行間距或列間距組成。當沒有指定間隙時，單獨的數字將控制行數和列數。因此，人們可能會遇到以下配置:
gap: 10em;
這意味著行和列的間距將是目前字體大小的十倍。
gap: 20px 10%;
此實作將在水平方向（行）上建立 20 個單位的間距，並在垂直方向（列）上建立等於包圍元素寬度十分之一的間隔。
當利用容器元件進行佈局時，建議使用間隙，而不是在所述容器內合併單獨的間隔元件。這種方法旨在建立一致的項目間距，而不是創建複雜且不一致的間距變化。
在 Flexbox 中使用間隙
您可以利用彈性佈局中的「gap」屬性來調節行和列之間的間距，佈局的方向決定適用哪種類型的間隙；行間隙或列間隙。
當沒有提供具體說明時，Flex 容器中項目的預設佈局通常沿著主軸或行方向並排排列。這可以使用以下程式碼片段透過最少的樣式來實現:
.flex-layout {
display: flex;
}
.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
產生這樣的佈局:
父容器中包含的每個元素都利用傳統的盒子模型屬性（例如填充和邊距）來建立它們之間的間距。透過使用 CSS 中的「gap」屬性來添加少量空間來建立輕微的分隔。
.flex-layout { gap: 20px; }
增加彈性項目之間的間距將導致每個項目之間產生間隙，同時在各個項目本身周圍不留任何額外空間。
當柔性佈局用於透過採用諸如換行之類的技術來顯示跨越多列和行的元素時，它可以稱為在兩個方向上顯示項目。這種類型的佈置可以有效利用空間，同時保持井然有序的外觀。
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
您將看到兩個間隙的影響:
在考慮佈局中元素的排列時，請務必記住邊距和 justify-content 等屬性可能會影響各個元件之間的空間分佈。在這方面，「間隙」屬性應被視為基線測量，並理解其他因素可能會影響整體間距。重要的是不要假設單獨設置“間隙”將提供對元素放置的完全控制，而是要考慮其他相關屬性如何相互作用並有助於確定最終結果。
使用間隙和網格
您也可以將間隙與網格佈局結合使用，儘管這樣做時需要考慮一些差異。通常，由於網格更適合多維排列，因此有必要指定行間距和列間距。
網格佈局也表現出相鄰對齊元素的固有傾向，可以透過使用邊際調整和腔內緩衝來修改。
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
結果是典型的網格佈局:
添加間隙:
€‹.grid-layout {
gap: 80px 40px;
}
將在每個項目之間插入空格:
考慮不同的行和列間隙值對建立雙倍於分隔列的間隙寬度的空間的影響，同時保持行和列之間間距的一致性。回想一下，當使用統一值時，它將確定行和列之間的公共距離。
在多列佈局中使用間隙
列佈局中的列還可以利用間隙屬性來設定列之間的間距。但是，當使用單值佈局時，只有一個間隙值適用，並且它共同應用於所有列，而不是單獨應用於每一行。基於列的多列佈局具有固有的預設間隙，決定了它們之間的空間。
.column-layout {
column-count: 3;
}
字體大小的度量以 em 單位表示，它相對於父元素的字體大小。 em 單位等於父元素的目前字體大小乘以一。因此，如果父元素的字體大小為 16 像素，則 em 單位將相當於 16 像素或約 0.375 英吋。
當改變字體時，尤其是沿其邊緣對齊內容時，這種現象變得更加明顯:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
上述句子的串聯會導致重疊和擁擠的格式，這可能會妨礙可讀性並導致閱讀時的不適。
透過定義特定邊距來增加列之間的間隙，可以改善視覺對齊和呼吸空間，從而增強設計的可讀性和整體美感。
.column-layout {
gap: 2em;
}
您可能會發現，考慮其他因素（例如列寬尺寸），使用 2em 或 3em 等字體大小可以產生更清晰的結果。
利用基於瀏覽器的工具（例如 Google Chrome 開發人員工具中提供的工具）提供了一種有效的方法來檢查佈局並觀察特定屬性（包括間距和邊距）如何影響其整體外觀。
當使用間隙的雙值時，請確保它們以適當的方式排列。儘管「行、列」排列可能看起來違反直覺，但它與附加捷徑屬性（例如填充和邊距）的順序一致。
Gap 是一種多功能工具，可根據專案的特定設計要求以多種方式應用。然而，它的主要功能在所有應用中保持一致-提供元素之間均勻的間距，同時保持乾淨和有組織的外觀。