浅谈Grid布局

最新推荐文章于 2021-12-22 16:46:45 发布

smile_y_y

最新推荐文章于 2021-12-22 16:46:45 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/smile_y_y/article/details/103138583

版权

Grid 真的很好用

先上图=>
在这里插入图片描述

Grid的基本概念

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
行和列的交叉区域，称为"单元格"（cell）。
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

用图片来解释一下（通俗易懂）
在这里插入图片描述

容器属性（图中黄色部分）

属性名	属性值	描述
dispaly	grid	指定一个容器采用网格布局。
grid-template-columns	绝对单位，百分比	定义每一列的列宽。
grid-template-rows	绝对单位，百分比	定义每一行的行高。
grid-column-gap 属性	绝对单位	列间隔
grid-row-gap 属性	绝对单位	行间隔
grid-gap	<行间隔><列间隔>（默认列等于行）	grid-column-gap和grid-row-gap的合并简写形式
justify-items 属性	start（对齐单元格的起始边缘）end（对齐单元格的结束边缘），center（单元格内部居中） stretch（拉伸，占满单元格的整个宽度（默认值））	设置单元格水平位置
align-items 属性	start，end ，center ， stretch	设置单元格垂直位置
place-items属性	<水平位置><垂直位置> （默认垂直属性等于水平属性）	align-items属性和justify-items属性的合并简写形式。
grid-auto-flow 属性	row，column，row dense，column dense	排序方式默认row

==》详讲grid-template-columns设置列宽，grid-template-rows同理
1.repeat（）当布局要重复写，很麻烦可以采用此方法
其接受2个参数repeat（参数1，参数2）
参数一：重复几次
参数二：重复的布局是什么
举例：grid-template-columns：repeat（3，33.3%）//一共3列，每列各占33.33%
grid-template-columns：repeat（2，10px 20px）//一共4列，分别占10px 20px 10px 20px
2.auto-fill关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
举例：grid-template-columns：repeat（auto-fill，100p x）//自动填充每列100px
3.fr关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
举例：grid-template-columns：1fr 1fr 1fr //3列每列大小一样
可以结合绝对单位单位使用
举例：grid-template-columns：200px 1fr 2fr
4.auto 关键字
auto关键字表示由浏览器自己决定长度。
举例：grid-template-columns：200px auto 100px （俩侧宽度固定，中间自适应）

项目属性

1.grid-column 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式。
举例：grid-column :1/3 /*item列上从第一根网格线到第三根*/
2.grid-row 属性
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
举例：grid-row :1/3 /*item行上从第一根网格线到第三根*/

实现第一张截图的代码块

<!DOCTYPE html>
<html>
    <head>
        <link href="index.css" rel="stylesheet">
    </head>
    <body>
        <div class="g">
            <div class="n">
                <img src="01.jpeg" alt="图片">
            </div>
            <div class="n">
                <img src="02.jpg" alt="图片">
            </div>
            <div class="n">
                <img src="03.jpg" alt="图片">
            </div>
            <div class="n">
                <img src="04.jpeg" alt="图片">
            </div>
            <div class="n">
                <img src="05.jpeg" alt="图片">
            </div>
        </div>
    </body>
</html>

.n:nth-child(1){
    background:linear-gradient(#aaa,#986);
    grid-row: 1/3;
}
.n:nth-child(2){
    background:linear-gradient(#d77,#ad9);
}
.n:nth-child(3){
    background:linear-gradient(rgb(99, 61, 61),rgb(82, 56, 6));
}
.n:nth-child(4){
    background:linear-gradient(rgb(238, 7, 7),rgb(26, 27, 25));
    grid-row: 1/3;
    grid-column: 4/5;
}
.n:nth-child(5){
    background:linear-gradient(rgb(37, 45, 158),rgb(136, 10, 240));
    grid-column: 2/4;
}
.n{
    border:20px solid black;
    /*实现图片填充item的
    display: grid;
    align-self: center;
    justify-self: center;
    */
}
.g{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 100px;
}

更详细网格布局教程请查看阮一峰大神的网络日志

smile_y_y

关注

0
点赞
踩
0

收藏

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

Gird 真的很好用先上图=>Gird的基本概念采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。行和列的交叉区域，称为"单元格"（cell）。划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。用...
复制链接

扫一扫