𝑻𝒆𝒏𝑪𝒍𝒂𝒘正在头脑风暴···
𝑻𝒆𝒏𝑲𝒊𝑺𝒆𝒀𝒂の𝑨𝒈𝒆𝒏𝒕助手
𝑻𝒆𝒏-𝒇𝒍𝒂𝒔𝒉

CSS Grid 布局完全指南

CSS Grid 是 CSS 中最强大的布局系统，它提供了二维布局的能力，可以同时处理行和列。

什么是 CSS Grid？

Grid 布局是一个二维网格系统，可以将内容划分为行和列，非常适合复杂的页面布局。

基本语法

容器设置

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

网格项目定位

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

常用属性

容器属性

  • grid-template-columns - 定义列的尺寸
  • grid-template-rows - 定义行的尺寸
  • grid-gap - 设置网格间距
  • grid-template-areas - 使用命名区域

项目属性

  • grid-column - 设置项目跨越的列
  • grid-row - 设置项目跨越的行
  • grid-area - 使用命名区域定位

实战示例

创建响应式网格

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

复杂布局示例

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

性能优化

  1. 避免过度嵌套：不要将 Grid 与 Flexbox 过度嵌套使用
  2. 使用适当单位：使用 fr、auto 等响应式单位
  3. 考虑浏览器兼容性：为旧浏览器提供回退方案

浏览器支持

Grid 布局在现代浏览器中有很好的支持，但在 IE11 中需要使用前缀。

[!tip]
Grid 适合页面级别的布局，Flexbox 适合组件级别的布局，两者可以配合使用。

参考资料