Grid 布局-容器项

标签：容器布局 100px 网格 1fr gap grid template Grid

grid 网格布局是一个用于web的二维布局系统, 多行多列.

flex 单行布局则更倾向于一维布局, 一行或者一列.

Grid 重点

只是用表格进行排版哈, 横向内容直接无关联哦.

容器项	子项	布局应用
定义网格及 fr 单位	显式与隐式网格	叠加布局
合并网格及命名	基于线的元素放置	多种组合排列布局
网格间隙及简写	子项对齐方式	栅格布局
网格对齐方式及简写	repeat() 与 minmax()	容器自适应行列布局

Grid 容器项属性

因为是二维的, 这个属性的数量就比 flex 要多很多哦, 但其实真正也没有常用那没多啦.

A	B
justify-items	grid-template-rows
align-items	grid-template-columns
place-items	grai-template-areas
justify-content	grid-template
align-content	grid-row-gap
place-content	grid-column-gap
grid-auto-flow	grid-gap
grid-auto-rows	/
grid-auto-columns	/

定义网格和 fr 单位

这个 grid 和表格 table 其实有点相像.

都是有行 row, 有列 column, 有单元格 cell, 有间隙 gap, 有合并单元格区域 area.

定义网格的行和列维度, 及其网格线名称, 轨道尺寸大小等, 主要用这两个属性:

grid-template-rows
grid-template-columns

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-template</title>
  <style>
    .main {
      width: 300px;
      height: 200px;
      background-color: pink;

      /* 用 display 声明容器项是 grid */
      display: grid;
      /* 声明行列 */
      /* grid-template-rows: 100px 100px 100px; */
      /* grid-template-columns: 100px 100px 100px; */

      /* grid-template-rows: 50px 20% auto; */
      /* grid-template-columns: 50px 50px; */

      /* fr 分配空间, 类似 flex 的 1, 2, 这种 */
      grid-template-rows: 2fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
    }

    .main div {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <!-- <div>7</div>
    <div>8</div>
    <div>9</div> -->
  </div>
</body>
</html>

合并网格及命名

grid-template-area 会以命名方式的形式定义网格区域, 即 合并单元格.

在子项上需要配合 grid-area 进行使用.

grid-template-rows + grid-template-columns
grid-template-areas
grid-area 子项引用
grid-template = 行列 + 合并区域

实战了一下, 确实通过 grid-template 简写的方式比较高效简洁哦:

grid-template: 
      "a1 a1 a2" 1fr 
      "a1 a1 a2" 1fr 
      "a3 a3 a3" 1fr 
      / 1fr 1fr 1fr;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-template-area</title>
  <style>
    .main {
      width: 300px;
      height: 200px;
      background-color: pink;

      display: grid;

      /* grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;

      /* 自定义区域名字进行合并 */
      /* grid-template-areas: 
      "a1 a1 a2"
      "a1 a1 a2"
      "a3 a3 a3"; */

      /* grid-template 简写: 右边的 fr 表示行, 最下边的 '/ + fr' 表示列 */
      grid-template: 
      "a1 a1 a2" 1fr 
      "a1 a1 a2" 1fr 
      "a3 a3 a3" 1fr 
      / 1fr 1fr 1fr;

    }

    .main div {
      background-color: pink;
      box-sizing: border-box;
      border: 1px solid #000;
    }

    /* 子项上去使用 */
    .main div:nth-of-type(1) {
      grid-area: a1;
    }
    .main div:nth-of-type(2) {
      grid-area: a2;
    }
    .main div:nth-of-type(3) {
      grid-area: a3;
    }

  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

网格间隙及简写

主要是在容器项设置子项行列间的间隙大小, 主要这三个, grid-row-gap, grid-column-gap, grid-gap 单位了兼容其他容器的布局方式, 比如 flex, 因此我们更推荐使用时将 grid 前缀去掉, 即变成了:

row-gap
column-gap
gap

不论是 grid 还是 flex, 直接用 gap: xx px; 即设置好行列间隙啦.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>grid-gap</title>
  <style>
    .main {
      width: 300px;
      height: 200px;
      background-color: pink;
      display: grid;

      grid-template: 
      "a1 a1 a2" 1fr 
      "a1 a1 a2" 1fr 
      "a3 a3 a3" 1fr 
      / 1fr 1fr 1fr;

      /* 设置行列间距 */
      /* row-gap: 20px;
      column-gap: 30px; */

      /* gap 推荐复合写法, 先行后列 */
      gap: 10px 20px;
      
    }

    .main div {
      background-color: pink;
      box-sizing: border-box;
      border: 1px solid #000;
    }

    /* 子项上去使用 */
    .main div:nth-of-type(1) {
      grid-area: a1;
    }
    .main div:nth-of-type(2) {
      grid-area: a2;
    }
    .main div:nth-of-type(3) {
      grid-area: a3;
    }

    .main2 {
      /* 不给高度让它换行自动撑开 */
      width: 300px;
      background: pink;
      display: flex;
      flex-wrap: wrap;

      /* 和 grid 一样, 这个 gap 是通用的 */
      /* row-gap: 10px;
      column-gap: 20px; */

      /* 1个值写法, 给行列都设置10的间隙 */
      gap: 10px;
    }

    .main2 div {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
    
  <!-- 和 grid 一样, 这个 gap属性 是通用的 --> 
  <div class="main2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>
</html>

网格对齐方式及简写

和 flex 对齐方式类似, 也是通过在容器项中, 设置在自行网格中的对齐方式来进行排版控制, 默认值是 strench 即是拉伸的, 它是设置每个子项相对自身区域的比如左对齐, 居中, 靠上/靠下等.

容器尺寸小于网格区域尺寸时, 才能看到效果

justify-items
align-items
place-items

也是同上面的 gap 一样, 只要记住它是相对于子项自己区域的排列就好啦, 复合写法测一下就行不用记.

 /* 先垂直, 再水平, 不过不用记, 测试一把就知道啦 */
 place-items: end center;

还有与之相对于的三个属性, 它是设置整个网格对齐方式, 如左对齐, 居中, 靠上/靠下等.

容器尺寸大于元素尺寸时, 才能看到效果

justify-content
align-content
place-content

同理, 也是只要记住它是相对于整个网格的位置排列 就好啦, 复合写法测一下就行不用记.

/* 先上下, 后左右 不过不用记, 测试一把就知道啦 */
  place-content: start end;

当容器尺寸 <= 网格区域尺寸时, place-items:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>place-items</title>
  <style>
    .main {
      width: 300px;
      height: 200px;
      background-color: pink;

      display: grid;
      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;

      /* 当子项尺寸小于分配区域时, 相对于自身分配与的对齐 */
      /* start, center, end */
      /* justify-items: center;
      align-items: start; */

      /* 先垂直, 再水平, 不过不用记, 测试一把就知道啦 */
      place-items: end center;
    }

    .main div {
      /* 当子项尺寸小于分配区域时, 默认就会填不满容器 */
      width: 50px;
      height: 50px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

当容器尺寸 > 网格区域尺寸要大时, place-content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>place-content</title>
  <style>
    .main {
      width: 500px;
      height: 500px;
      background-color: pink;

      display: grid;
      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;

      /* align-content: start;
      align-content: end; */

      /* 先上下, 后左右 不过不用记, 测试一把就知道啦 */
      /* place-content: start end; */

    }

    .main div {
      width: 50px;
      height: 50px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</body>
</html>

但这个容器比整个网格尺寸要大的场景是非常小的, 通常都是会设置为一样的大小, 因此这个 place-content 属性应该是很少用到的啦, 但 place-items 却基本都会用到哦.

隐式网格于显式网格

用来设置在显式网格之外的隐式网格, 如何排列及尺寸大小, 也是对应三个属性:

grid-auto-fow
grid-auto-rows
grid-auto-colums

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应行列排列 grid-auto-flow</title>
  <style>
    .main {
      width: 300px;
      height: 300px;
      background-color: pink;

      display: grid;

      /* 设置为 1x3, 多的部分就变成隐式网格了 */

      /* grid-template-rows: 100px; */
      /* grid-template-columns: 100px 100px 100px; */

      /* 默认 row 就是行产生隐式网格, 多出来的会自动折行 */
      /* grid-auto-flow: row; */
       /* 默认宽度会保持一致, 高度会拉伸, 但可调整 */
      /* grid-auto-rows: 100px; */


      /* 设置为 3x1, 要设置多的部分按列进行隐式网格折列, 否则会超出容器 */

      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 100px;
      /* 需要手动设置折列了哦， 高度保持一致， 宽度拉伸 */
      grid-auto-flow: column;
      /* 但宽度也可以调整 */
      grid-auto-columns: 100px;

    }

    .main div {
      background-color: skyblue;
      border: 1px solid #000;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!-- 隐式网格 -->
    <div>4</div>
    <div>5</div>
  </div>
</body>
</html>

关于 grid 布局, 容器项常用的属性就差不多啦, 看上去很多, 其实也不少, 关键是有个理解和能查询就行啦.

标签：容器,布局,100px,网格,1fr,gap,grid,template,Grid
From： https://www.cnblogs.com/chenjieyouge/p/18212403