Grid 网格布局 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 8 关

进度 0%

第 8 关：Grid 网格布局

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 8 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

Grid 网格布局
强大的二维布局系统

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# Grid 网格布局
# 强大的二维布局系统

def demo_grid():
    print("=== Grid 网格布局 ===\n")
    
    print("3列 2行 网格:")
    print("┌──────────┬──────────┬──────────┐")
    print("│ Header (跨 3 列)               │")
    print("├──────────┼──────────┼──────────┤")
    print("│ Sidebar  │ Main     │ Aside    │")
    print("│          │ Content  │          │")
    print("├──────────┴──────────┴──────────┤")
    print("│ Footer (跨 3 列)               │")
    print("└────────────────────────────────┘")

demo_grid()

css = """
/* 基础网格 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 等分列 */
    grid-template-rows: auto;
    gap: 16px;
}

/* 经典页面布局 */
.page-layout {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "sidebar main    aside"
        "footer  footer  footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
.page-layout .header  { grid-area: header; }
.page-layout .sidebar { grid-area: sidebar; }
.page-layout .main    { grid-area: main; }
.page-layout .aside   { grid-area: aside; }
.page-layout .footer  { grid-area: footer; }

/* 响应式卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
"""
print("\n" + css)

# Grid vs Flexbox
print("--- Grid vs Flexbox ---")
print("  Grid: 二维布局（行+列），适合页面整体布局")
print("  Flexbox: 一维布局（行或列），适合组件内部排列")
print("  实际开发中通常两者结合使用")

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 8 关：Grid 网格布局

HTML/CSS · 入门 · 《HTML & CSS 基础》

Grid 网格布局
强大的二维布局系统

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。