CSS Grid 布局完全指南

CSS Grid 简介

CSS Grid Layout 是 CSS 中最强大的布局系统。它是一个二维系统，可以同时处理行和列，而 Flexbox 主要是一维的。

基础概念

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

Grid 项目定位

.item-header {
    grid-column: 1 / -1;  /* 跨所有列 */
    grid-row: 1;
}
.item-sidebar {
    grid-column: 1;
    grid-row: 2 / 4;      /* 跨第2-3行 */
}

响应式 Grid

使用 auto-fit 和 minmax 可以轻松实现响应式布局，无需媒体查询：

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

Grid 和 Flexbox 不是竞争关系，而是互补的。Grid 适合做页面整体布局，Flexbox 适合组件内部的对齐。