CSS 柵格（Grid）是 CSS 的一種布局方式，它可以使我們快速地構建網頁布局，并且可以快速響應不同屏幕尺寸的設備。CSS 柵格包含了幾個組件，包括容器、網格行、網格列、網格間隔等。 容器 容器是 CSS 柵格的父元素，它包含著網格行和網格列，而且是整個布局的承載者。我們可以使用以下代碼來定義一個容器： `````` 網格行和網格列 網格行和網格列分別是水平和垂直的線條，它們組合起來形成了網格。我們可以使用以下代碼來定義網格行和網格列： ``` .row { display: flex; } .col { flex: 1; padding: 10px; } ``` 在上面的代碼中，我們使用了 display: flex 屬性來讓網格行變成了一個彈性容器，這樣一來所有的網格列就會按順序排列在網格行內。同時，我們還使用了 flex: 1 屬性讓所有的網格列等分了網格行的寬度，然后使用 padding 屬性對網格列進行間距調整。 網格間隔 網格間隔主要是用來給網格列之間加上一些間距，從而讓整個布局看起來更加美觀。我們可以使用以下代碼來定義網格間隔： ``` .row { display: flex; margin: -10px; } .col { flex: 1; padding: 10px; } ``` 在上面的代碼中，我們首先使用了 margin: -10px 屬性來抵消網格列的 padding 值，然后使用 padding: 10px 加上新的間距值。 總結 CSS 柵格是一種非常方便快捷的布局方式，它能讓我們快速地構建響應式網站，并且可以適應不同的設備尺寸。在實際的使用過程中，我們需要注意一些細節問題，如網格行的定義、網格列的等分、網格間隔的調整等。只有在完全掌握這些細節并合理運用它們，才能使用 CSS 柵格完美實現我們的網頁布局。