前端CSS Grid 布局示例详解

CSS Grid 布局详解

一、基础概念

1. 网格容器
   通过display: grid声明容器，其直接子元素自动成为网格项目

   .container {display: grid;grid-template-columns: 200px 1fr 300px; /* 3列布局 */gap: 20px; /* 项目间距 */
   }
   

2. 常用属性

   • grid-template-columns：定义列宽
     repeat(3, 1fr)表示3个等宽列
   • grid-template-rows：定义行高
   • grid-auto-rows: 自动生成行的高度
   • gap: 行列间距（替代旧的grid-gap）

二、实战示例：响应式布局

<div class="container"><header>Header</header><aside>Sidebar</aside><main>Main Content</main><footer>Footer</footer>
</div>

.container {display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 80px 1fr 100px;grid-template-areas:"header header""sidebar main""footer footer";min-height: 100vh;gap: 15px;
}header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }/* 移动端适配 */
@media (max-width: 768px) {.container {grid-template-columns: 1fr;grid-template-areas:"header""main""sidebar""footer";}
}

三、关键特性解析

1. fr单位
   分数单位，按比例分配剩余空间
   grid-template-columns: 1fr 2fr → 第二列宽度是首列的2倍

2. 网格线定位
   通过行号/列号精确定位：

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

3. 自动填充
   repeat(auto-fill, minmax(250px, 1fr))
   根据容器宽度自动创建尽可能多的250px列

四、最佳实践

1. 优先使用grid-template-areas提高代码可读性
2. 结合minmax()函数实现灵活尺寸：

   grid-template-columns: minmax(200px, 300px) 1fr;
   

3. 使用auto-fit/auto-fill实现响应式列数调整

五、浏览器支持

现代浏览器支持率超过95%，对于需要兼容IE的场景建议配合autoprefixer使用。可通过特性查询增强兼容性：

@supports (display: grid) {/* Grid专属样式 */
}