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

Grid布局基础

难度中级
时长 3小时18分
学习人数
综合评分9.17
18人评价 查看评价
9.6 内容实用
8.4 简洁易懂
9.5 逻辑清晰
谢谢老师,老师辛苦,就是声音不太清晰
老师讲的好详细,爱了爱了
听了两遍,加不加 fit content()看不出有什么区别?什么情况才会用这个函数没讲
一个固定值加一个repeat()为什么没有把页面宽度给填满?
最后一节课老师总结时候 强调的是那四页?不是只一个页面吗?
参考老师某某集团智能云数据中心布局,有需要的同学可以看一下 github:https://github.com/ar414-com/web/tree/master/htmlgrid
EWL
float/columns/clear/vertical-align不生效的部分是网格容器的网格项,也就是网格容器中包含的子项这些属性不会再生效,这样讲会更清晰一些,最开始我误以为是容器的这些元素不生效。
慕课网很好,能将相对新的技术教程视频免费奉献出来给人学习,真的很棒 ,为其点赞!
.container {
place-items: <align-items> / <justify-items>;
}


.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
}


先垂直后水平,方向一致!!!
MDN上没有用行和列的方式去描述items,而是明确为水平方向或垂直方向对齐。因而开篇对items描述为沿着行方向或列方向的词语直接导致实例最后结论为行列参数和gap相反。如果按讲师的定义是没错。但是容易产生混淆。最好用水平方向或垂直方的描述,而且和gap之类参数顺序没有比较可言
我的理解是对的。gap的行间距指的的垂直(行)方向的间距。同样,place-items的行对齐指的也是垂直(行)方向的对齐方式。讲师错误将一行内(水平方向)的每个网格项的列对齐方式视作行对齐方式。gap、items、content的简写方向是一致的!望更正!!!
为什么视频中我看到的place-items是按“行,列”简写的呢?!视频中说反了。place-items:"start end"渲染结构为右上角---行为start,列为end
这个课程结束了没
老师讲的非常细致,之前自己杜宇这块只是大概了解,看了视频教程更加深入的学习了一下,这个适合布局提升的学习,很实用!
课程须知
学习之前需要掌握HTML基础、CSS基础,position、float、以及flex布局。
老师告诉你能学到什么?
学会使用Grid布局实现二维网格布局系统,灵活尽心布局,学会更主流、更简洁的布局方案。

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消