Grid布局是CSS3的一种二维布局系统，擅长页面区域划分，提供灵活的排版方式，简化HTML结构，并易于响应式设计。通过grid-template-rows、grid-template-columns等属性设置网格，repeat()函数和auto-fill关键字简化了布局定义。
Grid布局
1.什么是Grid布局
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局：
1.更灵活的排版方式：Grid 布局可以对网页进行更加灵活的布局设计，允许多列和多行的布局，且支持在不同 列和行的交叉位置进行对齐。
2.简化HTML结构：相比传统的 float 布局，Grid 布局可以减少HTML结构中的div和class的使用。
3.更容易实现响应式布局：Grid 布局基于强大的网格系统设计，支持自适应布局与媒体查询等
grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：
-
显式网格属性&
最低0.47元/天 解锁文章
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
