在HTML頁面中，經常需要使用網格布局來組織和排列元素，而CSS Grid就是一種非常便捷和靈活的網格布局方式。CSS Grid可以幫助我們創建高度定制化的布局，使頁面更加精美和易于閱讀。本文將介紹CSS Grid中的多行多列網格布局。 CSS Grid的多行多列布局是基于網格模板(grid-template)來實現的。網格模板定義了網格的行和列數，以及每個單元格的大小和位置。網格模板使用CSS的repeat()函數來創建重復的網格模式。下面是一個示例代碼：

.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
justify-items: center;
align-items: center;
}

在上面的代碼中，我們使用repeat()函數定義了3行和4列網格，每個單元格的大小都是1等分。grid-gap屬性定義了單元格之間的間距。justify-items和align-items屬性定義了單元格內部的對齊方式，可以設置為center、start、end等值。 我們還可以使用grid-template-areas屬性來定義網格布局。grid-template-areas屬性可以創建自定義的網格模板，以便更好地組織和排列元素。下面是一個使用grid-template-areas屬性的示例代碼：

.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-template-areas:
"header header header header"
"menu content content content"
"menu content content content";
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.content {
grid-area: content;
}

在上面的代碼中，我們使用grid-template-areas屬性定義了一個3行4列的網格布局。其中，第一行包含一個命名為“header”的單元格。第二行包含一個命名為“menu”和三個命名為“content”的單元格。第三行也是包含一個命名為“menu”的單元格和三個命名為“content”的單元格。 在元素的CSS樣式中，我們使用grid-area屬性來指定元素所處的單元格位置。例如，header元素的grid-area屬性被設置為“header”，表明該元素位于第一行、第一列的單元格。 總之，CSS Grid的多行多列網格布局可以幫助我們輕松地創建自定義的網格模板，以便更好地組織和排列元素。我們可以使用repeat()函數、grid-gap屬性、justify-items和align-items屬性、grid-template-areas屬性等來創建各種不同樣式的網格布局。