CSS Grid 布局完全指南

CSS Grid 是现代网页布局的强大工具，它提供了二维布局的能力，让复杂的网页布局变得简单而灵活。

基本概念

Grid 布局基于网格容器和网格项目：

                    css
                    
                

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

网格容器 vs 网格项目

网格容器（Grid Container）：设置 display: grid 的元素
网格项目（Grid Items）：网格容器的直接子元素

网格模板属性

grid-template-columns

定义列的大小和数量：

                    css
                    
                

                .container {
  /* 固定宽度 */
  grid-template-columns: 200px 200px 200px;
  
  /* 使用 fr 单位（分数） */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* 混合使用 */
  grid-template-columns: 200px 1fr 2fr;
  
  /* 使用 repeat() 函数 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
            

grid-template-rows

定义行的大小：

                    css
                    
                .container {
  grid-template-rows: 100px 200px 100px;
  grid-template-rows: repeat(3, minmax(100px, auto));
}

grid-template-areas

使用命名区域创建布局：

                    css
                    
                

                .container {
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
            

网格间距

gap 属性

                    css
                    
                

                .container {
  /* 行和列间距相同 */
  gap: 20px;
  
  /* 分别设置行和列间距 */
  row-gap: 20px;
  column-gap: 30px;
  
  /* 简写形式 */
  gap: 20px 30px; /* 行间距 列间距 */
}
            

网格线定位

使用网格线编号

                    css
                    
                

                .item {
  /* 从第1条线到第3条线 */
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  
  /* 简写形式 */
  grid-column: 1 / span 2; /* 从第1条线开始，跨越2个网格 */
}
            

使用网格线名称

                    css
                    
                

                .container {
  grid-template-columns: [start] 1fr [middle] 1fr [end];
  grid-template-rows: [top] 100px [content] auto [bottom];
}

.item {
  grid-column: start / end;
  grid-row: top / bottom;
}
            

对齐和分布

容器对齐

                    css
                    
                

                .container {
  /* 主轴对齐 */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 交叉轴对齐 */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 项目对齐 */
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
            

项目对齐

                    css
                    
                .item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

响应式设计

自适应网格

                    css
                    
                .container {
  /* 自动适应容器宽度 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  
  /* 自动填充，可能创建空列 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

媒体查询结合

                    css
                    
                

                .container {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
            

实用示例

卡片网格

                    css
                    
                

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

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

圣杯布局

                    css
                    
                

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

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
            

照片墙

                    css
                    
                

                .photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 某些照片占据更多空间 */
.photo.featured {
  grid-column: span 2;
  grid-row: span 2;
}
            

高级技巧

隐式网格

                    css
                    
                

                .container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* 隐式行的高度 */
  grid-auto-columns: 150px; /* 隐式列的宽度 */
}
            

网格流方向

                    css
                    
                

                .container {
  grid-auto-flow: row; /* 默认：按行填充 */
  grid-auto-flow: column; /* 按列填充 */
  grid-auto-flow: dense; /* 密集填充，尝试填充空隙 */
}
            

嵌套网格

                    css
                    
                

                .outer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.inner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
            

浏览器支持

CSS Grid 在现代浏览器中有很好的支持：

Chrome 57+
Firefox 52+
Safari 10.1+
Edge 16+

最佳实践

使用语义化的网格区域名称
优先使用 fr 单位进行弹性布局
结合 minmax() 创建响应式网格
使用 gap 而不是 margin 来设置间距
考虑使用 CSS Grid 和 Flexbox 的组合

CSS Grid 为现代网页布局提供了强大而灵活的解决方案，掌握这些概念和技巧将大大提升您的布局能力。