CSS控制顯示欄位數是一種很常見的布局需求，在以下的例子中，我們將展示如何通過CSS控制網格布局中的欄位數。

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
}

上面的代碼中，我們首先定義了一個名為.container的CSS類，然后使用grid屬性來實現網格布局。接著，我們使用grid-template-columns屬性來定義每一個欄位的寬度，使用repeat函數來自動填充欄位，使用minmax函數來限制欄位的最小和最大寬度。在這個例子中，我們定義了每個欄位的最小寬度為200像素，最大寬度為1fr。

通過CSS控制顯示欄位數的另一種方法是使用媒體查詢。在以下的例子中，我們將展示如何通過媒體查詢控制在不同分辨率下的欄位數。

@media screen and (min-width: 768px) {
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
}
@media screen and (max-width: 767px) {
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
}

上面的代碼中，我們使用@media規則來定義不同的媒體查詢。在min-width: 768px的分辨率下，我們定義了4個欄位。在max-width: 767px的分辨率下，我們定義了2個欄位。通過媒體查詢，我們可以根據不同的設備和分辨率來自適應地顯示不同數量的欄位。