高亮的博客

# grid 网格布局

网格布局是一种二维布局模型，允许开发 者通过定义行（rows）和列（columns） 以实现响应式设计。
在设置了网格之后 display: grid; 并不会马上有变化，默认是声明创建了一行一列的网格

# 定义 行(grid-template-rows) & 列 (grid-template-columns)

div {
  display: grid;
  /* 定义行，写了几个就代表几行 */
  grid-template-rows: 100px 100px ;
  /* 定义列，写了几个就代表几列 */
  grid-template-columns: 100px 100px ;
}

# 对其方式

# 行

属性名 作用 可选值 默认值 备注
align-items 控制所有子项在单元格中的纵向对齐 start、center、end、stretch stretch 影响单元格内部内容
align-self 控制单个子项在单元格中的纵向对齐 同上 继承 align-items 用于单独覆盖
align-content 控制整个网格在容器中的纵向对齐 start、center、end、stretch、space-between、space-around、space-evenly stretch 只有当容器高度大于网格高度时才生效
.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  height: 400px;
  /* 所有子项纵向居中 */
  align-items: center;
  /* 整个网格在容器里纵向均匀分布 */
  align-content: space-around;
}

.item1 {
  /* 单独控制某个子项到底部 */
  align-self: end;
}

# 列

属性名 作用 可选值 默认值 备注
justify-items 控制所有子项在单元格中的横向对齐 start、center、end、stretch stretch 影响单元格内部内容
justify-self 控制单个子项在单元格中的横向对齐 同上 继承 justify-items 用于单独覆盖
justify-content 控制整个网格在容器中的横向对齐 start、center、end、stretch、space-between、space-around、space-evenly stretch 只有当容器宽度大于网格宽度时才生效
.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  width: 400px;

  /* 所有子项横向居中 */
  justify-items: center;
  /* 整个网格横向两端对齐 */
  justify-content: space-between; 
}

.item2 {
  /* 单独控制某个子项靠右 */
  justify-self: end; 
}

# 函数

# 重复次数 repeat

repeat(重复次数，轨道尺寸)

# 最小尺寸和最大尺寸 minmax

minmax(最小尺寸,最大尺寸)

# 属性

# auto-fill 留有空白空间

# auto-fit 会拉伸盒子占满父容器空间

# fr 片段划分：表示占满一列

# auto 自适应

# grid-auto-flow 方向显示

  • column：纵向
  • row：横向

# grid-template-columns结合repeat案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      max-width: 1350px;
      height: 200px;
      display: grid;
      /*
          定义列，自动填充
          最小宽度不小于200，最大宽度是占满一个单元格
       */
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 5px;
    }
    .container div {
      background-color: skyblue;
    }
  </style>
</head>
<body>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</body>
</html>

# auto

自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
  .top {
    height: 100px;
    background-color: skyblue;
  }

  .container {
    display: grid;
    grid-template-rows: calc(100vh - 120px);
    grid-template-columns: 100px auto;
  }

  .left {
    background-color: pink;
  }

  .right {
    background-color: aqua;
  }

</style>
<body>

<div>
  <div class="top"></div>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

</body>
</html>

# 行列间距 gap

  • 行间距 grid-row-gap
  • 列间距 grid-column-gap
  • 组合，行&列间距 (grid-gap | gap) : 行间距，列间距;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style >
.container {
  display: grid;
  grid-template-rows: 100px 100px minmax(100px, 200px);
  grid-template-columns: auto auto auto;
  grid-gap: 10px 20px;
  grid-column-gap: 10px;
  grid-row-gap: 20px;
}
</style>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>


</div>

</body>
</html>

# 网格线

可以想象成 table 的合并单元格列合并和行合并，注意这个属性是增加在子元素上，不是父元素

  • grid-column
  • grid-row 语法1，这个表示从第一号线到第三号线，第一行到第三行
grid-column: 1/3;
grid-row: 1/3;

语法2 比语法一简单些不需要计算到哪个单元格，这个span和上面的区别是跨几个单元格，上面是从1号线到三号线

grid-column: 1 / span 3;
grid-row: 1 / span3;

← 图片 →