Grid布局

教程

链接

Grid中的container

成为container：
image.png

行和列

image.png

你还可以给每条线取名字

image.png

取名结果

image.png

取名有啥用

item可以设置范围
image.png

fr - free space 巧记：份

image.png
image.png

分区 grid-template- areas

image.png
image.png

空隙gap

image.png

实践

布局

Grid 尤其适合不规则布局

经验

等到 Grid 普及了，前端对 CSS 的要求会进一步降低

练习

完成Grid Garden
Grid布局练习