示例
在下面的示例中,我們有一個三列兩行的網格軌道,在列軌道和行軌道之間都有 20px 的間隙。
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1.2fr);
grid-auto-rows: 45%;
column-gap: 20px;
row-gap: 20px;
}
html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
就網格尺寸而言,間隙的作用就像一個常規的網格軌道,但不能在間隙中放置任何東西。間隙的作用就像該位置的網格線獲得了額外的尺寸,因此放置在該線之後的任何網格項都將從間隙的末端開始。
row-gap 和 column-gap 屬性並不是導致軌道間隔開的唯一因素。外邊距、內邊距或 CSS 框對齊中的空間分佈屬性都可能導致可見的間隙——因此,除非你知道你的設計沒有使用這些方法中的任何一種引入額外的空間,否則不應將 row-gap 和 column-gap 屬性視為等於“間隙大小”。
另見
-
屬性參考
-
CSS 網格佈局規範中 間隙的定義