网格布局--grid

小白小白从不日白

已于 2022-06-04 18:17:02 修改

阅读量1.4k

点赞数 1

分类专栏： Web移动端、响应式布局文章标签： html css

于 2022-04-17 12:44:43 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/124161614

版权

Web移动端、响应式布局专栏收录该内容

13 篇文章 2 订阅

订阅专栏

c. justify-self/align-self/place-self

CSS网格是一个用于web二维的布局系统。利用网格，可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。

一、定义网格及fr单位

1.1 定义网格及fr单位

其实网格布局就是和我们日常生活中用到的excle表格是一样的，由行和列组成，因此网格布局主要是实现二维的布局方式

这里的行是用 row 来表示的，列是用 columm 来表示的，一个小的单元格叫 cell ，之间还有一个间隙用 gap 来表示

还有就是单元格是可以进行合并的，合并完之后就是一个 area

1.2 容器

a. grid-template-rows/grid-template-columns

基于网格行和列的维度，去定义网格线的名称和网格轨道的尺寸大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .main {
          width: 300px;
          height: 300px;
          background: skyblue;
          /* 网格布局 */
          display: grid;
          /* 定义3行3列 */
          /* grid-template-columns: 100px 100px 100px;
          grid-template-rows: 100px 100px 100px; */

          /* 定义2行3列 */
          /* grid-template-columns: 100px 20% auto;
          grid-template-rows: 100px 100px; */

          /* 网格布局专用单位 fr 按比例进行均分 */
          grid-template-columns: 150px 1fr 1fr;
          grid-template-rows: 1fr .6fr;
      }

      .main div {
          background-color: pink;
      }
    </style>
</head>
<body>
    <div class="main">
        <div>11</div>
        <div>21</div>
        <div>31</div>
        <div>41</div>
        <div>51</div>
        <div>61</div>
        <div>71</div>
        <div>81</div>
        <div>91</div>
    </div>
</body>
</html>

b. grid-template-areas

单元格合并

使用命名方式定义网格区域，需配合 grid-area（子项）属性进行使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            /* 
            需要配合  grid-area 子项使用才能生效
            需要通过引号，通过自己自定义命名的方式
             */
            /*
            第一行前两个单元格合并
            第二行前两个单元格合并
            第三行三个单元格合并 
             */
            /* grid-template-areas: 
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3"; */

            grid-template-areas: 
            "a1 a2 a3";
        }
        .main div {
            background-color: pink;
            border: 1px solid;
        }

        /* .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;
        } */

        .main div:nth-of-type(1) {
            grid-area: a3;
        }        
    </style>
</head>
<body>
    <div class="main">
        <div>11</div>
        <div>21</div>
        <div>31</div>
    </div>
</body>
</html>

简写属性：

grid-template 是 grid-template-rows，grid-template-columns 和 grid-template-area 属性的缩写

c. grid-row-gap/grid-column-gap/grid-gap

用来设置元素行列之间的间隙大小，推荐使用 row-gap、column-gap、gap，为了更加统一的在其他布局中能够更好的进行使用，因此会把 grid 前缀去掉，这样的话我们也能把这几个属性放到弹性布局当中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            /* 
            需要配合  grid-area 子项使用才能生效
            需要通过引号，通过自己自定义命名的方式
             */
            /*
            第一行前两个单元格合并
            第二行前两个单元格合并
            第三行三个单元格合并 
             */
            grid-template-areas: 
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3";

            /* grid-row-gap: 20px; */
            /* grid-column-gap: 10px; */
            row-gap: 20px;
            column-gap: 10px;

            /* 
            复合样式
            grid-gap: row-gap column-gap; 老式写法
            gap: row-gap column-gap; 推荐写法
             */
        }
        .main div {
            background-color: pink;
            border: 1px solid;
        }

        .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>11</div>
        <div>21</div>
        <div>31</div>
    </div>
</body>
</html>

d. justify-items/align-items/place-items

单元格默认靠左靠上对齐

子项小于单元格时的对齐方式

默认值stretch--拉伸，指定了子项在网格中的对齐方式

justify-iteme：水平方向对齐方式 start/end/center/left/right...

align-items：垂直方向 baseline/end/center/stretch/start...

place-items：复合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            justify-items: start;
            align-items: end;
            /* 复合样式 */
            /* place-items: align-items justify-items; */
        }
        .main div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>11</div>
        <div>21</div>
        <div>31</div>
        <div>41</div>
        <div>51</div>
        <div>61</div>
        <div>71</div>
        <div>81</div>
        <div>91</div>
    </div>
</body>
</html>

e. justify-content/align-content/place-content

默认值 stretch--拉伸，指定了所有网格在 grid 容器中的对齐方式，条件就是容器一定要比单元格大，才能看到这个过程

单元格小于容器时，单元格整体的对齐方式

justify-content：center/end/start/space-around/space-between...

align-content：center/end/start/space-around/space-between...

place-content：符合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            justify-items: start;
            align-items: end;
            /* 复合样式 */
            /* place-items: align-items justify-items; */
        }
        .main div {
            width: 50px;
            height: 50px;
            background-color: pink;
        }

        .main2 {
            width: 500px;
            height: 500px;
            background-color: greenyellow;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            justify-content: space-between;
            align-content: space-between;
            /* 复合属性 */
            /* place-content: align-content justify-content; */
        }
        .main2 div {
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>11</div>
        <div>21</div>
        <div>31</div>
        <div>41</div>
        <div>51</div>
        <div>61</div>
        <div>71</div>
        <div>81</div>
        <div>91</div>
    </div>

    <div class="main2">
        <div>11</div>
        <div>21</div>
        <div>31</div>
        <div>41</div>
        <div>51</div>
        <div>61</div>
        <div>71</div>
        <div>81</div>
        <div>91</div>
    </div>
</body>
</html>

f. grid-auto-flow/grid-auto-rows/grid-auto-columns

指定在显示网格之外的隐式网格如何排列及尺寸大小

显示网格：子项有多少个，网格就有多少个，一一对应

隐式网格：网格个数小于子项个数

grid-auto-rows：默认：row 就是行产生隐式网格

grid-auto-flow：调节产生隐式网格的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px;
            /* 默认：row 就是行产生隐式网格 */
            grid-auto-flow: row;
            /* 可以调节产生隐式网格的高度 */
            grid-auto-rows: 150px;

            /* grid-template-columns: 100px;
            grid-template-rows: 100px 100px 100px; */
            /* colum 就是列产生隐式网格 */
            /* grid-auto-flow: column; */
            /* 可以调节产生隐式网格的宽度 */
            /* grid-auto-columns: 100px; */
        }

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

        .main2 {
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px;
            /* dense 紧密属性 */
            grid-auto-flow: row dense;
            grid-auto-rows: 100px;
        }

        .main2 div {
            background-color: blueviolet;
            border: 1px solid;
            box-sizing: border-box;
        }

        .main2 div:nth-of-type(1) {
            grid-column-start: 2;
        }
    </style>
</head>
<body>
    <div class="main">
        <!-- 显示网格 -->
        <div>11</div>
        <div>21</div>
        <div>31</div>
        <!-- 隐式网格 -->
        <div>41</div>
        <div>51</div>
    </div>

    <hr>

    <div class="main2">
        <!-- 显示网格 -->
        <div>11</div>
        <div>21</div>
        <div>31</div>
        <!-- 隐式网格 -->
        <div>41</div>
        <div>51</div>
    </div>
</body>
</html>

1.3 子项

a. grid-column-start/grid-column-end/grid-row-start/grid-row-end

基于线的元素放置

表示 grid 子项所占据的区域的起始和终止位置，包括水平方向和垂直方向

简写方式：

基于线对应位置的缩写方式，通过 / 作为分割

grid-row：grid-row-start/grid-row-end

grid-column：grid-column-start/grid-column-end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        } */
        /* .main div:nth-of-type(1) {
            background-color: pink;
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
        }
        .main div:nth-of-type(2) {
            background-color: orange;
        } */



        /* .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        } */
        /* .main div:nth-of-type(1) {
            background-color: pink; */
            /* span 2：表示占两列 */
            /* grid-column-start: span 2; */
            /* grid-column-start: 2;
            grid-column-end: span 2;
        } */

        /* .main div:nth-of-type(2) {
            background-color: orange;
        } */



        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;
            /*  [col1] [row1]  对线进行命名  */
            grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
            grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];
        }
        .main div:nth-of-type(1) {
            background-color: pink;
            grid-column-start: col2;
            grid-column-end: col4;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <!-- <div>2</div> -->
    </div>
</body>
</html>

b. grid-area

grid-row-start,grid-column-start,grid-row-end以及grid-column-end属性的缩写，以及额外支持 grid-template-arease 设置的网格名称

grid-area：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

c. justify-self/align-self/place-self

跟 place-item 用法相同，只不过是操作指定的子项

justify-self：center/end/auto/baseline/start...

align-self：center/end/auto/baseline/start...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            display: grid;

            /*  [col1] [row1]  对线进行命名  */
            grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];
            grid-template-rows: [row1] 1fr [row2] 1fr [row3] 1fr [row4];
        }
        .main div:nth-of-type(1) {
            width: 50px;
            height: 50px;
            justify-self: center;
            align-self: center;
            background-color: pink;
            grid-area: 2 / 2 / 4 / 3;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
    </div>
</body>
</html>

d. repeat() 与 minmax()

repeat()方法及 auto-fill 可选值，指定可重复的数值

auto-fill 会自动的根据容器的大小决定应该产生多少个网格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            height: 400px;
            background-color: skyblue;
            display: grid;

            /* 1 */
            /* grid-template-columns: 100px 100px 100px; 等价于*/
            /* grid-template-columns: repeat(3, 100px); */

            /* 2 */
            /* grid-template-columns: 150px 100px 100px; 等价于*/
            /* grid-template-columns: 150px repeat(2, 100px); */

            /* 3 */
            grid-template-columns: 150px repeat(auto-fill, 100px);

            grid-template-rows: 100px;
        }

        .main div {
            background-color: #f40;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <!-- 3 -->
        <div>4</div>
    </div>
</body>
</html>

minmax() 方法，设置最小和最大值的范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            height: 400px;
            background-color: skyblue;
            display: grid;
            /* grid-template-columns: 150px 1fr 100px; */
            grid-template-columns: 150px minmax(100px,1fr) 100px;
            grid-template-rows: 100px;
        }

        .main div {
            background-color: #f40;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            background: skyblue;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            /* 显式网格 */
            grid-template-rows: 100px;
            /* 隐式网格 */
            grid-auto-rows: 100px;
            grid-gap: 20px 20px;
        }

        .main div {
            background-color: orange;
            border: 1px solid;
        }
    </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>10</div>
        <div>11</div>
    </div>
</body>
</html>