前端学习之“网格”

最新推荐文章于 2024-09-17 11:42:54 发布

渐悟离迷

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量411

点赞数 5

文章标签：前端学习 html css

本文链接：https://blog.csdn.net/2301_82060934/article/details/140806994

版权

想要创建一个网格，首先我们需要一个“容器”，我们把容器划分了多少个格子就是有多少个项目。

1.如何触发网格

想要触发网格我们需要用到一个属性

display : grid / inline - grid ;

grid : 块状网格

inline - grid : 行内块状网格

2.“容器”上的属性（以div为容器）

1.触发网格

display : grid ;

2.划分行列

grid - template - columns :划分列数

grid - template - rows : 划分行数

1）纯数值

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

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

2)百分比

grid - template - columns : 40% 40% 20% ；

grid - template - rows : 40% 40% 20% ；

3）repeat（）函数

repeat函数可以用来解决，你需要划分多个相同格子时，需要每个都写的麻烦。

grid - template - columns : repeat（ 5 , 100px ）；

grid - template - rows : 200px repeat（ 5 , 100px ）50px；

repeat(num1,num2)

其中，num1代表重复次数，同时给定num2后，还可以写auto-fill，来让电脑自动划分

num2代表宽度或者高度

4）占剩余宽度的所有: auto

grid-template-rows: 100px auto 100px auto;

grid-template-columns: 100px auto 100px auto;

5）最小与最大 minmax( )

给定两个参数，使得这个位置的大小不大于最大值也不小于最小值

6）按照比例分配

1fr 2fr 3fr

3.调整单元格的间距

调整行间距：grid - row - gap // row - gap

调整列间距： grid - column - gap // column - gap

同时调整行和列间距

grid - gap

第一个值为行间距，第二个值为列间距

4.调整显示顺序

grid - auto - flow

取值为row或者colimn

3.项目上的属性

1.项目属性：合并单元格

grid - row : num1 / num2

grid - column : num1 / num2

需要注意的时，在合并完成后，需要手动把被合并的格子删除。

如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
      }
      div {
        border: 1px solid red;
      }
      .c1_3r1_3 {
        grid-column: 1/3;
        grid-row: 1/3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="c1_3r1_3">1</div>

      <div>3</div>

      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>