CSS是用于定義樣式的語言，它可以創建網格布局，讓網頁更加美觀和整齊。使用CSS創建網格布局主要通過以下三部曲：

/* 第一步：定義網格容器 */
.container {
display: grid; /* 設置網格布局 */
grid-template-columns: auto auto auto; /* 設置列的寬度 */
grid-template-rows: 100px 100px; /* 設置行的高度 */
}
/* 第二步：定義網格項 */
.item {
background-color: #fff; /* 設置背景顏色 */
padding: 20px; /* 設置內邊距 */
text-align: center; /* 設置文本居中 */
}
/* 第三步：設置網格項在網格容器中的位置 */
.item:nth-child(odd) {
grid-column: 1 / 3; /* 從第一列到第二列 */
grid-row: 1 / span 2; /* 從第一行到第二行，占兩行 */
}
.item:nth-child(even) {
grid-column: 3;
grid-row: 1 / 3;
}

以上是一個簡單的網格布局示例，它由一個網格容器和多個網格項組成。在網格容器中，我們定義了三列和兩行，每列的寬度都是自適應的，行的高度則是固定的100px。在定義完網格容器后，我們接著定義了多個網格項，每個網格項都有自己的背景顏色、內邊距和文本居中等屬性。最后，我們設置了每個網格項在網格容器中的位置，奇數項占據第一和第二列、占據兩行，偶數項則占據第三列和第一、第二行。