乐趣区

关于css3:CSS-Grid-网格布局实现自适应9宫格

jiezi

援用阮一峰老师话说网格布局（Grid）是最弱小的 CSS 布局计划。CSS Grid 网格布局教程

它将网页划分成一个个网格，能够任意组合不同的网格，做出各种各样的布局。以前，只能通过简单的 CSS 框架达到的成果，当初浏览器内置了。

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有肯定的相似性，都能够指定容器外部多个我的项目的地位。然而，它们也存在重大区别。

Flex 布局是轴线布局，只能指定 ” 我的项目 ” 针对轴线的地位，能够看作是一维布局。Grid 布局则是将容器划分成 ” 行 ” 和 ” 列 ”，产生单元格，而后指定 ” 我的项目所在 ” 的单元格，能够看作是二维布局。Grid 布局远比 Flex 布局弱小。

上面我给大家分享一个用 grid 实现的自适应 9 宫格，格子大小自定义，距离不变，以前都是用 dom 计算，好蠢。
须要依据本人的布局个数，来计算每个格子大小，次要是每个格子的宽高减去相应行和列距离的大小，以九宫格为列，有 3 行 3 列，有行间距 2 24px, 有列间距 2 24px，每个格子的宽高都要减去 48px / 3。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>grid</title>
</head>

<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>


<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box
  }

  body {
    height: 100vh;
    padding: 20px;
  }

  .container {
    width: 100%;
    height: 100%;
    display: grid;
    /* 行间距 */
    grid-row-gap: 24px;
    /* 列间距 */
    grid-column-gap: 24px;
    /* 每 3 行有 2 个行间距，所以每个格子的宽高都要减去 (24*2) / 3 */
    grid-template-columns: repeat(3, calc(33.33% - 16px));
    grid-template-rows: repeat(3, calc(33.33% - 16px));
    overflow: hidden;
  }

  .item {background: #33a8a5;}
</style>

</html>

退出移动版