CSS Grid布局：从基础到高级

基础知识

1. 定义网格容器

首先你需要一个容器来应用CSS Grid：

<div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>

在CSS中，你可以定义这个容器为一个网格容器：

.grid-container {
    display: grid;
}

2. 定义列和行

你可以使用 grid-template-columns 和 grid-template-rows 来定义列和行：

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px; /* 三列，每列100px */
    grid-template-rows: 100px 100px;          /* 两行，每行100px */
}

3. 放置网格项

你可以使用 grid-column 和 grid-row 属性来放置网格项：

.grid-item {
    background-color: lightblue;
    border: 1px solid #333;
    text-align: center;
    padding: 20px;
}

.grid-item:nth-child(1) {
    grid-column: 1 / 3;  /* 从第1列开始，到第3列结束 */
    grid-row: 1;         /* 第1行 */
}

.grid-item:nth-child(3) {
    grid-column: 2;      /* 第2列 */
    grid-row: 2;         /* 第2行 */
}

高级应用

1. 自动布局

你可以使用 repeat 函数和 auto 关键字来自动定义列和行：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列，每列分配相等的空间 */
    grid-auto-rows: minmax(100px, auto);   /* 行的最小高度为100px，高度自动调整 */
}

2. 网格间距

使用 grid-gap 或者分别使用 row-gap 和 column-gap 来定义网格间距：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px; /* 行间距和列间距均为10px */
}

3. 网格区域

你可以使用 grid-template-areas 来定义网格区域，并使用 grid-area 来放置项目：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header"
        "main main sidebar"
        "footer footer footer";
}

.grid-item:nth-child(1) {
    grid-area: header;
}

.grid-item:nth-child(2) {
    grid-area: main;
}

.grid-item:nth-child(3) {
    grid-area: sidebar;
}

.grid-item:nth-child(4) {
    grid-area: footer;
}

4. 嵌套网格

你可以在网格项内再定义一个网格容器，创建嵌套网格布局：

<div class="grid-container">
    <div class="grid-item nested-grid">
        <div class="nested-item">Nested 1</div>
        <div class="nested-item">Nested 2</div>
    </div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
</div>

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}

.nested-item {
    background-color: lightgreen;
    padding: 10px;
    border: 1px solid #333;
}

总结

CSS Grid提供了强大的布局能力，从基础的行列定义到高级的自动布局和嵌套网格，都可以轻松实现。通过掌握这些技术，你可以创建复杂而灵活的网页布局。如果你有任何具体的问题或者需要示例，随时告诉我！