Grid网格布局+案例

最新推荐文章于 2022-08-20 19:26:47 发布

GLINLIND

最新推荐文章于 2022-08-20 19:26:47 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/GLINLIND/article/details/104579052

版权

Grid网格布局

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

作用在容器上的：
    display : grid
    grid-template-columns : 设置列数
    grid-template-rows : 设置行数
        fr单位
        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复合写法，有顺序（竖直，水平）

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
   margin: 0;padding: 0;}
        ul{
   list-style: none;}
        a{
   text-decoration: none;color: #77818e;}
        img{
   display: block;}
        .clear:after{
   content: "";display: block;clear: both;}
        html,body{
   height: 100%;}

        #box{height:100%;display: flex;}
        #box .box1{width:250px;}
        #box .box1 div:nth-of-type(1){height: 240px;line-height: 240px;font-size: 26px;color: #77818e;font-family: Arial; padding-left: 24px;}
        #box .box1 div:nth-of-type(2){height: 238px;font-size: 20px;color: #77818e;font-family: Arial;padding-left: 26px;}
        #box .box1 div:nth-of-type(2) li{height: 34px;}
        #box .box1 div:nth-of-type(3){height: 70px;line-height: 72px;font-size: 20px;color: #77818e;font-family: Arial;padding-left: 26px;}
        #box .box1 div:nth-of-type(4){height: 80px;line-height: 86px;font-size: 14px;color: #77818e;}
        #box .box1 div:nth-of-type(4) a{margin-left:22px;}
        #box .box1 div:nth-of-type(5){height: 70px;font-size: 16px;color: #77818e;font-family: Arial;padding-left: 24px;}
        #box .box1 div:nth-of-type(6){height: 52px;line-height: 52px; font-size: 10px;color: #77818e;font-family: Arial;}
        #box .box1 div:nth-of-type(6) a{margin-left: 24px;}</

最低0.47元/天解锁文章

GLINLIND

关注

1
点赞
踩
4

收藏

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

Grid网格布局Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。作用在容器上的： display : grid grid-template-columns : 设置列数 grid-template-rows : 设置行数 fr单位 repeat()方法注：网格中提供了一个新的单位：fr ( 比例单位 ) ...
复制链接

扫一扫