CSS網格是一種強大的布局模式，用于將網頁內容分成行和列。它基于網格的概念，允許我們更容易地控制頁面的布局和排版。在CSS中，網格是一個二維布局系統，可以輕松定義和操作整個網頁布局。現在，讓我們來看一些實際的CSS網格代碼，它們可以幫助您快速了解如何使用網格布局。

/* 定義一個簡單的網格布局 */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
/* 在網格中定義內容 */
.item-a {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.item-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.item-c {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.item-d {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
/* 在HTML中呈現網格布局 */
A
B
C
D

上面的代碼演示了如何在CSS中定義網格布局，包括如何設定行和列的大小、如何定義網格之間的間隔、以及如何將內容放置在網格中。通過使用這些CSS網格代碼，我們可以輕松地創建具有復雜布局的網頁。