Grid布局
张鑫旭-写给自己看的display: grid布局教程
阮一峰-CSS Grid 网格布局教程
- 在Grid布局中，float，display:inline-block，display:table-cell，vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。这个可以说是Grid布局中的常识，面试经常会问的，一定要记得。
- Grid布局则适用于更大规模的布局（二维布局），而Flexbox布局最适合应用程序的组件和小规模布局（一维布局）
Grid属性分为两类，一类作用于grid容器，一类作用于grid子项目上。属性繁多，按需选用。
作用于grid容器
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- place-items
- justify-content
- align-content
- place-content
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- grid
作用于grid子项目
网友评论