网格容器的属性

CSS

启用网格布局⭐

display属性是用来指定布局模式的

• 值为grid, 表示指定该容器使用网格布局, 并作为块级标签存在
  • 
• 值为inline-grid, 同样表示网格布局, 但作为行内标签存在
  • 

定义行列⭐

• grid-template-columns属性定义有多少列,以及每一列的列宽
• grid-template-rows属性定义有多少行, 以及每一行的行高。

定义行列大小为单元格内容大小

实例:

grid-template-columns: 100px 100px 100px;

定义了三列, 且每列都是100px

该属性值中可使用的关键字

child::网格布局中的关键字

自动新增轨道

设置排列方向

• grid-auto-flow属性决定表格内项目的排列方向, 同时指定新增轨道的方向
• 默认值是row，即”先行后列”。
• column，变成”先列后行”。
• row dense和column dense表示即使打乱排列顺序, 也尽可能地排满表格, 不留空位
  • 当下一个项目大小不足以填入空位时, 就先选取后面的来填入空位, 就形成了插队的效果

实例

row

下面的例子让1号项目和2号项目各占据两个单元格，然后在默认的grid-auto-flow: row情况下，会产生下面这样的布局。

row dense

值设为row dense时 该代码的效果如下。

设定自动添加的行列大小

• 当实际item超出了template定义的网格数量, grid会自动创建新的行或列
• grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
  • 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
• 它们的写法与grid-template-columns和grid-template-rows完全相同。

实例

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px; 
}

上面代码指定新增的行高统一为50px（原始的行高为100px）。

设定间距⭐

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。 grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

划分区域

• grid-template-areas属性用于将表格划分为多个区域, 一个区域由单个或多个单元格组成
• 如果某些区域不需要利用，则使用”点”（.）表示。

说明

• 区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。 ^3325cb
  • 比如，区域名为header，则起始位置的水平网格线和垂直网格线叫做header-start，终止位置的水平网格线和垂直网格线叫做header-end。

实例

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a . a'
	                     'b b b'
	                     'c c e';
}

子item默认的对齐方式

• justify-items属性设置item在单元格的水平位置（左中右）
• align-items属性设置item在单元格的垂直位置（上中下）。
• 这两个属性的取值: ^1252d1
  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。
• place-items属性是以上两个属性的缩写形式

实例

整个表格在容器中的对齐方式

• justify-content属性是整个内容区域在容器里面的水平位置（左中右）
• align-content属性是整个内容区域的垂直位置（上中下）。
• 取值:
• start - 对齐容器的起始边框。
• end - 对齐容器的结束边框。
• center - 容器内部居中。
• stretch - 项目大小没有指定时，拉伸占据整个网格容器。
• space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
• place-content属性是align-content属性和justify-content属性的合并简写形式

实例:

• 右对齐:
• space-around:
• space-between:
• space-evenly: