CSS第九章移动端布局-Grid网格布局

最新推荐文章于 2025-04-12 20:31:51 发布

guanerkoushi

最新推荐文章于 2025-04-12 20:31:51 发布

阅读量718

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/Xiaolei233/article/details/117491914

Web开发专栏收录该内容

74 篇文章

订阅专栏

本文深入探讨了CSS Grid布局，包括作用在grid容器上的属性如grid-template-columns、grid-template-rows、grid-template-areas等，以及作用在grid子项上的属性如grid-column-start、grid-row-end等。通过案例分析，解释了如何实现骰子点数和百度搜索风云榜的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS_移动端布局

Grid网格布局

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

属性分类：
在这里插入图片描述

作用在grid容器上的CSS属性

1. grid-template-columns 和 grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)

对于规律的网格划分，若要添加多个横纵网格时，可利用repeat()语法。    repeat(重复的个数，每个网格的值)

取值为像素、百分比、自适应：

<style>
    .box{ width:500px; height:500px; border:1px gray dotted; display:grid;
        grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px;
    }
</style>
<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>10</div>
    <div>11</div>
    <div>12</div>
</div>

在这里插入图片描述
取值为fr单位：

<style>
    .box{ width:500px; height:500px; border:1px gray dotted; display:grid;
        grid-template-rows: 1fr 1fr 2fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
</style>
<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>

在这里插入图片描述
只有在fr累加和大于1，才会将空余空间填满，否则会出现剩余空间

<style>
    .box{ width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: .1fr .1fr .2fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
</style>

在这里插入图片描述
repeat语法：
上面的可改写为：

<style>
    .box{ width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(3,1fr);
    }
</style>

也可以给每个网格元素加背景颜色和边框.box div{ background:red;border:1px black solid;}
在这里插入图片描述

2. grid-template-areas 和 grid-template

grid-template-areas 是给网格划分区域的(起名：任意)。此时grid子项只要使用grid-area属性指定其属于那个区。起名的方法对于子项较多的情况更加适用。
	注意：不允许出现特殊图形，只能是矩形
		
grid-template 是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写，顺序有变。

grid-template-areas示例：

<style>
    .box2{ width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(3,1fr);
        grid-template-areas: 
        "a1 a1 a1"
        "a2 a2 a3"
        "a2 a2 a3";
    }
    .box2 div{ background:red;border:1px black solid;}
    .box2 div:nth-child(1){ grid-area: a1;}
    .box2 div:nth-child(2){ grid-area: a2;}
    .box2 div:nth-child(3){ grid-area: a3;}
</style>
<div class="box2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

在这里插入图片描述
grid-template复合写法：
改写上面的例子：

grid-template: 
            "a1 a1 a1" 1fr
            "a2 a2 a3" 1fr
            "a2 a2 a3" 1fr
            /1fr 1fr 1fr;

注：/斜线后写纵向

3. grid-column-gap、grid-row-gap 和 grid-gap

这两个属性是用来定义网格中网格间距的尺寸

grid-gap属性是grid-column-gap和grid-row-gap属性的缩写

grid-row-gap: 20px;
grid-column-gap: 10px;
在这里插入图片描述
复合写法：grid-gap: 20px 10px;

4. justify-items、align-items 和 place-items

justify-items指定了每一个网格内容在当前网格内的水平呈现方式，是水平拉伸显示，还是左中右对齐。

align-items指定了垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items是align-items和justify-items属性的缩写，align-items(纵向)在前，justify-items(水平)在后。

在这里插入图片描述
初始为3*3的网格

justify-items示例：

justify-items: start; 每一项不再拉伸，而是根据内容撑开，并在自己的容器内靠左对齐。
在这里插入图片描述
justify-items: center;

justify-items: end;
在这里插入图片描述
align-items示例：

justify-items: end; align-items: start;
在这里插入图片描述

justify-items: end; align-items: center;
在这里插入图片描述
justify-items: end; align-items: end;

复合写法place-items: start end;与align-items: start; justify-items: end;效果一致

5. justify-content、align-content 和 place-content

justify-content指定了所有网格元素的水平分布方式。

align-content指定了所有网格元素的垂直分布方式。

place-content可以让align-content和justify-content属性写在一个CSS声明中，纵向在前，水平在后。

在这里插入图片描述

<style>
.box4{ width:500px; height:500px; border:1px gray dotted; display:grid;
        grid-template-rows: repeat(3,auto);
        grid-template-columns: repeat(3,auto);
        justify-content: space-between;
      }
</style>

justify-content: space-between;
在这里插入图片描述
justify-content: start;

justify-content: center; align-content:space-between;

上面的复合写法为place-content: space-between center;

作用在grid子项上的CSS属性

在这里插入图片描述
初始：

<style>
    .box{ width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(3,1fr);
    }
    .box div{ background:red;border:1px black solid;}
</style>
<div class="box">
    <div></div>
</div>

在这里插入图片描述

1. grid-column-start、grid-column-end、grid-row-start、grid-row-end

.box div{ background:red;border:1px black solid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
在这里插入图片描述
grid-column/row-end的取值有span关键字，span关键字后面的数字不再表示结束位置，而是从起始位置向后添加的个数。
.box div{ background:red;border:1px black solid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2;
}
在这里插入图片描述

2. grid-column 和 grid-row

为上面的复合写法；第一个值为起始位置，第二个值为结束位置，中间用斜线 / 隔开。

1中的例子可改写为
grid-column: 2 / 3;
grid-row: 2 / span 2;

3. grid-area

上面有介绍过名字的表示方法，除了名字还有位置的表示法

位置的表示法：第一个值是水平的起始位置，第二个值是垂直的起始位置，第三个值是水平的结束位置，第四个值是垂直的结束位置。

位置法比起名法更适合子项少的情况。

grid-area: 3 / 2 / 4 / 4;
在这里插入图片描述

4. justify-self、align-self 和 place-self

justify-self、align-self这俩属性和加在父容器上的justify/align-items属性效果相同，只是它俩针对的是指定的某一个网格元素

place-self是这俩值的简写， 第一个值代表纵向align-self，第二个值代表水平justify-self。

.box2 div:nth-child(2){ justify-self:start; align-self: end;}
在这里插入图片描述
此时复写样式为place-self: end start;

案例

1. 骰子的点数

<!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>
        .box{ width:100px; height:100px; border: 1px black solid; border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
        }
        .box div{ width:20px; height:20px; background: black; border-radius: 50%;}
        .box div:nth-child(1){ grid-area: 2 / 2 / 3 / 3;}

        .box2,.box3,.box4,.box5,.box6{ width:100px; height:100px; border: 1px black solid; border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3 , 1fr);
            grid-template-rows: repeat(3 , 1fr);
            place-items: center center;
            grid-template-areas: 
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        .box2 div{ width:20px; height:20px; background: black; border-radius: 50%;}
        .box2 div:nth-child(2){ grid-area: a9;}

        .box3 div{ width:20px; height:20px; background: black; border-radius: 50%;}
        .box3 div:nth-child(2){ grid-area: a5;}
        .box3 div:nth-child(3){ grid-area: a9;}

        .box4 div{ width:20px; height:20px; background: black; border-radius: 50%;}
        .box4 div:nth-child(2){ grid-area: a3;}
        .box4 div:nth-child(3){ grid-area: a7;}
        .box4 div:nth-child(4){ grid-area: a9;}

        .box5 div{ width:20px; height:20px; background: black; border-radius: 50%;}
        .box5 div:nth-child(2){ grid-area: a3;}
        .box5 div:nth-child(3){ grid-area: a5;}
        .box5 div:nth-child(4){ grid-area: a7;}
        .box5 div:nth-child(5){ grid-area: a9;}

        .box6 div{ width:20px; height:20px; background: black; border-radius: 50%;}
        .box6 div:nth-child(2){ grid-area: a3;}
        .box6 div:nth-child(3){ grid-area: a4;}
        .box6 div:nth-child(4){ grid-area: a6;}
        .box6 div:nth-child(5){ grid-area: a7;}
        .box6 div:nth-child(6){ grid-area: a9;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

3D骰子：

<style>
    #main{ width:100px; height:100px; margin: 300px auto;  perspective:300px; perspective-origin: right top;}
    #main .box{ position:relative; transform-style: preserve-3d; transition:2s; transform-origin:center center -50px;}


    .box1{ width:100px; height:100px; background:white; border: 1px black solid; box-sizing: border-box; 
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
    }
    .box1 div{ width:20px; height:20px; background: black; border-radius: 50%; }
    .box1 div:nth-child(1){ grid-area: 2 / 2 / 3 / 3; }

    .box2,.box3,.box4,.box5,.box6{ width:100px; height:100px; background:white;  border: 1px black solid; box-sizing: border-box; 
        display: grid;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(3 , 1fr);
        place-items: center center;
        grid-template-areas: 
        "a1 a2 a3"
        "a4 a5 a6"
        "a7 a8 a9";
    }

    .box2{ transform-origin: top; transform: rotateX(-90deg); }
    .box2 div{ width:20px; height:20px; background: black; border-radius: 50%;}
    .box2 div:nth-child(2){ grid-area: a9;}

    .box3{ position:absolute;left:-100px; top:0; transform-origin: right; transform: rotateY(-90deg);}

    .box3 div{ width:20px; height:20px; background: black; border-radius: 50%;}
    .box3 div:nth-child(2){ grid-area: a5;}
    .box3 div:nth-child(3){ grid-area: a9;}

    .box4{ position:absolute;top:-100px; transform-origin: bottom; transform: rotateX(90deg);}
    .box4 div{ width:20px; height:20px; background: black; border-radius: 50%;}
    .box4 div:nth-child(2){ grid-area: a3;}
    .box4 div:nth-child(3){ grid-area: a7;}
    .box4 div:nth-child(4){ grid-area: a9;}

    .box5{ position:absolute; left:100px; top:0; transform-origin: left; transform: rotateY(90deg);}
    .box5 div{ width:20px; height:20px; background: black; border-radius: 50%;}
    .box5 div:nth-child(2){ grid-area: a3;}
    .box5 div:nth-child(3){ grid-area: a5;}
    .box5 div:nth-child(4){ grid-area: a7;}
    .box5 div:nth-child(5){ grid-area: a9;}

    .box6{ position:absolute; left:0; top:0; transform: translateZ(-100px);}
    .box6 div{ width:20px; height:20px; background: black; border-radius: 50%;}
    .box6 div:nth-child(2){ grid-area: a3;}
    .box6 div:nth-child(3){ grid-area: a4;}
    .box6 div:nth-child(4){ grid-area: a6;}
    .box6 div:nth-child(5){ grid-area: a7;}
    .box6 div:nth-child(6){ grid-area: a9;}

    #main:hover .box{ transform:rotate3D(1,1,0,360deg); }
</style>

在这里插入图片描述

2. 百度搜索风云榜

<style>
    .box{ width:280px; height:352px; margin:20px; display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(4,1fr);
        grid-template-areas: 
        "a1 a2 a2"
        "a3 a2 a2"
        "a4 a4 a5"
        "a6 a7 a7";
        grid-gap: 6px;
    }
    .box div{ background:red;}
    .box div:nth-child(1){ grid-area:a1;}
    .box div:nth-child(2){ grid-area:a2;}
    .box div:nth-child(3){ grid-area:a3;}
    .box div:nth-child(4){ grid-area:a4;}
    .box div:nth-child(5){ grid-area:a5;}
    .box div:nth-child(6){ grid-area:a6;}
    .box div:nth-child(7){ grid-area:a7;}
</style>
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>