类似于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>

原文链接：https://blog.csdn.net/qq_52845451/article/details/128826660

最后修改：2023 年 10 月 30 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏