高亮的博客

# grid 宫格

# 属性

# 列属性：grid-template-columns：定义网格中的列

# 行属性：grid-template-rows： 定义网格中的行

后面什么几个属性就是几列/行，也可以是百分比 如20% 30% 也可以百分比和具体数值混合， 如20px 30%

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

<style >
  .mid {
    display: grid;
    /*  定义一行显示三列*/
    grid-template-columns: 100px  100px  100px;
      /*  定义一行显示三行*/
    grid-template-rows: 100px  100px  100px;
  }
</style>
<body>

<span class="span1">span1</span>
<div class="mid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
</div>
<span class="span2">span2</span>

</body>
</html>

# 重复次数 repet

作用是假如需要多个行/列可以使用这个属性，比较方便

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

<style >
  .mid {
    display: grid;
    grid-template-columns: repeat(2, 50%);/* 2列 每列宽度50%*/
    grid-template-rows: repeat(4, 100px);  /* 4行 每行高度100 */
  }
</style>
<body>

<span class="span1">span1</span>
<div class="mid">
  <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>
<span class="span2">span2</span>

</body>
</html>

# auto-fill

自动划分

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

<style >
  .mid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 33%);
    grid-template-rows: repeat(4, 100px);
  }
</style>
<body>

<span class="span1">span1</span>
<div class="mid">
  <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>
<span class="span2">span2</span>

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

# fr

片段划分

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

<style >
.container {
  display: grid;
  /*
    2行 3列
    第一行 1/5
    第二行 2/5
  */
  grid-template-rows: 1fr 2fr;
  grid-template-columns: auto auto auto;
}
</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>

# minmax

满足条件最大，不满足最小

<!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;
}
</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>

# 行列间距

  • 行间距 grid-row-gap
  • 列间距 grid-column-gap
  • 组合，行&列间距 grid-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>

# 方向显示

  • grid-auto-flow
    • column：纵向
    • row：横向

# 单元格对局方式

  • just-items：水平对其方式
  • align-items：垂直对其方式
  • place-items: 垂直方向 水平方向；

# 容器对其方式

  • justify-content：水平
  • align-content：垂直

# 合并单元格

  • grid-column-start 纵向开始位置
  • grid-column-end 纵向结束位置
  • grid-row-start 横向开始位置
  • grid-row-end 横向结束位置

# 网格线

可以想象成 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;

← 盒子模型 →