所謂的CSS樣式表九宮格，是一種經典的CSS布局方式。它能夠讓我們輕松實現頁面的自適應布局，同時兼顧美觀和性能，是我們前端工程師必備的技能之一。

/*********************************************************************/
/*                    九宮格布局方案                                 */
/*                                                                   */
/*          +----+--------------+--------------+                   */
/*          |    |      1       |       2      |                   */
/*          +----+--------------+--------------+                   */
/*          |  3 |              |              |                   */
/*          +----|      4       |       5      |                   */
/*          |  6 |              |              |                   */
/*          +----+--------------+--------------+                   */
/*                                                                   */
/*                                                                   */
/*   1、2、3、4、5、6代表頁面中的各個模塊                             */
/*                                                                   */
/*********************************************************************/
/*左上角模塊*/
.grid-item1{
position:absolute;
top:0;
left:0;
width:33.33%;
height:33.33%;
}
/*右上角模塊*/
.grid-item2{
position:absolute;
top:0;
right:0;
width:33.33%;
height:33.33%;
}
/*左中角模塊*/
.grid-item3{
position:absolute;
top:33.34%;
left:0;
width:33.33%;
height:33.33%;
}
/*中間大模塊*/
.grid-item4{
position:absolute;
top:33.34%;
left:33.34%;
width:33.33%;
height:66.66%;
}
/*右中角模塊*/
.grid-item5{
position:absolute;
top:33.34%;
right:0;
width:33.33%;
height:33.33%;
}
/*左下角模塊*/
.grid-item6{
position:absolute;
bottom:0;
left:0;
width:33.33%;
height:33.33%;
}

上面的CSS代碼展示了一個最常見的九宮格布局方案。我們只需要將HTML頁面中的各個模塊，分別命名為grid-item1、grid-item2、grid-item3、grid-item4、grid-item5、grid-item6即可。這樣，就能夠輕松實現一個高效美觀的頁面布局。