CSS-Grid-Complete-Guidance
css 网格布局完全指南,查看翻译原文地址
术语表
- 网格布局(Grid):由网格容器和网格项组合而成的现代CSS布局形式。
- 网格容器(Grid Container):设置
display:grid
的元素,所有网格项(Grid Items)的直属父级元素。网格容器中的子元素也可以为网格容器——嵌套网格布局。 - 网格项(Grid Items):网格容器的直接子元素(直属后代元素),一旦直属父元素设置为
grid
布局,那么这个父元素的子元素自动为网格项。 - 网格分隔线(Grid Items):组成网格基本结构的分隔线。分隔线可以是垂直的(列分隔线),也可以是水平的(行分隔线)。
- 网格单元(Grid Items):由两个相邻行分隔线和列分隔线交汇出的区域。当执行网格项定位的时候,网格项引用的最小网格单位(注:网格布局中的逻辑概念,实际中并不使用)。
- 网格轨道(Grid Track):网格单元的一种逻辑布局形式,表示网格中的一行或者一列,其前身是Grid Column和Grid row。
- 网格区域(Grid Area):网格单元的一种逻辑布局形式,指定网格分隔线包围起来的区域,包含一个或多个连续相邻的网格单元。
网格属性表
这里给出的是css属性表,不是值,不要搞错了。
网格容器(Grid Container)
- display
- grid
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- justify-items
- justify-content
- align-items
- align-content
网格项(Grid Items)
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self