为了账号安全,请及时绑定邮箱和手机立即绑定

Grid布局基础

难度中级
时长 3小时18分
学习人数
综合评分9.17
18人评价 查看评价
9.6 内容实用
8.4 简洁易懂
9.5 逻辑清晰
  • grid

     在单个属性中设置所有以下属性的j简写:grid-template-rows,

    grid-template-columns,grid-template-areas,grid-auto-rows,

    grid-auto-columns 和grid-auto-flow.

    同时将set grid-column-gap 和grid-row-gap设置未他们的初始值,几时他们不能被彼此属性显示设置。


    查看全部
    0 采集 收起 来源:grid简写形式

    2019-05-11

  • grid-auto 

    属性值

    row:告诉自动布局算法依次填充每行,根据需要添加新行

    column:告诉自动布局算法依次填充每列,根据需要添加新列

    dense:告诉自动布局算法,如果后面出现较小的grid item 则尝试在网格中填充空洞

    查看全部
    0 采集 收起 来源:grid-auto

    2019-05-11

  • grid-auot-flow

    控制自动布局算法的工作方式。

    .container{

    grid-auto-flow:row | column | row dense | column dense

    }

    查看全部
    0 采集 收起 来源:grid-auto

    2019-05-11

  • 属性值<track-size>:可以是一个长度值,一个百分比值,或者一个自由空间的一部分(使用fr单位)

    查看全部
    0 采集 收起 来源:grid-auto

    2019-05-11

  • .container{

    grid-auto-columns:<track-size>...;

    grid-auto-rows:<track-size>...;

    }

    查看全部
    0 采集 收起 来源:grid-auto

    2019-05-11

  • grid-auto -columns/grid-auto-rows

    指定自动生成的网格轨道(又名隐式网格轨道)的大小

    查看全部
    0 采集 收起 来源:grid-auto

    2019-05-11

  • 属性知 

    space-around:在grid item之间设置均等宽度的空白间隙,

    其外边缘消息大小未中间空白间隙宽度的一半

    sapce-between:在grid item 之间设置均等宽度空白间隙,其外边缘无间隙 

    space-evenly:在每个grid item 之间设置均等宽度的空白间隙,包括外边缘

    查看全部
    0 采集 收起 来源:content

    2019-05-11

  • 属性值

    start :网格与网格容器的左边对齐

    end:网格与网格容器的右边对齐 

    center:网格与网格容器的中间对齐

    strech :调整grid item 的大小,r让宽度填充整个网格容器

    查看全部
    0 采集 收起 来源:content

    2019-05-11

  • justify-content设置网格容器内的王哥哥沿着行轴对齐王哥的对齐方式

    .container{

    justify-content:satart | end | center | strech | space-around | space-between | space-evenly;

    }

    查看全部
    0 采集 收起 来源:content

    2019-05-11

  • justify-items:start center end 

    align-items:start center end 

    place-items:center;

    查看全部
    0 采集 收起 来源:items

    2019-05-11

  • justify-items

    沿着行轴对齐网格内的内容

    .container{

    justify-items:start | end | center | stretch;

    }

    查看全部
    0 采集 收起 来源:items

    2019-05-11

  • grid-gap 

    grid-row-gap 和grid-column-gap 的缩写

    .container{

    grid-gap:<grid-row-gap><grid-column-gap>;

    }

    查看全部
    0 采集 收起 来源:gap 简写

    2019-05-11

  • 属性值

    line-size:长度值

    。container{

    grid-column-gap:10px;

    grid-row-gap:15px;

    }

    查看全部
  • gap 

    grid-columns-gap/grid-row-gap

    指定网格线的大小,可以想像为设置列/行之间的间距的宽度

    .container{

    grid-columns-gap:<line-sezi>;

    grid-row-gap:<line-size>;

    }

    查看全部
  • .container{

    grid-template-rows:[row1-start] 25px [row1-end row2-start] 25px [row2-end];

    grid-template-columns:auto 50px auto;

    grid-template-areas:"header header header"

    "footer footer footer";

    }

    查看全部

举报

0/150
提交
取消
课程须知
学习之前需要掌握HTML基础、CSS基础,position、float、以及flex布局。
老师告诉你能学到什么?
学会使用Grid布局实现二维网格布局系统,灵活尽心布局,学会更主流、更简洁的布局方案。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!