CSS Grid 网格布局

最新推荐文章于 2024-03-05 11:37:40 发布

毕霞晚梅

最新推荐文章于 2024-03-05 11:37:40 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/maybemetoo/article/details/104597447

版权

概念：grid布局又称CSS网格布局，（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式

一、作用在容器上

1.display : grid 设置grid布局

2.grid-template-columns : 设置列数

3.grid-template-rows : 设置行数

和grid-template-columns一起，单位统一
a.fr单位
b.repeat()方法
注：网格中提供了一个新的单位：fr ( 比例单位 )
写法：

<style>
        #box{
				grid-template-columns: 100px 100px 200px 100px;
				grid-template-rows: 100px auto 25%;
				grid-template-columns: 1fr,1fr,1fr; 
				grid-template-columns: repeat(3,1fr);
		}
</style>

4.grid-template-areas : 根据子元素的网格名字划分区域

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 100px;
            display: grid;
            
            grid-template-rows: 1fr,1fr,1fr;
            grid-template-columns: repeat(3,1fr);
            grid-template-areas: 
                "a1 a1 a2"
                "a3 a3 a2"
                "a3 a3 a2"  
            ; 
        }
        #box div{border: 1px black dashed;background: red;}
        #box div:nth-of-type(1){grid-area: a1;}
        #box div:nth-of-type(2){grid-area: a2;}
        #box div:nth-of-type(3){grid-area: a3;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

5.grid-template:复合写法

是grid-template-rows、grid-template-columns、grid-template-areas的复合写法
代码如下：

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

6.grid-column-gap / grid-row-gap 列间距/行间距

grid-gap : 复合写法;行在前，列在后

7.justify-items : 子项的水平居中方式

        默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
        start  起始位置对齐
        center：中心位置对齐
        end：结束位置对齐

8.align-items : 子项的垂直居中方式

        默认 :  stretch 默认值，拉伸。表现为水平或垂直填充。
        start
        center
        end

place-items : align-items与justify-items复合写法，align-items在前，justify-items在后

9.justify-content : 整体网格的水平对齐方式

		属性值：
         stretch（默认）
         start
         end
         center
         space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配
         space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半
         space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

10.align-content : 整体网格的垂直对齐方式

        默认：stretch
         start
         end
         center
         space-between
         space-around
         space-evenly

place-content : align-content与justify-content复合写法

二、作用在子项

1.grid-area : 找指定的区域

1.对应网格的名字
2.写对应的水平线的排列数字：grid-area : 1 / 3 / span 2 / 4; 
    写法：grid-row-start / grid-column-start / grid-row-end / grid-column-end
	grid-column-start  水平方向上占据的起始位置
    grid-column-end    水平方向上占据的结束位置
    grid-row-start     垂直方向上占据的起始位置
    grid-row-end       垂直方向上占据的结束位置
    注：a.只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。 
       b.正常数字是位置，加上span是个数。

复合写法：

    grid-column:3 / 4;
        grid-column-start / grid-column-end
    grid-row:1 / span 2;
         grid-row-start / grid-row-end

2.justify-self 水平居中方式

3.algin-self 垂直居中方式

place-self：justify-self与algin-self复合写法

例子：

<style>
    #box{
        width: 500px;
        height: 500px;
        border: 1px solid black;
        margin: 100px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    #box div{border: 1px black dashed;background: red;
        /* grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2; */
        /* grid-row-end:3; */
        /* grid-row-end: span 3; */
        /* grid-column: 3 / 4;
        grid-row:1 / span 2; */
        /* grid-area: 1 / 3 / span 2 / 4; */
    }
    #box div:nth-of-type(1){
        place-self: center start;
    }
</style>
</head>
<body>
<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>  
</div>

执行效果如下：
在这里插入图片描述
HTML5逆战班2002期–第四周 grid网格布局总结

毕霞晚梅

关注

0
点赞
踩
0

收藏

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

概念：grid布局又称CSS网格布局，（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式一、作用在容器上1.display : grid 设置grid布局2.grid-template-columns : 设置列数3.grid-template-rows : 设置行数和grid-template-columns一起，单位统一a.fr单...
复制链接

扫一扫