CSS Grid是一種新的布局方式，它允許我們創(chuàng)建靈活的、響應(yīng)式的網(wǎng)格布局。

在CSS Grid中，我們可以使用grid-template-columns和grid-template-rows屬性來定義網(wǎng)格中每個單元格的大小和形狀，通過設(shè)置grid-gap屬性定義網(wǎng)格之間的間隔。

.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

上面的代碼定義了一個3列的網(wǎng)格布局，每個單元格的大小相等，使用1fr表示。grid-gap設(shè)為20px，表示網(wǎng)格之間的間隔為20px。

如果我們需要不同方向上的間隔不同，可以使用grid-row-gap和grid-column-gap屬性。

.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto-fit, 150px);
grid-row-gap: 20px;
grid-column-gap: 40px;
}

上面的代碼中，我們使用grid-row-gap和grid-column-gap分別設(shè)置行和列之間的間隔。

除了使用固定的像素值外，我們也可以使用百分比來設(shè)置間隔。

.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
grid-gap: 5%;
}

上面的代碼中，grid-gap設(shè)為5%，表示網(wǎng)格之間的間隔大小為單元格大小的5%。

CSS Grid的間隔設(shè)置使我們可以輕松創(chuàng)建具有間隔的靈活布局，在快速構(gòu)建響應(yīng)式頁面布局時非常有用。