CSS Grid布局完全指南：从入门到精通的响应式设计实战

❌ Float布局: 清除浮动复杂,高度塌陷
❌ Position定位: 脱离文档流,难以维护
❌ Table布局: 语义化差,灵活性低
❌ Flexbox: 一维布局,二维场景受限

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

.grid-container {
    display: grid; /* 启用Grid布局 */
    grid-template-columns: repeat(2, 1fr); /* 2列等宽 */
    grid-template-rows: repeat(2, 100px); /* 2行等高 */
    gap: 10px; /* 间距 */
}
.grid-item {
    background: #3498db;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 固定尺寸 */
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 100px;
/* 弹性尺寸(fr单位) */
grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的2倍 */
/* 自动适应 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 混合使用 */
grid-template-columns: 200px 1fr 200px; /* 两侧固定,中间自适应 */

/* 统一间距 */
gap: 20px;
/* 分别设置行列间距 */
row-gap: 10px;
column-gap: 20px;
/* 旧版语法(兼容) */
grid-gap: 10px 20px;

.grid-item {
    /* 方法1: 使用网格线 */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    /* 简写 */
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    /* 方法2: 使用网格区域 */
    grid-area: header; /* 对应grid-template-areas中定义的区域 */
}

.holy-grail {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 20px;
    padding: 20px;
}
.stat-card {
    grid-column: span 1;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.chart-large {
    grid-column: span 2;
    grid-row: span 2;
}
.chart-small {
    grid-column: span 2;
}

/* Grid负责整体布局 */
.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
}
/* Flexbox负责组件内部对齐 */
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.container {
    display: grid;
    gap: 20px;
}
/* 移动端: 单列 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}
/* 平板: 2列 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* 桌面: 3列 */
@media (min-width: 1025px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.asymmetric {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}
.featured {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* 占据两行 */
}
.sidebar {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.extra {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* 使用@supports检测 */
@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
@supports not (display: grid) {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .item {
        flex: 1 1 300px;
    }
}

/* ✅ 推荐: 使用fr单位 */
grid-template-columns: 1fr 2fr 1fr;
/* ❌ 避免: 过度嵌套Grid */
.grid > .grid > .grid { /* 性能差 */ }
/* ✅ 推荐: 合理使用gap */
gap: 20px; /* 比margin更优 */
/* ✅ 推荐: 命名网格区域 */
grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";