CSS 柵格布局是一種常見的網頁布局方式，它可以幫助我們快速創建響應式網頁設計，讓網頁適應不同的設備和屏幕尺寸。在柵格布局中，我們可以使用圖片來補充網頁內容，讓網頁更加生動和有趣。

/* 創建柵格布局 */
.row {
display: flex;
flex-wrap: wrap;
}
.col {
width: calc(100% / 3);
}
/* 設置圖片大小和居中 */
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

以上代碼是創建一個柵格布局的示例。我們先創建了一個 .row 容器，它使用了 flex 布局和 flex-wrap 屬性，讓子元素在一行中水平排列，并自動換行。接著，我們創建了 .col 柵格列，它的寬度是父元素的三分之一。這樣，在一個 .row 區域中，我們就可以創建三列等寬的柵格。

接下來，我們使用 img 標簽來插入圖片。在 CSS 中，我們可以通過 max-width 和 height:auto 屬性來保持圖片比例，同時讓圖片尺寸適應不同的屏幕尺寸。我們還使用了 display:block 和 margin:auto 屬性來讓圖片水平居中顯示。

總之，使用 CSS 柵格布局和圖片設置，可以讓我們輕松地創建響應式網頁，讓網頁內容有條不紊地呈現在不同的屏幕上。這是一個非常強大和實用的工具，可以幫助我們提高工作效率和網頁設計質量。