aitty 的技术后花园

从零到一，记录每一次踩坑与成长。

Grid布局

grid：二维布局

基础使用

通过grid-template-columns和grid-template-rows来绘制布局
grid-template-columns水平方式的摆放
grid-template-rows垂直方式的摆放
比如：
grid-template-columns: 100px 100px 200px
grid-template-rows 100px 100px
绘制了两行三列的布局：
表示
第一个格子为：100px100px,位于第一行
第二个格子为：100px100px,位于第一行
第三个格子为：200px100px,位于第一行
第四个格子为：100px100px,位于第二行
第五个格子为：100px*100px,位于第二行

取值还能用%、fr、auto
%：相对于父 Grid 容器的可用空间的百分比。
fr：剩余空间分配比例
auto：
1.当单独使用时，它的宽度等于列中最宽内容的宽度；
2.当和 fr 一起使用时，它会被压缩到内容的最小宽度，剩余空间全部分配给 fr 列，这是实现侧边栏和圣杯布局的基础；
3.当在 minmax() 中使用时，minmax(auto, 1fr) 表示最小宽度是内容宽度，而 minmax(0, 1fr) 表示最小宽度是 0，后者才是真正的等宽布局。
4.它的优先级高于固定像素、百分比和 fr，是 Grid 布局中最灵活的单位。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 基础轨道</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      background: #eee;
      margin: 20px 0;
      gap: 4px;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 10px;
      text-align: center;
    }
    h3 { margin-bottom: 6px; }
  </style>
</head>
<body>
  <h2>1. 基础轨道：grid-template-columns / rows</h2>

  <h3>固定 px：100px 100px 200px / 100px 100px</h3>
  <div class="grid" style="grid-template-columns: 100px 100px 200px; grid-template-rows: 100px 100px;">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div>
  </div>

  <h3>百分比 %：33% 33% 34%</h3>
  <div class="grid" style="grid-template-columns: 33% 33% 34%; grid-template-rows: 60px;">
    <div>1</div><div>2</div><div>3</div>
  </div>

  <h3>弹性 fr：1fr 2fr 1fr</h3>
  <div class="grid" style="grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 60px;">
    <div>1fr</div><div>2fr</div><div>1fr</div>
  </div>

  <h3>自动 auto：auto 1fr auto</h3>
  <div class="grid" style="grid-template-columns: auto 1fr auto; grid-template-rows: 60px;">
    <div>短</div><div>1fr</div><div>较长的内容</div>
  </div>
</body>
</html>

K1

使用网格线编号定位

grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr
将表格划分为3*3的九宫格
a{
grid-row-start:1
grid-column-start:1
grid-row-end:3
grid-column-end:3
}
表示这个元素占了1245四个格子
可以写成grid-area: 1/1/3/3

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 线定位</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 80px 80px;
      gap: 6px;
      background: #eee;
      margin: 20px 0;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 10px;
      text-align: center;
    }
    .highlight { background: #ffcc80; }
  </style>
</head>
<body>
  <h2>2. 网格线定位</h2>
  <p>3列2行，让一个元素占据中间4个格子（行1-2，列2-3）</p>

  <h3>使用完整属性</h3>
  <div class="grid">
    <div>1</div>
    <div class="highlight" style="grid-row-start: 1; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4;">
      占2×2
    </div>
    <div>3</div>
  </div>

  <h3>使用 grid-area 简写：<code>grid-area: 1/2/3/4</code></h3>
  <div class="grid">
    <div>1</div>
    <div class="highlight" style="grid-area: 1/2/3/4;">占2×2</div>
    <div>3</div>
  </div>
</body>
</html>

K2
而最后一个元素溢出容器了

命名网格线

grid-template-columns:[left] 1fr [center] 1fr [right]
grid-template-rows:[top] 1fr [middle] 1fr [bottom]

grid-area:top/left/bottom/center表示占用了第一第三格子

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 命名网格线</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: [left] 1fr [center] 1fr [right];
      grid-template-rows: [top] 80px [middle] 80px [bottom];
      gap: 6px;
      background: #eee;
      margin: 20px 0;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 10px;
      text-align: center;
    }
    .highlight { background: #a5d6a7; }
  </style>
</head>
<body>
  <h2>3. 命名网格线</h2>
  <p>定义列线 [left] [center] [right]，行线 [top] [middle] [bottom]</p>

  <div class="grid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div class="highlight" style="grid-area: top / left / bottom / center;">
      第一列两行
    </div>
  </div>
  <p>👉 <code>grid-area: top/left/bottom/center</code> 占用行 top→bottom (两行)，列 left→center (第一列)，共 2 个格子。</p>
</body>
</html>

K3

命名网格区域

grid-template-columns:1fr 1fr
grid-template-rows:1fr 1fr 1fr
grid-template-areas:"header header" “aside main” "footer footer"

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 命名区域</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "aside  main"
        "footer footer";
      gap: 8px;
      background: #eee;
      min-height: 200px;
    }
    .grid div { padding: 12px; }
    .header { grid-area: header; background: #90caf9; }
    .aside  { grid-area: aside;  background: #a5d6a7; }
    .main   { grid-area: main;   background: #fff9c4; }
    .footer { grid-area: footer; background: #ffcc80; }
  </style>
</head>
<body>
  <h2>4. 命名网格区域 (grid-template-areas)</h2>
  <p>经典三行布局：header / aside+main / footer</p>
  <div class="grid">
    <div class="header">Header</div>
    <div class="aside">Aside</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

K4

间隔

水平间隔：grid-row-gap:10px
垂直间隔：grid-column-gap:20px

合并写法：grid-gap:10px 10px

合并写法：grid-gap:20px

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 间距</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: 100px 100px;
      grid-template-rows: 60px 60px;
      background: #eee;
      margin: 20px 0;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 10px;
      text-align: center;
    }
    h3 { margin-bottom: 6px; }
  </style>
</head>
<body>
  <h2>5. 间距：row-gap / column-gap / gap</h2>

  <h3>row-gap: 20px; column-gap: 10px;</h3>
  <div class="grid" style="row-gap: 20px; column-gap: 10px;">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

  <h3>gap: 20px 10px; (等同于上面)</h3>
  <div class="grid" style="gap: 20px 10px;">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

  <h3>gap: 20px; (行列相同)</h3>
  <div class="grid" style="gap: 20px;">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>
</body>
</html>

K5

行向/列向

jutify-items行对齐：stretch、start、end、center
align-items列对齐：stretch、start、end、center

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 项目对齐 (items)</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 80px;        /* 行高固定为 80px */
      background: #eee;
      gap: 6px;
      margin: 20px 0;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>6. justify-items（行向） &amp; align-items（列向）</h2>

  <h3>justify-items: center; align-items: stretch (默认)</h3>
  <div class="grid" style="justify-items: center;">
    <div>1</div><div>2</div><div>3</div>
  </div>

  <h3>justify-items: end; align-items: center</h3>
  <div class="grid" style="justify-items: end; align-items: center;">
    <div>1</div><div>2</div><div>3</div>
  </div>

  <h3>justify-items: start; align-items: end</h3>
  <div class="grid" style="justify-items: start; align-items: end;">
    <div>1</div><div>2</div><div>3</div>
  </div>
</body>
</html>

A6

单个元素的行向/列向

jutify-self某个子元素在对应区域行摆放方式：stretch、start、end、center
align-self某个子元素在对应区域列摆放方式：stretch、start、end、center

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 单独对齐 (self)</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px;
      background: #eee;
      gap: 6px;
      margin: 20px 0;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 8px;
      text-align: center;
    }
    .highlight { background: #ffcc80; }
  </style>
</head>
<body>
  <h2>7. justify-self / align-self（单个子项对齐）</h2>
  <p>容器默认 stretch，第二个子项单独设置对齐方式。</p>

  <div class="grid">
    <div>默认</div>
    <div class="highlight" style="justify-self: end; align-self: center;">
      end + center
    </div>
    <div>默认</div>
  </div>

  <div class="grid">
    <div>默认</div>
    <div class="highlight" style="justify-self: start; align-self: end;">
      start + end
    </div>
    <div>默认</div>
  </div>
</body>
</html>

K7

控制子元素在轴方向上的分布方式

jutify-content跟align-content，有点像align-content

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Grid 内容对齐 (content)</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; }
    .grid {
      display: grid;
      grid-template-columns: 100px 100px;
      grid-template-rows: 60px;
      width: 400px;
      height: 150px;
      background: #eee;
      gap: 6px;
      border: 2px dashed #999;
      margin: 20px 0;
    }
    .grid div {
      background: #90caf9;
      border: 1px solid #1565c0;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>8. justify-content / align-content（整体网格对齐）</h2>
  <p>容器大于轨道总和，控制整个网格在容器内的位置。</p>

  <h3>justify-content: center; align-content: center</h3>
  <div class="grid" style="justify-content: center; align-content: center;">
    <div>1</div><div>2</div>
  </div>

  <h3>justify-content: space-between; align-content: end</h3>
  <div class="grid" style="justify-content: space-between; align-content: end;">
    <div>1</div><div>2</div>
  </div>

  <h3>justify-content: end; align-content: start</h3>
  <div class="grid" style="justify-content: end; align-content: start;">
    <div>1</div><div>2</div>
  </div>
</body>
</html>

K8

posted @ 2026-05-31 16:44  aitty  阅读(14)  评论(0)    收藏  举报

© 2025 aitty | 写于博客园 · 冷静地热爱技术

博客首页 | 回到顶部