網格布局是目前CSS布局中非常流行的一種方式，它可以讓網頁更加靈活地適應不同的屏幕大小和設備。以下是在CSS中使用網格布局的一些示例，幫助您更好地掌握這種技術。 1. 創建網格容器 網格布局需要一個父級容器，我們稱之為網格容器。要創建一個網格容器，可以將一個元素的display屬性設置為grid：

.container {
display: grid;
}

2. 定義行和列 網格布局是由行和列組成的，為此，我們需要通過grid-template-columns和grid-template-rows屬性來定義它們的大小和數量：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 列大小 */
grid-template-rows: 100px 200px; /* 行大小 */
}

以上代碼創建了3列和2行的網格，列的大小是相等的，行的大小分別為100像素和200像素。 3. 添加網格項 一旦定義了網格容器的行和列，我們就可以添加網格項了。網格項是容器中的特定元素，可以通過grid-row和grid-column屬性來指定它們所在的行和列：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
}
.item {
grid-row: 1 / 3; /* 第1行到第3行 */
grid-column: 2 / 4; /* 第2列到第4列 */
}

以上代碼將網格項放置在第1行到第3行和第2列到第4列之間。 4. 自適應網格 網格布局非常適合自適應網頁，因為它允許元素根據可用空間的大小自動調整其大小和位置。要創建自適應網格，可以使用auto關鍵字來指定列和行的大小，如下所示：

.container {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
}
.item {
grid-row: 1 / 3;
grid-column: 1 / 3;
}

以上代碼創建了一個自適應網格，第一行和第一列的大小由它們的內容決定，其余的行和列都平均分配可用空間。 總之，CSS網格布局是現代網頁設計中必不可少的一種技術。通過了解如何創建網格容器，定義行和列，添加網格項以及創建自適應網格，您可以快速創建具有靈活布局的現代網頁。