在 CSS Grid 布局中，我们可以使用 grid-column-gap 属性来设置列与列之间的间距。这个属性可以设置一个固定的像素值或者一个百分比值来控制列与列之间的间距大小。
设置固定像素值的列间距
我们可以使用 grid-column-gap 属性来设置一个固定像素值的列间距。例如，我们可以将列间距设置为 20 像素：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
}在这个例子中，我们使用了 grid-template-columns 属性来定义了一个包含三列的网格布局，并使用 repeat() 函数来简化定义。然后，我们使用 grid-column-gap 属性来设置列与列之间的间距为 20 像素。
设置百分比值的列间距
我们也可以使用 grid-column-gap 属性来设置一个百分比值的列间距。例如，我们可以将列间距设置为每列宽度的 10%：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10%;
}在这个例子中，我们使用了相同的网格布局定义方法，并使用 grid-column-gap 属性来设置列与列之间的间距为每列宽度的 10%。
总结
在 CSS Grid 布局中，我们可以使用 grid-column-gap 属性来设置列与列之间的间距。我们可以使用一个固定的像素值或者一个百分比值来控制列间距的大小。这个属性可以让我们更容易地控制网格布局中的元素位置和大小，从而实现更加复杂的布局效果。
示例代码：
<div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- ---------------- ----- - ----- - ----------------- ----- -------- ----- ----------- ------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fbd42ed10417a22276379a