Grid布局（网格布局）

grid网格布局、网格布局的使用、网格布局容器属性和项目属性以及使用方法、网格布局合并单元格、

文章共1,960字 · 阅读需要大约7分钟

一键AI生成摘要，助你高效阅读

问答

鱼鱼～

4022人浏览 · 2023-02-27 19:49:30

鱼鱼～ · 2023-02-27 19:49:30 发布

一、什么是grid布局？

网格布局（Grid）是最强大的CSS布局方案：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。示例如下：

与flex布局的差别：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

二、相关概念

1.容器：需要添加网格布局的父元素

2.项目：项目容器内部采用网格定位的子元素

3.单元格：行和列的交叉区域，称为"单元格"（cell），正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

4.网格线：划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列，正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线：

三、display属性

div{
display: grid;/*指定一个容器采用网格布局。*/
display: inline-grid;/*该元素内部采用网格布局*/
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

注意：

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

四、容器属性（写在父级容器中）（以3x3的网格举例）

1.设置列columns 行的高度rows

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

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

2.repeat repeat()函数 1:重复值 2：重复模式

参数1：重复次数参数2：像素值

grid-template-columns: repeat(2,100px 200px);

grid-template-rows: repeat(2,100px 200px);

3.fr 关键字通过关键字划分比例

grid-template-rows: repeat(2,1fr 2fr);

grid-template-columns: repeat(2,1fr 2fr);

4.auto-fit 自动填充每一行或每一列

grid-template-columns: repeat(auto-fit,120px);

5.minmax(最小值最大值)函数

grid-template-columns: 1fr minmax(200px 1fr) 1fr;

grid-template-rows: repeat(3, 1fr);

6.auto关键字自动适应窗口大小（没有最大最小值）

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

7. grid-template-columns 网格线 [c1] ~[c4] 中括号内是网格线的名字

grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4];

8. gap 间隙

/* 列间距 */

/* column-gap: 10px; */

/*行间距 */

/* row-gap: 10px; */

/*合并写法： gap:行间距列间距 */

gap:10px 20px;

9.area 区域：代表单个或者多个单元格，单引号内分别是单元格的名字（3x3的网格，九个名字）

别名一样相当于合并啊，但是要和grid-area一起用，将元素放进去

grid-template-areas: 'a b c ' 'h j k' 'd e f ';

10 grid-auto-flow 项目的放置顺序：默认横向排列 column竖着排列

grid-auto-flow: column;

11.row dense水平方向填充 column dense垂直方向填充

grid-auto-flow: row dense;

12.缩小内容宽高来使得内容居中(单元格的内容)（宽度和高度只有内容大小）

place-items（合并写法）

justify-items: center;

align-items: center;

/* place-items: center; */

13.设置内容位置（居中）（容器内容包括间隙）

justify-content: center;

align-content: center;

/* place-content: center; */

五、项目属性（写在项目样式中）

1.用网格线定义单元格列数开始的位置和结束的位置

举例：网格线列从第一根开始第三根结束

grid-column-start: 1;

grid-column-end: 3;

/* grid-column: 1 / 3; */ 合并写法

/* 合并：grid-area：行的开始/列的开始/行的结束/列的结束 */

2. 将该单元格的内容移动到名字为j 的单元格其他的往前移

grid-area: j;

3.该项目自己的对齐方式：水平居中垂直居中

justify-self: center;

align-self: center;

六、网络布局练习（两种合并单元格方法）

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 600px;
            height: 140px;
            margin: 0 auto;
            border: 2px solid pink ;
            display: grid;
            gap: 10px;
            grid-template-columns: 102px 135px 135px 102px;
            grid-template-rows: repeat(2,55px);
            /* 方法1 */
            /* grid-template-areas: 'a b c d ' 'a k l d'; */
            justify-items: center;
            align-items: center;
            justify-content: center;
            align-content: center;
        }
        .inner:nth-of-type(1){
            /* grid-area: a; */

            /* 方法2 */
            grid-area: 1/1/3/2;
        }
        .inner:nth-of-type(6){
            grid-area: d;
            grid-area: 1/4/3/5;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
         二维码
        </div>
        <div class="inner">ps4/ps5</div>
        <div class="inner">taptap</div>
        <div class="inner">苹果</div>
        <div class="inner">安卓</div>
        <div class="inner">PC下载</div>
    </div>
</body>
</html>

结果如图：

此处我们可以看见，第一个“二维码”盒子和最后一个“PC下载”盒子上下单元格合并

七、骰子点数5练习（用网格布局）

<!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>
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            margin: 0 auto;
            height: 300px;
            width: 300px;
            background-color: gainsboro;
            border-radius: 10px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            justify-items: center;
            align-items: center;
            /* 方法2 （5个div）*/
            /* grid-template-areas: 'a c b ' 's d f' 'h j k'; 子元素用grid-area交换位置 */
            /* 方法3（5个div）：定义每个点的位置：grid-area：行的开始/列的开始/行的结束/列的结束 */

        }
        .point{
            height: 50px;
            width: 50px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
      <div class="point" style="background-color:black;"></div>
      <div class="point"></div>
      <div class="point"style="background-color: black;"></div>
      <div class="point"></div>
      <div class="point"style="background-color: black;"></div>
      <div class="point"></div>
      <div class="point"style="background-color: black;"></div>
      <div class="point"></div>
      <div class="point"style="background-color: black;"></div>
    </div>
</body>
</html>

效果图图：