CSS Grid 页面布局

本文最后更新于:2021年8月30日 下午

背景

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

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

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

示例

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

中后台基本布局

中后台基本布局

<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

纵向布局

纵向布局

<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

<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

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

如下图展示一个图片列表

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

<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)

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

可以很容易实现居中布局

1630307731953

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

真实案例

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

1629475754345

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

1629475763454