CSS排列6（CSS Grid Layout）是CSS的一個新特性，它讓網頁布局變得更加靈活和直觀。通過CSS排列6，我們可以輕松地創建復雜的網格式布局，而無需編寫復雜的CSS代碼。

.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
}
.item {
background-color: #eee;
padding: 10px;
}
.item:nth-child(1) {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
.item:nth-child(2) {
grid-row: 1 / 2;
grid-column: 3 / 5;
}
.item:nth-child(3) {
grid-row: 1 / 4;
grid-column: 5 / 6;
}
.item:nth-child(4) {
grid-row: 2 / 4;
grid-column: 3 / 4;
}
.item:nth-child(5) {
grid-row: 3 / 4;
grid-column: 4 / 5;
}
.item:nth-child(6) {
grid-row: 2 / 4;
grid-column: 2 / 3;
}

在上面的代碼中，我們首先定義了一個包含六個子元素的容器。通過設置display為grid，我們將容器轉換為網格布局。接著，通過grid-template-columns和grid-template-rows指定了網格的列數和行數，并使用repeat函數和1fr單位來進行設置。同時，通過gap屬性設置了每個子元素之間的間距。

接下來，我們為每個子元素設置了不同的網格位置。其中，grid-row和grid-column屬性分別指定了子元素所在的行數和列數，可以使用數字、auto、span和fr等單位進行設置。例如，1 / 3表示從第1行到第3行，3 / 5表示從第3列到第5列。

通過CSS排列6，我們可以輕松地創建網格布局，而無需編寫復雜的CSS代碼。同時，網格布局也為響應式設計提供了更加靈活的解決方案，可以根據不同的屏幕尺寸進行適配。