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

Grid布局基础

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

    justify-self

    --设置行轴方向的对齐方式

    语法

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

    align-self

    --设置列轴方向的对齐方式

    align-self:start | end | center | stretch;


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

    2019-04-07

  • 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

  • fit-content()

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

    语法

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

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

     

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

    2019-04-07

  • repeat()

    --跟踪列表的重复片段,允许大量显示重复模式的列或行以更紧凑的形式编写

    语法

    grid-template-columns:repeat(repeat,values);

    grid-template-rows:repeat(repeat,values);

    参数说明

    repeat:<number> | auto-fill | auto-fit

    number:列的宽度或行的高度,可以为fr,px,%,max-content,min-content,auto等

    auto-fill:以网格项为准自动填充,即当宽度够时,自动在列上填充空的单元格。

    auto-fit:以网格容器为准自动填充。

    注意

    1,auto-fill和auto-fit必须结合minmax()使用才生效,具体数值是无效的。

        例:repeat(auto-fill,minmax(100px,300px));

    2,只适用于grid-template-columns和grid-template-rows



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

    2019-04-07

  • repeat的混合写法


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

    2019-04-06

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

    --指定自动生成的网络轨道(又名隐式网络轨道)的大小,即当我们创建的行或列不够时,自动填充行或列的即是隐式网络轨道。

    grid-auto-flow

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

    语法

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

    (不建议使用,因为不好控制)


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

    2019-04-06

  • 1,justify-content

    --设置网格容器内的所有网格沿着行轴的对齐方式

    语法

    justify-content: start |end |center | stretch |space-around | space-between | space-evenly;

    2,align-content

    --设置网格容器内所有网格在列轴上的对齐方式

    语法

    align-content: start | end | stretch | space-around(单元格与单元格之间的间隙是两端间隙的两倍) | space-between | space-evenly(两端的间隙和单元格与单元格之间的间隙一样)

    简写

    3,place-content

    语法

    place-content:<align-content> <justify-content>;

      


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

    2019-04-06

  • 1,justify-items

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

    语法

    justify-items: start | end | center | stretch(默认值);

    2,align-items

    --沿着列轴对齐网格内的内容

    语法

    align-items:start | end | center | stretch(默认值);

    3,place-items

    语法

    place-items:<align-items> <justify-items>;

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

    2019-04-06

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

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

    简写

    grid-gap: <grid-row-gap>  <grid-column-gap >;不过逐渐可以使用gap简写来替代grid-gap,如果兼容IE,最好两个都写上。

    查看全部
  • grid-template简写例子

    查看全部
  • repeat() 只能用在已有的元素上

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

    2019-04-06

  • grid-template简写属性

    属性值

    1:<none>将三个属性都设置为其初始值

    2:<subgrid >把grid-template-rows和grid-template-columns设置为subgrid,并且grid-template-areas设置为初始值(即一个单元格的大小)

    3:<grid-template-rows/grid-template-columns>把grid-template-rows和grid-template-columns设置为指定值,于此同时,设置grid-template-areas为none

    查看全部

举报

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

微信扫码,参与3人拼团

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

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