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

Grid布局基础

难度中级
时长 3小时18分
学习人数
综合评分9.40
16人评价 查看评价
9.9 内容实用
8.5 简洁易懂
9.8 逻辑清晰
  • 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

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

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

    grid-auto-flow

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

    语法

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

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


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

    2019-04-06

  • grid-template简写例子

    查看全部
  • Grid布局的优势

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

    2:定位项目

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

    4:控制重叠内容(z-index)

    查看全部
  • justify-content——单元格沿行轴对齐,align-content——单元格沿垂直行轴方向对齐。

    值:stretch(默认)、start、end、center、space-around、space-between、space-evenly。

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

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

    2019-04-02

  • display:grid(用得最多) | inline-grid | subgrid;

    inline-grid——行内网格。

    subgrid——如果网格容器本省时网格项(嵌套网格容器),此属性用来继承父级网格属性,目前存在兼容性问题。

    当元素设置了网格布局,column、float、clear、vertical-align属性无效。

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

    2019-04-02

  • Grid与Flexbox

    查看全部
  • Grid布局的优势

    查看全部
  • grid-template

    属性值

    轨道大小(track-size):px/em/%/fr(分数)/auto(剩余部分)

    grid-template-columns列

    grid-template-rows 行


    查看全部
  • 1.作用在网格内容中的容器属性

    display    grid-template   gap  items

    content  grid-auto  grid

    2.Display

    display:grid| inline-grid| subgrid;

    <div class="container">
      <div class="item">one</div>
      <div class="item">two</div>
      <div class="item">three</div>
      <div class="item">four</div>
      <div class="item">five</div>
      </div>
      .container{
        display:grid|inline-grid|subgrid
       }

    grid 生成块级网格   inline-grid 生成行内网格

    *当元素设置了网格布局,column、float、clear、vertical-align属性无效



















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

    2020-11-08

  • 网格区域。

    http://img.mukewang.com/5f4777bb00010e5311170658.jpg

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

    2020-08-27

  • Flexbox 是一维布局,只能在一条直线上放置内容区块;

    Grid是一个二维布局,根据设计需求将内容区块放置到任何地方。

    查看全部
  • template 的一种简洁的写法

    查看全部
  • 如图,简写实例

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

    2020-02-16

  • 属性值的定义

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

    2020-02-16

举报

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

微信扫码,参与3人拼团

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

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