grid网格布局。逆战班

grid网格布局是什么
网格布局是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。行和列的交叉区域,称为"单元格"(cell)。
在这里插入图片描述
容器属性
display : grid
grid-template-columns : 设置列数
grid-template-rows : 设置行数
repeat()方法。网格中提供了一个新的单位:fr ( 比例单位 )
grid-template-areas : 划分区域的(区域必须是矩形。)
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;
grid-column-gap : 列的间距
grid-row-gap : 行的间距
grid-gap : 复合写法
grid-row-gap grid-column-gap
justify-items : 子项的水平居中方式
默认 : stretch 默认值,拉伸。表现为水平或垂直填充。
start center end
align-items : 子项的垂直居中方式
默认 : stretch 默认值,拉伸。表现为水平或垂直填充。
start center end
place-items : 复合写法
align-items justify-items
justify-content : 整体网格的水平对齐方式
默认:stretch start end center space-between space-around space-evenly

    align-content : 整体网格的垂直对齐方式
        默认:stretch     start    end          center       space-between      space-around      space-evenly
    place-content : 复合写法
        align-content justify-content

项目属性

    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       垂直方向上占据的结束位置
        注:只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置,而是个数。 
            正常数字是位置,加上span是个数。

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

    justify-self
    algin-self
    place-self
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200229225732812.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvZ2ljNTE1NTE=,size_16,color_FFFFFF,t_70)
    首先进行布局为grid布局做准备
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200229225857919.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvZ2ljNTE1NTE=,size_16,color_FFFFFF,t_70)
    给页面进行grid布局,a1.a2.a3.a4.a5.a6.a7.a8分别对应八个div
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200229230018638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvZ2ljNTE1NTE=,size_16,color_FFFFFF,t_70)
    效果如图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值