CSS中的gutter指的是網(wǎng)格布局中列與列之間的空白間距。在響應(yīng)式設(shè)計(jì)中，gutter的設(shè)置非常重要，可以幫助頁面更好的適應(yīng)各種設(shè)備的屏幕。

為了設(shè)置gutter，我們需要使用CSS中的margin屬性。在網(wǎng)格系統(tǒng)的CSS中，我們通常會(huì)將margin設(shè)置為負(fù)值，以便讓每一列都與上一列之間共享一部分margin。比如：

.col-1-of-3 {
width: calc((100% - 2 * var(--gutter)) / 3);
margin-right: var(--gutter);
}
.col-2-of-3 {
width: calc((2 * (100% - 2 * var(--gutter)) / 3) + var(--gutter));
}

在上面的代碼中，我們使用了calc()函數(shù)來計(jì)算每一列的寬度。我們將頁面的總寬度減去兩倍的gutter，然后除以3，就可以得到每一列的寬度。同時(shí)，在每一列的右側(cè)添加一個(gè)gutter的margin。

值得注意的是，在最后一列中，我們不需要再添加margin-right，因?yàn)樗亲詈笠涣小?/p>

gutter的大小可以根據(jù)不同的設(shè)計(jì)需求進(jìn)行調(diào)整。通常來說，我們建議將gutter的大小設(shè)為1到2rem之間。對(duì)于較小的屏幕，可能需要適當(dāng)減小gutter的大小，以確保網(wǎng)格布局更加緊湊。