为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 Grid布局基础 问答

Grid布局基础

爱米 Web前端工程师
查看讲师更多课程 爱米讲师的其他课程
难度中级
时长 3小时18分
学习人数
综合评分9.17
18人评价 查看评价
9.6 内容实用
8.4 简洁易懂
9.5 逻辑清晰
全部 评论 问答 未解决 精华
AR414
参考老师某某集团智能云数据中心布局，有需要的同学可以看一下 github：https://github.com/ar414-com/web/tree/master/htmlgrid
1
2020-02-11

老师，素材在哪里找到

+ 我来回答 回答最高可+2积分
2 回答 811 浏览 3-7 gap 简写
2020-01-06
EWL
float/columns/clear/vertical-align不生效的部分是网格容器的网格项，也就是网格容器中包含的子项这些属性不会再生效，这样讲会更清晰一些，最开始我误以为是容器的这些元素不生效。
1 3-1 display
2019-12-10

关于gap设定一个值的问题

最新回答 / weibo_用户59165236_0
gap简写是行列间距宽度是同一个值吧
1 回答 1023 浏览 3-7 gap 简写
2019-11-11
weixin_慕侠748980
慕课网很好，能将相对新的技术教程视频免费奉献出来给人学习，真的很棒 ，为其点赞！
0 5-4 self
2019-10-07
DJ_Alejandro
.container {
place-items: <align-items> / <justify-items>;
}


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


先垂直后水平，方向一致！！！
0 3-8 items
2019-09-21
DJ_Alejandro
MDN上没有用行和列的方式去描述items，而是明确为水平方向或垂直方向对齐。因而开篇对items描述为沿着行方向或列方向的词语直接导致实例最后结论为行列参数和gap相反。如果按讲师的定义是没错。但是容易产生混淆。最好用水平方向或垂直方的描述，而且和gap之类参数顺序没有比较可言
0 3-8 items
2019-09-21
DJ_Alejandro
我的理解是对的。gap的行间距指的的垂直（行）方向的间距。同样，place-items的行对齐指的也是垂直（行）方向的对齐方式。讲师错误将一行内（水平方向）的每个网格项的列对齐方式视作行对齐方式。gap、items、content的简写方向是一致的！望更正！！！
0 3-8 items
2019-09-21
DJ_Alejandro
为什么视频中我看到的place-items是按“行，列”简写的呢？！视频中说反了。place-items:"start end"渲染结构为右上角---行为start,列为end
0 3-8 items
2019-09-21
一枫红叶QIU
老师讲的非常细致，之前自己杜宇这块只是大概了解，看了视频教程更加深入的学习了一下，这个适合布局提升的学习，很实用！
0 5-4 self
2019-09-19
再次重逢的时间
4-3 老师提到 auto-fill 与 auto-fit 后面搭配固定值时不生效，这句话不够严谨吧
0 4-3 minmax.mp4
2019-09-17
LiuKeqing
老师讲得非常棒，课程中介绍的那个案例，我们的项目中正在使用，貌似更加复杂。^_^
0 5-4 self
2019-09-08
桎梏人
呕吐，哦给，哈哈哈
0 3-2 grid-template 定义行与列的轨道大小
2019-09-06
桎梏人
我是被哦给哦给的给说晕了。。。。为什么老是哦给，一点也不哦给啊。。。
0 3-2 grid-template 定义行与列的轨道大小
2019-09-06
桎梏人
哦给，哦给
0 3-1 display
2019-09-06
首页上一页123456下一页尾页
开始学习
课程须知
学习之前需要掌握HTML基础、CSS基础，position、float、以及flex布局。
老师告诉你能学到什么？
学会使用Grid布局实现二维网格布局系统，灵活尽心布局，学会更主流、更简洁的布局方案。

微信扫码，参与3人拼团

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

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

查看已购买的课程

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

举报

0/150
提交
取消