CSS Grid布局完全指南：构建复杂布局的利器

大家好，我是蔓蔓。CSS Grid是CSS中最强大的布局系统之一，它可以让我们轻松构建复杂的网格布局。今天我来和大家分享CSS Grid的完整用法。

什么是CSS Grid

Grid vs Flexbox

css 复制代码

/* Flexbox - 一维布局 */
.flex-container {
  display: flex;
  flex-direction: row;
}

/* Grid - 二维布局 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

基本概念

css 复制代码

.grid-container {
  display: grid;
  
  /* 定义列 */
  grid-template-columns: 200px 1fr 1fr;
  
  /* 定义行 */
  grid-template-rows: 100px auto 200px;
  
  /* 定义网格线名称 */
  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
  
  /* 网格间距 */
  gap: 20px; /* 等同于 grid-gap */
  
  /* 简写形式 */
  grid-template: 
    "header header header" 100px
    "sidebar main main" auto
    "footer footer footer" 50px
    / 200px 1fr 1fr;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

实战案例

响应式网格布局

css 复制代码

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

/* 复杂布局 */
.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  min-height: 100vh;
}

@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
}

等高卡片布局

css 复制代码

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

.card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-content {
  flex: 1; /* 填充剩余空间 */
}

.card-footer {
  margin-top: auto;
}

高级技巧

Grid与Flexbox结合

css 复制代码

/* Grid处理整体布局，Flexbox处理内部布局 */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.widget {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.widget-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

网格对齐

css 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  
  /* 水平对齐 */
  justify-items: start;    /* start | end | center | stretch */
  justify-content: center; /* start | end | center | stretch | space-between | space-around | space-evenly */
  
  /* 垂直对齐 */
  align-items: center;     /* start | end | center | stretch */
  align-content: space-between;
  
  /* 简写 */
  place-items: center center;    /* align-items + justify-items */
  place-content: center space-between; /* align-content + justify-content */
}

网格线定位

css 复制代码

.item {
  /* 使用网格线定位 */
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  
  /* 简写 */
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  
  /* span关键字 */
  grid-column: 1 / span 2;
  grid-row: span 3;
  
  /* 命名网格线 */
  grid-column: col-start / col-end;
}

性能优化

css 复制代码

/* 使用subgrid继承父网格 */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格列 */
}

/* 使用dense填充空白 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense; /* 填充空白区域 */
}

/* 避免过度嵌套 */
/* 好：扁平化结构 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 不好：嵌套grid */
.grid .grid {
  display: grid;
}

总结

CSS Grid是一个强大的布局工具，掌握它可以让你轻松构建各种复杂布局。记住：

Grid用于二维布局，Flexbox用于一维布局
使用repeat()和minmax()创建响应式网格
使用grid-template-areas简化布局定义
合理结合Grid和Flexbox

技术应当有温度，好的布局能让用户获得更好的体验。