CSS宮格樣式是網頁設計中常用的一種樣式，它可以將網頁布局變得更加美觀、簡潔、易讀。在此，我們將為大家介紹CSS宮格樣式的基礎知識。

.grid {
display: grid; /*將元素變成一個宮格樣式*/
grid-template-columns: repeat(3, 1fr); /*設置列數，1fr表示平均分配整個寬度*/
grid-gap: 20px; /*元素之間的間隔*/
}
.item {
background-color: #ccc; /*元素背景顏色*/
padding: 20px; /*內邊距*/
text-align: center; /*居中*/
grid-column: span 2; /*元素跨越兩列*/
grid-row: span 2; /*元素跨越兩行*/
}

如上所示，通過設置CSS樣式我們可以將一個網格布局轉換為一個美觀簡潔的頁面。其中，設置宮格樣式的display：grid屬性是最核心的部分。通過設置grid-template-columns我們可以設置每一行的列數，使用repeat()函數可方便地創建多個相同的列表樣式，而grid-gap屬性用于設置元素之間的距離，可以使樣式更美觀。在定義每一個元素時，我們需要根據實際情況進行調整，其中grid-column和grid-row用于跨越多個列或行。