CSS3的彈性盒子（Flexbox）布局，是CSS3新引入的盒子模型，它可以更方便、快捷地實現頁面布局。而其中的彈性盒子柵格系統，則進一步增強了彈性盒子的實用性，實現了響應式布局的目的。

在CSS3中，我們可以通過display屬性來定義一個元素應該以什么樣的方式顯示。在Flexbox模型中，我們將display設置為flex或inline-flex，即可將這個元素定義為一個彈性盒。接下來，我們需要針對這個彈性盒內部的項目進行布局。

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
margin: 10px;
}

在柵格系統中，我們將定義一系列的柵格列來實現響應式的頁面布局。在代碼中，我們將每一個柵格列定義為一個.item元素，并將它們包含在一個.container元素中。這個.container元素則設定為一個flex彈性盒，并使用屬性flex-wrap來控制柵格列的折行。

接下來，我們需要對每一個柵格列進行具體的設定。在代碼中，我們將每一個.item元素的flex設為1，這樣它們就會等分容器的寬度，并自動排列在一行中。同時，為了控制柵格列之間的間隔，我們還需要在.item元素中設置合適的margin值。

在實踐中，我們還可以根據不同的設備尺寸，使用媒體查詢來調整彈性盒柵格系統的布局。例如，在小尺寸設備上，我們可以將柵格列的寬度設定為100%；而在大尺寸設備上，則可以將它們設定為等分屏幕寬度的1/4或1/3等等。

總之，使用CSS3彈性盒子柵格系統，我們可以快速、方便地實現響應式布局，優化頁面的顯示效果，提高用戶的體驗感。