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

Grid布局基础

难度中级
时长 3小时18分
学习人数
综合评分9.40
16人评价 查看评价
9.9 内容实用
8.5 简洁易懂
9.8 逻辑清晰
  • fit-content()

    --根据公式Min(最大大小,最大值(最小大小,参数))将给定大小夹紧为可用大小

    语法

    grid-template-columns:fit-content(<length> | <percentage>);

    grid-template-rows:fit-content(<length> | <percentage>);

     

    查看全部
    2 采集 收起 来源:fit-content

    2019-04-07

  • CSS网格布局简介--》二维方向的自适应

    注意

    而flex布局则是一维,即只能在一个方向上进行自适应

    查看全部
  • Grid Layout(网格布局)的认识 1.它在最近几年(2017年前后)开始在国内兴起,所以说是比较新的前端技术。 2.它属于二维布局,不同于Flex(弹性盒子)的一维布局 3.和Flex(弹性盒子)布局相比有更大的便利性,与Flex Layout在布局方面相辅相成,并不是说前者取代了后者。 4.要学好网格布局,首先要打好HTML和CSS基础,尤其要深刻认识盒子模型
    查看全部
  • 网格轨道:两个相邻的网格线之间为网格轨道,可以到达容器边缘。

    网格单元:一个网格子,有网格线决定,里面可以不包含元素,不同于网格项。

    网格区域:多个网格单元。

    单位:fr——剩余空间分配数,可按比例分配。gr——网格数(还在不断完善当中)。

    查看全部
  • justify-items 和 align-items 可以用 place-items (垂直,水平)简写;justify-content 和 align-content 可以用 place-content(垂直,水平) 简写。

    stretch 和 start 的区别是,当grid-template-columns设置的列宽为auto时,前者会把item能有多宽就撑开多宽,后者相反,能挤多窄就挤成多窄。

    space-around:会使容器左右两边有一点点等宽的外边距,为item列间隙的一半。

    space-evenly:会使容器左右两边和列之间的间距等宽。

    space-between:使得item间隙均等,容器外边缘无间隙。    

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

    2019-07-06

  • 网格布局的grid-template,使用空格分隔的多个值来定义网格的列和行:

    grid-template-columns:100px auto 10% 1fr 2fr;网格有有5列,第一列宽度为100px,第二列为每个单元格内容的宽度,第三列为网格容器宽度的10%,第四列、第五列是总宽度减去一二三列的宽度后按1:2的比列分配的宽度

    grid-template-rows:200px auto;网格有两行,第一行高度为200px,第二行高度为单元格内容的高度

    若单元格数多于写的行数和列数,后面为定义的行的宽度为auto

    查看全部
  • 当元素设置了网格布局

    display:grid  |  inline-grid  |  subgrid;

    column、float、clear、vertical-align属性无效


    查看全部
    1 采集 收起 来源:display

    2019-05-01

  • 用grid做整体布局,用flexbox做局部布局

    查看全部
  • grid-template-columns    有几个数值就分成多少列;

    grid-template-rows    有几个数值就分成多少行;

    auto在没有fr的情况下会自动撑开剩余空间,但如果有fr,auto则会显示出最小值(在没有宽度的情况下,auto默认为0,显示内容宽度);简单说可以理解成优先于fr;


    查看全部
  • 简写
    查看全部
  • 例子
    查看全部
    1 采集 收起 来源:grid-template-areas

    2019-04-09

  • grid-area

    --给grid item 进行命名以便于使用grid-template-areas属性创建模版时来进行引用

    语法

    grid-area:<name> | <row-start> / <column-start> /  <row-end> / <column-end>;

    参数说明

    <name>:grid-template-areas中定义的命名。

    <row-start> / <column-start> /  <row-end> / <column-end>:可以是数字,也可以是网格线的名字。

    查看全部
    1 采集 收起 来源:grid-area

    2019-04-07

  • 简写start-end

    查看全部
    1 采集 收起 来源:start-end 简写

    2019-04-07

  • grid-column/row-start/end

    --使用特定的网格线确定grid item在网格内的位置

    参数说明

    <line>:可以是一个数字来指定相应编号的网格线,也可使用名称指代相应命名的网格线

    span <number>:网格项将跨越指定数量的网格轨道

    span <name>:网格项将跨越一些轨道,直到碰到指定命名的网格线,必须结合start使用才有效,单独使用无效。

    auto:自动布局,或则自动跨越,或则跨越一个默认的轨道

    注意

    1,如果没有声明grid-column-end/grid-row-end,默认情况下,该网格项将跨越1个轨道。

    2,网格项可以相互重叠,可以直接使用z-index来控制它们的堆叠顺序


    查看全部
  • minmax()

    --定义了一个长宽范围的闭区间

    语法

    minmax([<length> | <percentage> | <flex> | min-content | max-content | auto | ],[<length> | <percentage> | <flex> | min-content | max-content | auto);

    参数说明

    flex:单位为fr的非负维度,指定轨道弹性布局的系数值。

    min-content:自适应内容最大的那个单元格

    max-content:自适应内容最小的那个单元格

    auto:作为最大值,等价于max-content.作为最小值时,它表示轨道中单元格最小宽度(由min-width/min-height)的最大值。

    查看全部
    1 采集 收起 来源:minmax.mp4

    2019-04-07

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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