认识 grid 布局

目前对于界面布局我们已经学习了很多种方式:定位、浮动、flex 布局

flex 布局相对于前面的布局已经很强大了,并且目前对于我们的需求都是可以很好的完成
- 但是 flex 是一个一维的布局方案(one-dimensional layout)
- 它主要的布局是在主轴(main axis)上进行操作,当然也提供了一些交叉轴(croos axis)属性

CSS 为了进一步增强布局能力,提供了 grid 布局
- CSS Grid Layout 是一种基于二维的布局系统
- 它更加强大,同时也更加复杂

目前生产环境的项目基本都是使用 flex 布局为主,因为它的兼容性比 flex 差一些

grid 布局重要概念

Grid Container
- 元素设置 display 为 grid 的盒子

Grid item,单元格称之为 grid cell
- grid container 的直接子项(必须是直接子代)

Grid Line
- 构成网格结构的分割线
- 它们可以是垂直的(列网格线)或水平的(行网格线)

Grid Track
- 两条相邻网格线之间的空间
- 可以看成是网格的行或者列

Grid Area
- 由四条网格线包围的总空间
- 一个网格区域可以由任意数量的网格单元组成

grid 布局常见属性

grid container 常见属性
- display
- 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 item 常见属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
- place-self

参考资料:https://css-tricks.com/snippets/css/complete-guide-grid/

Q.E.D.