CSS Grid 页面布局

本文最后更新于：2021年8月30日 早上

背景

grid 可视化布局, css grid 完整指南

早就知道 css grid 布局非常强大，但之前由于兼容性问题一直没有机会尝试，近来在生产环境中大规模尝试使用它，并尝试在 react 中进行封装：在 react 中优雅的使用 grid 实现页面布局，于此记录一下各种常见布局的 grid 实现。

附：grid 真的是一个非常强大自适应布局系统。

示例

注：以下示例均默认引用了 Normalize.css

中后台基本布局

中后台基本布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<body>
  <style>
    html,
    body,
    .container {
      height: 100%;
    }

    .container {
      display: grid;
      /* 定义行和列 */
      grid-template-columns: 300px 1fr;
      grid-template-rows: auto 1fr;
      /* 定义布局的地图，未设定 area 则默认堆叠 */
      grid-template-areas: 'header header';
    }
    .header {
      grid-area: header;
    }
    .container > * {
      border: solid 1px red;
    }
  </style>
  <div class="container">
    <header class="header">header</header>
    <section>sidebar</section>
    <section>content</section>
  </div>
</body>

中后台基本布局.html

纵向布局

纵向布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
  <style>
    html,
    body,
    .container {
      height: 100%;
    }

    .container {
      display: grid;
      /* 下面这行指定了
        第一行按照内容自适应高度
        第二行占有剩余高度
         */
      grid-template-rows: auto 1fr;
    }

    .container > * {
      border: solid 1px red;
    }
  </style>
  <div class="container">
    <header>header</header>
    <section>content</section>
  </div>
</body>

纵向布局.html

模拟 flex margin-left 或 margin-right

模拟 flex margin-left 或 margin-right

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <style>
    .container {
      display: grid;
      /* 下面两行是关键 */
      grid-template-columns: auto 1fr auto;
      justify-items: end;
    }

    .container > * {
      border: solid 1px red;
    }
  </style>
  <header class="container">
    <img src="https://picsum.photos/20" alt="logo" />
    <div>用户名</div>
    <div>消息</div>
  </header>
</body>

模拟 flex margin-left 或 margin-right.html

根据内容自适应贴靠在一边

如下图展示一个图片列表

根据内容自适应贴靠在一边

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <style>
    .container {
      display: grid;
      grid-template-columns: auto auto;
      /* 下面一行是关键，效果类似于 flex-start */
      justify-content: start;
      grid-gap: 8px;
    }
  </style>
  <section class="container">
    <img src="https://picsum.photos/seed/1/100" />
    <img src="https://picsum.photos/seed/2/100" />
    <img src="https://picsum.photos/seed/3/100" />
    <img src="https://picsum.photos/seed/4/100" />
    <img src="https://picsum.photos/seed/5/100" />
    <img src="https://picsum.photos/seed/6/100" />
  </section>
</body>

根据内容自适应贴靠在一边.html

针对任意数量的元素水平布局（替代 flex）

1
2
3
4
5
.container {
  display: grid;
  /* 主要是这个属性 */
  grid-auto-flow: column;
}

可以很容易实现居中布局

1630307731953

针对任意数量的元素水平布局.html

真实案例

嵌套的 grid 布局，外层处理横向布局，内层用以垂直对齐图片和文字。

1629475754345

纵向布局，内容区域自适应撑高容器到 100%。

1629475763454

前端 > CSS
#css #grid
CSS Grid 页面布局
https://blog.rxliuli.com/p/51b60e96b1d542fda593fed9ae3bd9a3/
作者
rxliuli
发布于
2020年12月9日
许可协议