Grid布局

端木淇

2023-12-01

类似于flex布局

预备知识

grid含义

grid布局，也称之为网格布局，是将页面中的父元素划分为一个个小的格子，然后通过这些小的格子进行合并来制作出各种不同的网站效果

怎么触发网格

给父元素添加display属性，并且将取值设置为：grid/inline-grid
- grid：代表的是块状网格，默认独占一行，类似于块级元素
- inline-grid：代表的是行内块网格，与行内块元素类似

与flex布局异同

相同点

都有容器和项目之分

不同点

flex被称之为一维布局，也叫轴线布局
grid被称之为二维布局，有行列之分

容器触发网格

只需要display取值为grid或者inline-grid

<head>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box div {
            display: inline-grid;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>1</span>
        <div>2</div>
        <span>3</span>
    </div>
</body>

划分行列属性

行属性：grid-template-rows
列属性：grid-template-columns
取值一共7种
取值可以是px，百分比%，或者自动填充(应用在重复函数中，代表的是根据需要重复的数值，进行自动填充数量)
还可以是auto(代表自动，占剩余宽度和剩余高度的所有)
还可以是片段划分：为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为“片段”）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的2倍 grid-template-rows: 1fr 2fr 2fr; 类似于felx: n;
最后一种取值是minmax(num1,num2)函数，可以理解成最小最大值函数，函数中两个参数，参数1代表的是最小值，参数2代表的是最大值
- 注意：如果条件允许，则一直使用最大值，如果条件不满足则使用中间值，如果剩下的距离不足以显示距离大小，则使用最小值
- grid-template-columns: 50px 100px minmax(50px, 100px);

<head>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box div {
            display: inline-grid;
            /* 行 */
            grid-template-rows: 100px 100px 100px;
            /* 列，auto会占剩余宽度和剩余高度的所有 */
            grid-template-columns: 50px auto 50px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>1</span>
        <div>2</div>
        <span>3</span>
    </div>
</body>

重复函数

使用的是repeat(num1,num2)函数，适用于划分行列很多的情况
- 参数1：重复次数
- 参数2：需要重复的数值

display: inline-grid;
/* 行 */
grid-template-rows: 20% 60% 20%;
/* 列 */
grid-template-columns: repeat(3, 100px);

自动填充auto-fill

display: inline-grid;
/* 行 */
grid-template-rows: 20% 60% 20%;
/* 列,自动填充，会按列数宽度按照30%的宽度进行划分，盛放不下的话不在划分列数 */
grid-template-columns: repeat(auto-fill, 30%);

网格之间调整间距

行间距属性：grid-row-gap
列间距属性：grid-column-gap

/* 行间距 */
grid-row-gap: 20px;
/* 列间距 */
grid-column-gap: 30px;

推荐使用简写形式grid-gap: 行间距列间距

grid-gap: 20px 30px;

容器中添加项目

如果想要给网格中添加项目，我们需要在容器中添加对应的div，这些div被称为项目，项目会默认自动撑开显示在单元格内部
顺序是从上到下，从左至右，一次排列

修改顺序

可以通过grid-auto-flow属性来完成
grid-auto-flow属性有两个取值，分别是
- row：横向显示（默认就是横向显示）
- column：纵向显示

<head>
    <title>Document</title>
    <style>
        .box {
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            /* 改变单元格顺序 */
            grid-auto-flow: column;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            border: 10px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <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>
</body>

设置项目的宽度高度&调整项目中位于单元格中的对齐方式

单一属性

对齐方式默认是stretch拉伸效果

水平对齐方式

justify-items，取值有start，center，end

垂直对齐方式

align-items，取值有start，center，end

<head>
    <title>Document</title>
    <style>
        .box {
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            /* 改变单元格顺序 */
            grid-auto-flow: column;
            /* 单元格(项目)水平对齐方式 */
            justify-items: center;
            /* 单元格(项目)垂直对齐方式 */
            align-items: center;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            border: 10px solid #ccc;
        }

        .box div {
            width: 50px;
            height: 50px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <div class="box">
        <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>
</body>

复合属性

语法：place-items: 垂直方向对齐方式水平方向对齐方式

place-items: center center;

调整网格位于容器中的对齐方式

水平对齐

justiify-content 取值有start，center，end，stretch(拉伸，默认值)，space-between(行列两端对齐)，space-around(行列间距环绕)，space-evenly(行列间距平分)

垂直对齐

align-content 取值有start，center，end，stretch(拉伸，默认值)，space-between(行列两端对齐)，space-around(行列间距环绕)，space-evenly(行列间距平分)

/* 在盒子中的水平对齐方式 */
justify-content: center;
/* 在盒子中的垂直对齐方式 */
align-content: center;

当然，也有简化形式 place-content: 垂直对齐方式水平对齐方式

place-content: center center;

合并单元格

要给需要合并的单元格加属性

grid-row-start 横向网格线开始占位
grid-row-end 横向网格线结束占位
grid-column-start 纵向网格线开始占位
grid-column-end 纵向网格线开始占位

有图，看图吧

<head>
    <title>Document</title>
    <style>
        .box {
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            /* 改变单元格顺序 */
            grid-auto-flow: column;
            /* 单元格(项目)水平对齐方式 */
            /* justify-items: center; */
            /* 单元格(项目)垂直对齐方式 */
            /* align-items: center; */
            /* 单元格(项目)复合对齐方式 */
            place-items: center center;
            /* 在盒子中的水平对齐方式 */
            /* justify-content: center; */
            /* 在盒子中的垂直对齐方式 */
            /* align-content: center; */
            /* 在盒子中的对齐方式复合写法 */
            place-content: center center;
            width: 600px;
            height: 600px;
            margin: 100px auto;
            border: 10px solid #ccc;
        }

        .box div {
            width: 50px;
            height: 50px;
            background-color: pink;

        }

        .two {
            /* 合并单元格(例如合并4和7) */
            grid-row-start: 1;
            grid-row-end: 2;
            grid-column-start: 2;
            grid-column-end: 4;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div class="two">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <!-- <div>9</div> -->
    </div>
</body>

但是也有复合写法

通过 grid-row: 开始/结束 设定行的
通过 grid-column: 开始/结束 设定列的

.two {  /* 要给需要合并的单元格加属性 */
    /* 合并单元格(例如合并4和7) */
    /* grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 4; */
    /* 复用形式 */
    grid-row: 1/2;
    grid-column: 2/4;
}

案例

<head>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            display: grid;
            /* 行 */
            grid-template-rows: repeat(4, 100px);
            /* 列 */
            grid-template-columns: repeat(13, 100px);
            /* 项目在网格中的水平对齐方式 */
            /* justify-items: center; */
            /* 项目在网格中的垂直对齐方式 */
            /* align-items: center; */
            /* 复合方式 */
            place-items: center center;
            width: 1300px;
            height: 400px;
            margin: 50px auto;
        }

        .container div {
            width: 80px;
            height: 80px;
            background-color: pink;

        }

        .container div.shier {
            /* 合并单元格 */
            grid-row-start: 1;
            grid-row-end: 3;
            grid-column-start: 12;
            grid-column-end: 14;
            width: 180px;
            height: 180px;
        }

        .container div.shisi {
            /* 合并单元格 */
            grid-row-start: 2;
            grid-row-end: 3;
            grid-column-start: 1;
            grid-column-end: 3;
            width: 180px;
            height: 80px;
        }

        .container div.shijiu {
            grid-row-start: 2;
            grid-row-end: 4;
            grid-column-start: 6;
            grid-column-end: 9;
            width: 270px;
            height: 180px;
        }

        .container div.erqi {
            grid-row-start: 3;
            grid-row-end: 5;
            grid-column-start: 1;
            grid-column-end: 3;
            width: 180px;
            height: 180px;
        }
    </style>
</head>

<body>
    <div class="container">
        <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 class="shier">12</div>
        <!-- <div>13</div> -->
        <div class="shisi">14</div>
        <!-- <div>15</div> -->
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div class="shijiu">19</div>
        <!-- <div>20</div> -->
        <!-- <div>21</div> -->
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <!-- <div>25</div> -->
        <!-- <div>26</div> -->
        <div class="erqi">27</div>
        <!-- <div>28</div> -->
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <!-- <div>32</div> -->
        <!-- <div>33</div> -->
        <!-- <div>34</div> -->
        <div>35</div>
        <div>36</div>
        <div>37</div>
        <div>38</div>
        <div>39</div>
        <!-- <div>40</div> -->
        <!-- <div>41</div> -->
        <div>42</div>
        <div>43</div>
        <div>44</div>
        <div>45</div>
        <div>46</div>
        <div>47</div>
        <div>48</div>
        <div>49</div>
        <div>50</div>
        <div>51</div>
        <div>52</div>
    </div>
</body>

Grid布局

预备知识

容器触发网格

划分行列属性

重复函数

网格之间调整间距

容器中添加项目

调整网格位于容器中的对齐方式

合并单元格

案例

相关阅读

相关文章

相关问答

相关文档