CSS Grid高级布局指南

CSS Grid是现代网页布局中最强大的工具之一。本文将深入介绍CSS Grid的高级用法，帮助你掌握这一重要的布局技术。

什么是CSS Grid

CSS Grid是一个二维布局系统，它可以同时处理行和列。与Flexbox的一维布局不同，Grid可以让你在两个方向上控制元素的排列。

基础概念

网格容器

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
}

网格项

.item {
    grid-column: 1 / 3;  /* 跨越2列 */
    grid-row: 1 / 2;     /* 占据第1行 */
}

高级技巧

响应式网格

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

命名网格区域

.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

实用案例

• 圣杯布局
• 卡片瀑布流
• 仪表盘布局
• 图片画廊

总结

CSS Grid是构建复杂布局的理想选择。结合Flexbox使用，可以覆盖几乎所有的布局需求。