在CSS中，我們會(huì)用到柵格（Grid），來(lái)讓網(wǎng)頁(yè)在不同的屏幕尺寸下呈現(xiàn)出良好的布局和排版。柵格其實(shí)是一個(gè)二維的布局系統(tǒng)，可以讓我們?cè)诰W(wǎng)頁(yè)中創(chuàng)建多列和多行，然后將元素放在這些列和行中。

在CSS3中出現(xiàn)了新的柵格系統(tǒng)，即CSS Grid Layout。與此同時(shí)，Bootstrap等其他CSS框架中也提供了自己的柵格系統(tǒng)。

CSS Grid Layout的設(shè)計(jì)理念是將整個(gè)網(wǎng)頁(yè)劃分為一系列網(wǎng)格，然后在這些網(wǎng)格中放置元素。具體來(lái)說(shuō)，我們可以定義一個(gè)網(wǎng)格容器（Grid Container），然后在其中定義行和列來(lái)創(chuàng)建網(wǎng)格，然后將元素放置在這些網(wǎng)格中。

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 100px auto;
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}

上面的代碼中，我們定義了一個(gè).grid-container類(lèi)，表示一個(gè)柵格容器。display屬性被設(shè)置為grid，表示這是一個(gè)柵格布局。grid-template-columns和grid-template-rows分別定義了三列和三行，其中第二行的高度為100px。最后，我們?cè)O(shè)置了網(wǎng)格之間的間距為20px。

在柵格容器中，我們可以定義多個(gè)元素，這些元素被稱(chēng)為柵格項(xiàng)（Grid Item）。柵格項(xiàng)可以通過(guò)grid-row和grid-column來(lái)指定所占據(jù)的行和列。

元素A
元素B
元素C

上述代碼中，我們創(chuàng)建了三個(gè)柵格項(xiàng)，其中元素A占據(jù)第2-4行，第1-2列；元素B占據(jù)第1行，第3列；元素C占據(jù)第3行，第3列。

總體來(lái)說(shuō)，柵格就是通過(guò)網(wǎng)格的行和列來(lái)劃分網(wǎng)頁(yè)布局，以達(dá)到良好的排版效果。CSS3的CSS Grid Layout和Bootstrap等其他框架中的柵格系統(tǒng)，都提供了豐富的API和屬性，讓我們可以創(chuàng)建出漂亮的網(wǎng)頁(yè)布局。