Grid网格布局

最新推荐文章于 2024-04-27 13:18:18 发布

zhongbusi

最新推荐文章于 2024-04-27 13:18:18 发布

阅读量225

点赞数

分类专栏： # CSS布局

本文链接：https://blog.csdn.net/weixin_45678090/article/details/107373732

版权

CSS布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概述

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

作用在Grid容器上	作用在Grid子项上
grid-template-columns	grid-column-strat
grid-template-rows	grid-column-end
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-slef
place-items	palce-self
justify-content
align-content
place-content

作用在自己身上的grid CSS属性

grid-template-columns和grid-template-rows

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

有时候，我们网格的划分是很规律的。
如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

示例：

<style>
.fu{
.fu{
    /* 注释1：display: grid; */
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 30px auto;
    /* 注释2： grid-template-rows: 100px auto 25%;
    grid-template-columns: 100px 30px auto; */
}
}
.fu div{
    border: 1px dotted red;
}
</style>
<body>
    <div class="fu">
        <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>
</body>

未注释之前：
在这里插入图片描述
注释2，未注释1：

注释2且注释1之后：

repeat简写

将上述代码中的grid-template-rows和grid-template-columns用repeat简写

grid-template-rows: repeat(3,1fr);	//3是重复几次，1fr是容器的大小
grid-template-columns: repeat(3,1fr);

在这里插入图片描述
注意，一般用repeat语法的话，整体式比较规整的。

grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域。
此时grid子项只要使用grid-area属性指定它是属于哪个区。

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

grid-template-areas示例：

<style>
    .fu{
        display: grid;
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        margin: 30px auto;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(3,1fr);
        grid-template-areas: 
        "A A A"
        "B C C"
        "B C C";
        /* grid-template: 
        "A A A" 1fr
        "B C C" 1fr
        "B C C" 1fr
        /1fr 1fr 1fr; */
    }
    .fu div{    border: 1px solid red;}
    .fu div:nth-child(1){   grid-area: A;}
    .fu div:nth-child(2){   grid-area: B;}
    .fu div:nth-child(3){   grid-area: C;}
</style>
<body>
    <div class="fu">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

两种写法都一样：
在这里插入图片描述

注意：`grid-template-areas`形成的区域只能写成矩形方框。
如果用父容器写了grid-template...给予子容器宽高之后，再给子容器宽高。
那么以子容器的宽高为主（即，子容器宽高优先级比grid-tem...高）

grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

在上述代码中加了两行代码

grid-column-gap: 10px;
grid-row-gap: 10px;
//也可以直接用grid-gap替代
grid-gap:10px 10px;

在这里插入图片描述

justify-items和align-items

justify-items指定了网格元素的水平呈现方式。
是水平拉伸显示，还是左中右对齐。
align-items制定了网格元素的水平呈现方式。
是垂直拉伸先显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或底部对齐。
center	表现水平或垂直居中对齐。

示例：

<style>
.fu{
    display: grid;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 30px auto;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    /* 注释1 justify-items: center; */
    /* 注释2 align-items: center; */
}
.fu div{
    background: red;
    border: 1px solid white;
}
</style>
<body>
    <div class="fu">
        <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>

注释之后：
在这里插入图片描述
注释2不注释1：

注释1不注释2：

都不注释：

注：大小由内容撑开。

可以用place-items简写。
即用palce-items：center center;代替那两句

justify-content和align-content

justify-content指定了网格元素的水平分布方式。
align-content制定了网格元素的垂直分布方式。
place-content可以让align-contene和justify-content属性写在一个CSS声明中。

取值	含义
stretch	默认值，拉伸。表现为水平或垂直填充。
start	表现为容器左侧或顶部对齐。
end	表现为容器右侧或底部对齐。
center	表现水平或垂直居中对齐。
space-between	表现为两端对齐。
space-around	享有独立不重叠的空白空间。
space-evenly	平均分配空白空间。

示例：

 <style>
.fu{
    display: grid;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 30px auto;
    grid-template-rows: repeat(3,auto);
    grid-template-columns: repeat(3,auto);
    /* justify-content: end;
    align-content: space-evenly; */
}
.fu div{
    background: red;
    border: 1px solid white;
}
</style>
<body>
    <div class="fu">
        <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>

未注释之前：
在这里插入图片描述

注释之后：
在这里插入图片描述

注：要留有一定的空间，否则，很难看出来变化（所以上面的面积直接用了auto来控制，让人更容易看）

也可以用place-content简写
place-content: space-evenly end;来代替那两行代码

----------------------------grid作用在容器本身上的CSS属性讲解结束---------------------------

作用在子项上的grid CSS属性

取值	含义
grid-column-strat	水平方向上占据的起始位置
grid-column-end	水平方向上占据的结束位置（span属性）
grid-row-start	垂直方向上占据的起始位置
grid-row-end	垂直方向上占据的结束位置（span属性）
grid-column	grid-column-start+grid-column-end的缩写
grid-row	grid-row-start + grid-row-end的缩写
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法
justify-self	单个网格元素的水平对齐方式
align-slef	单个网格元素的垂直对齐方式
palce-self	align-self和justify的缩写

grid-column-start/end和grid-row-start/end

示例：

<style>
.fu{
    display: grid;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 30px auto;
    grid-template-rows: repeat(3,auto);
    grid-template-columns: repeat(3,auto);
}
.fu div:nth-child(1){
    background: red;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
}
.fu div:nth-child(2){
    background: blue;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
</style>
<body>
    <div class="fu">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

截图：
在这里插入图片描述
注：grid-column和grid-row可以简写上述四句代码

grid-column和grid-row

grid-column		grid-column-start+grid-column-end的缩写
grid-row				grid-row-start + grid-row-end的缩写

示例：
只列出了与上面不同的代码位置

.fu div:nth-child(1){
    background: red;
    grid-column: 2/3;
    grid-row:1/4;
}
.fu div:nth-child(2){
    background: blue;
    grid-column: 2/3;
    grid-row:1/3;
}

结果与上面的截图相同：
在这里插入图片描述

grid-area

grid-area除了可以命名之外，还有可以表示位置
grid-area:  行的起始位置 / 列的起始位置 / 行的结束位置 / 列的结束位置

示例：

<style>
.fu{
    display: grid;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 30px auto;
    grid-template-rows: repeat(3,auto);
    grid-template-columns: repeat(3,auto);
}
.fu div:nth-child(1){
    background: red;
    grid-area: 1 / 2 / 3 / 4;
}
</style>
</head>
<body>
    <div class="fu">
        <div></div>
    </div>
</body>
</html>

结果：
在这里插入图片描述

justify-self、align-self和palce-self

justify-self			单个网格元素的水平对齐方式
align-slef			单个网格元素的垂直对齐方式

place-self时justify-self和align-self的简写

示例：

<style>
.fu{
    display: grid;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    margin: 30px auto;
    grid-template-rows: repeat(3,auto);
    grid-template-columns: repeat(3,auto);
}
.fu div{
    border: 1px solid red;
}
.fu div:nth-child(5){
    align-self: start;
    justify-self: end;
    /* place-self: start  end; */
}
</style>
</head>
<body>
    <div class="fu">
        <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>

结果：
在这里插入图片描述
注：可以用注释的那行代码，写出这个效果

zhongbusi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Grid网格布局

概述Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。作用在Grid容器上作用在Grid子项上grid-template-columnsgrid-column-stratgrid-template-rowsgrid-column-endgrid-template-areasgrid-row-startgrid-templategrid-row-endgrid-column-gapgrid-columngrid-row-gapgrid
复制链接

扫一扫