CSS Grid 布局是CSS中最强大的布局系统,与flexbox的一维布局系统不同,CSS Grid是一个二维布局系统,它可以同时处理行和列.
第一个Grid布局
css Grid布局由两个核心组成部分,warpper(父元素)和items(子元素).warpper是实际的grid(网格),items是网格的内容.
下面是一个warpper元素,内部包含了6个items:
1 | <div class="warpper"> |
要把warpper元素变成一个grid(网格),只需要把它的display
属性设置为grid
即可.
1 | .warpper{ |
这时我们还没有写任何样式,他会简单的将6个div堆叠在一起.
Columns(列)和rows(行)
为了使其成为二维的网格容器,我们需要定义行和列.让我们创建两行三列,使用grid-template-cloumns
和grid-template-rows
属性.
1 | .warpper{ |
我们为grid-template-cloumns
写入了3个值,这样我们就得到了3列,每列的值代表列的宽度.而grid-template-rows
代表行数及行的高度.
放置items(子元素)
为了帮助理解,我们在每个items(子元素)加上单独的class.
1 | <div class="warpper"> |
现在我们来创建一个 3*3的grid:
1 | .warpper{ |
我们只在页面上看到3-2的grid,而我们定义的是3-3的grid.这是因为我们只有6个items来填充这个网格.我们我们再追加3个items,name最后一行也会被填满.
要定位和调整items大小,可以使用grid-cloumn和grid-row属性来设置.
1 | .item1{ |
上面的样式表示,我们希望item1占据从第一个网格线开始,到第四条网格线结束.换句话说它将独占一行.而剩下的items都推到了下一行.
这种形式也可以缩写为:
1 | .item1{ |
相关术语
- 网格容器(Grid):应用
display:grid
的元素,items的直接父级元素. - 网格项(items): 网格容器的直接子元素,后代元素不是.
- 网格线(Grid-line):构成网格结构的分界线.
- 网格轨道(Grid-Track):两条相邻网格线之间的空间.
- 网格单元格(Grid-cell):两个相邻行与相邻列之间的空间.
- 网格区域(Grid-Area):四条网格线包围的总空间.
父元素 网格容器属性
display
将元素定义为网格容器,并为其建立新的网格式上下文.
- grid : 生成一个块级网格
- inline-grid: 生成一个内联网格
- subgrid: 嵌套的子网格.
在网格容器中使用float,clear,column,vertical-align不会产生任何效果.
grid-template-cloumns/rows
使用空格分割值列表,用来定义网格的行和列.可以是长度值和百分比,和自动分配(auto)或网格线名称
grid-template-areas
指定Grid Area名称来定义网格模板.一个.
号代表一个空的单元.你可以使用任意数量的.
只要这些.
之间没有空隙隔开就表示一个个的单元格.
:由items的grid-area指定的区域名称 - .(点号):代表一个空网格单元
- none:不定义网格区域
1 | .container{ |
当你命名网格区域后,该区域两端的网格线实际上是自动命名的,如果你的网格区域名字是foo,则起始行网格线和列网格线是foo-statrt,最后的网格线是foo-end.则意味着一个网格线可能有很多名称.
grid-template
用于定义grid-template-rows
,grid-template-cloumns
,和grid-template-areas
的缩写.
- none:将所有的属性设置为初始值.
- subgrid:将rows和cloumns设置为subgrid,areas设置为初始值.
/ :将rows和cloumns设置为特定值,areas为none.
grid-column-gap/grid-row-gap
指定网格线的大小,可以把它想象为设置列/行之间间距的宽度.值为长度值.
grid-gap
grid-column-gap/grid-row-gap的缩写语法
justify-items
网格容器的水平对其方式,这些行为也可以通过items的justify-self属性设置:
- start 左侧对其
- end 右侧对其
- center 居中对齐
- stretch 填满区域宽度
align-items
网格容器的垂直对齐方式:
- start 顶部对齐
- end 底部对齐
- center 垂直居中
- stretch 填满区域高度
justify-content/align-content
有时,网格容器的内容小于整体容器的大小,可以设置内容在容器中的对齐方式.
- start 左对齐
- end 右对齐
- center 居中
- stretch 填充
- space-around 左右两边都有空间,空格之间距离相等
- space-between 左右两边没有空间,空格之间距离相等
- space-evenly 左右和每个空间距离相等
grid-auto-columns/grid-auto-rows
指定自动生成隐式网格轨道,但定义行和列自动超出网格范围时,隐式网格轨道创建.值为长度,百分比等等.
grid-auto-flow
如果你有一些未明确放置的网格,自动放置算法会自动放置这些项.
- row: 依次填充每行
- column:依次填充每列
- dense: 出现较小的网格项时,尝试填充网格中较早的空缺.但它可能导致你的网格项出现混乱.
子元素 网格项items属性
grid-column-start/end
通过指定网格线来确定网格在容器中的列的起始位置
grid-row-start/end
通过指定网格线来确定网格在容器中的行的起始位置
grid-column/grid-row
上面两者的缩写
grid-area
为网格项提供一个名词,一遍容器grid-template-areas属性创建模板进行引用.也可以作为grid-row
和grid-cloumn
的缩写.
justify-self/align-self
items的水平/垂直对其方式