菜鸟教程
Reference CSS reference

CSS grid 参考

CSS Grid 是二维布局模型，适合同时控制行和列，例如卡片列表、页面布局、仪表盘和图文排版。

语法

css 
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

常用属性

属性 说明
display: grid 启用网格布局
grid-template-columns 定义列轨道
grid-template-rows 定义行轨道
gap 行列间距
grid-column 控制项目跨列
grid-row 控制项目跨行
grid-template-areas 命名区域布局

可运行演示

在线代码演示
源码 
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>grid 卡片演示</title>
    <style>
      body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background: #f8fafc; color: #0f172a; }
      .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; max-width: 760px; margin: 0 auto; }
      article { min-height: 120px; padding: 16px; border: 1px solid #dbeafe; border-radius: 12px; background: #fff; }
      h2 { margin: 0 0 8px; font-size: 18px; }
      p { margin: 0; color: #475569; }
    </style>
  </head>
  <body>
    <section class="cards">
      <article><h2>HTML</h2><p>结构</p></article>
      <article><h2>CSS</h2><p>布局</p></article>
      <article><h2>JS</h2><p>交互</p></article>
    </section>
  </body>
</html>

常见错误

  • 把 Grid 当成表格语义；布局用 Grid，表格数据仍应使用 <table>。
  • auto-fit 和 auto-fill 混用前要确认空轨道是否需要保留。
  • 固定列宽过多，移动端容易横向溢出。

相关内容

相关内容