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

Grid布局基础

难度中级
时长 3小时18分
学习人数
综合评分9.17
18人评价 查看评价
9.6 内容实用
8.4 简洁易懂
9.5 逻辑清晰
  • fr单位含义即为flex中的份数, 占比的意思;


    gr指代网格数, 还不是规范, 不应当使用;

    查看全部
  • items 属性

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

    2019-05-23

  • 测测测恶恶恶恶

    查看全部
  • 1.grid 优势

    https://img1.sycdn.imooc.com//5cdeced40001552412560900.jpg

    2.grid vs flexbox

    https://img1.sycdn.imooc.com//5cdeced30001740515360888.jpg

    3.浏览器兼容

    https://img1.sycdn.imooc.com//5cdeced40001b94315560952.jpg



    查看全部
  • 网格定义-

    https://img1.sycdn.imooc.com//5cdecd690001af2515920894.jpg

    查看全部
  • Grid 布局的优势

    1. 固定或弹性的轨道尺寸

    2. 定位项目

    3. 创建额外的轨道来保存内容

    4. 对齐控制

    5. 控制重叠内容(z-index)

    查看全部
  • 我觉得网格布局还有很多需要升级的地方:

    1

           背景、边框。

           目前网格布局只是虚拟的存在,边框背景只能由项目元素来设置,而无法直接在网格上设置,就像表格一样可以设置某一行或某一列的背景边框,网格本身是无色的,做不到。

    2

           单元格、区域内多元素

           目前,一个单元格或区域内,只能装上一个项目元素;如果想要在一块区域内布局多个元素,只能给它们套上一层父元素来解决。

          所以需要一个单元格,同时容纳多个元素

    3

          空间化

          一个空间可以包含多个单元格、区域,可以像一个普通元素一样设置背景、边框、字体,等所有css属性


    查看全部
  • grid-auto

    grid-auto-clolumn | grid-auto-rows

    指定自动生成的网格轨道(隐式网格轨道)的大小,不会控制非隐式网格轨道

    grid-auto-flow 自动布局的方式

    row (根据需要填加新行)| column (根据需要填加新列)| dense(自动)

    grid

    gris-teamplte-rows | grid-template-clomns | grids-temaplte-areas | grid-auto-row | grid-auto-columns | grid-auto-flow的简写

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

    2019-05-12

  • justify-items

    行轴上的每个items内容对齐方式

    stretch(默认值)/start/end/center

    align-items

    纵轴上的每个items内容对齐方式

    stretch(默认值)/start/end/center

    place-items align-items | justify-items简写



    justify-content

    设置网格容器内的网格沿行轴对齐网格的对齐方式

    stretch(默认值)/start/end/center/space-around(等间隙,边缘间隙为中间间隙一半)/space-between(等间隙,无边缘)/space-evenly(包括边缘,等间隙)

    align-content

    设置网格容器内的网格沿纵轴对齐网格的对齐方式

    stretch(默认值)/start/end/center

    place-content align-content| justify-content简写



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

    2019-05-12

  • gap  grid-column-gap / grid-row-gap 

    指定网格线的大小,(列行之间的间距宽度)

    如果设置一个值则代表行列都是一个值

    查看全部
  • grid-template

    grid-template-rows、 gird-teamplate-columns、 gird-teamplate-ares的简写

    不建议使用,写一起容易混淆

    查看全部
  • grid-teamplate-areas 

    1. grid-area定义的网格区域名称

    2. .空的网格单元

    3. none 没有定义网格区域

    4. https://img1.sycdn.imooc.com//5cd7dbfe0001e65108950544.jpg

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

    2019-05-12

  • grid-template-columns 的auto为0的例子

    查看全部
  • 属性值

    none:将所有子属性设置为其初始值

    <grid-template-rows>/<grid-template-columns>:将grid-template-rows 和grid-template-columns分别设置未指定值,将所有其他子鼠星设置为起初始值

    <grid-auto-flow>[<grid-auto-rows>[/<grid-auto-columns>]]:接受所有与grid-auto-flow,grid-auto-rows和grid-auto-columns相同的值。如果省略grid-auto-columns,则将其设置未grid-auto-rows制定的值。如果两者都被省略,则他们被设置未他们的初始值

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

    2019-05-11

  • .container{

    gird:none | <grid-template-rows> / <grid-template-colums>|

    <grid-auto-flow> [<grid-auto-rows>[/<grid-auto-columns>]]}

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

    2019-05-11

举报

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

微信扫码,参与3人拼团

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

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