CSS Grid布局实战技巧

CSS Grid布局实战技巧

CSS Grid是现代Web布局最强大的工具之一，它可以让开发者轻松实现复杂的二维布局。与Flexbox的一维布局不同，Grid可以同时控制行和列，非常适合页面整体布局和复杂组件布局。本文将通过实际案例介绍Grid布局的核心技巧。

一、Grid基础概念

/* 创建Grid容器 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  /* 或者分别设置行间距和列间距 */
  row-gap: 20px;
  column-gap: 20px;
}

/* 常用的列定义方式 */
.grid-1 { grid-template-columns: repeat(3, 1fr); }        /* 等宽三列 */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* 响应式 */
.grid-3 { grid-template-columns: 200px repeat(2, 1fr); }  /* 侧边栏+内容区 */

二、经典页面布局

/* 圣杯布局 */
.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   sidebar"
    "footer footer footer";
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: 60px 1fr 40px;
  min-height: 100vh;
}

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

/* 响应式：小屏幕时变为单列 */
@media (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

三、对齐与间距

/* 容器级对齐 */
.container {
  place-items: center;      /* 水平和垂直居中 */
  place-content: center;     /* 所有内容居中 */
  align-content: space-between;  /* 垂直均匀分布 */
  justify-content: space-around; /* 水平均匀分布 */
}

/* 单个子项对齐 */
.item {
  place-self: end center;  /* 垂直底部，水平居中 */
}

四、实用布局模式

/* 瀑布流布局（借助masonry） */
.masonry {
  grid-template-rows: masonry;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

/* 卡片网格 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* 固定侧边栏+滚动内容 */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  height: 100vh;
}
.sidebar { overflow-y: auto; }
.content { overflow-y: auto; }

CSS Grid让复杂布局变得简单直观。结合Flexbox处理一维布局、Grid处理二维布局的策略，几乎可以实现任何设计稿中的布局效果。