CSS 六宮格是一種常用于網頁設計的布局方式，可以將網頁內容劃分為六個等寬區域，并在其中放置不同的元素，從而實現多樣化的網頁布局。下面將介紹如何用 CSS 實現六宮格。

.grid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.grid >div {
flex-basis: 33.33%;
height: 0;
padding-bottom: 33.33%;
position: relative;
}
.grid >div:nth-child(odd) {
padding-right: 10px;
}
.grid >div:nth-child(even) {
padding-left: 10px;
}
.grid >div >div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

以上代碼是實現六宮格的關鍵代碼，其中，.grid 是六宮格的外框容器，通過 display: flex; 實現元素的水平排列。.grid >div 則是六個格子，通過 flex-basis 實現等寬。padding-bottom 和 height 的值都為 33.33% 實現了等高。而通過 padding-right 和 padding-left 的設置，分別讓第 1、3、5 個格子左側和第 2、4、6 個格子右側發生了 10px 的距離。

最后通過 .grid >div >div 選擇器來控制格子中放置的內容，在這里可以按照設計需求的不同，自由地放置圖片、文字等元素，以實現多樣化的布局效果。