網格布局是CSS3的新功能，它可以讓我們更加輕松地進行頁面布局，使布局更靈活。網格布局有兩種規劃方式：縱向和橫向。本篇文章，我們將會深入講解網格布局縱橫教學。

/* 創建一個容器 */
.container {
display: grid; /* 網格布局 */
}
/* 定義行和列 */
.container {
grid-template-rows: 50px 50px; /* 定義2行，每行高度為50像素 */
grid-template-columns: 100px 100px; /* 定義2列，每列寬度為100像素 */
}
/* 創建網格單元格 */
.item {
grid-row: 1 / 2; /* 設置該單元格占據的行數，這里設置為從第1行到第2行 */
grid-column: 1 / 2; /* 設置該單元格占據的列數，這里設置為從第1列到第2列 */
}
/* 合并多個單元格 */
.item {
grid-row: 1 / 3; /* 設置該單元格占據的行數，這里設置為從第1行到第3行 */
grid-column: 1 / 3; /* 設置該單元格占據的列數，這里設置為從第1列到第3列 */
}
/* 網格布局中的間距 */
.container {
grid-gap: 10px; /* 設置相鄰單元格之間的行間距和列間距，這里的間距設置為10像素 */
}

在網格布局中，我們可以使用以上的CSS代碼進行對容器、行、列、單元格的定義。我們還可以通過合并多個單元格，使網格布局更加靈活。此外，我們還可以通過設置網格布局中的間距，使頁面的視覺效果更加美觀。

網格布局在實際開發中的運用可以說是無所不能的，我們能夠通過網格布局輕松地進行頁面排版、設計響應式頁面等等，為我們的網頁布局提供了更大的便利性。在學習網格布局時，我們只需要掌握以上的縱橫教學，就可以輕松地進行頁面布局了。