CSS Grid 网格布局(入门)- 网格单元内容对齐 justify-items 和 align-items

设置网格单元内容对齐有2种:justify-items(水平对齐)、align-items(垂直对齐)。属性设置在网格容器上。

align-items 这个属性在 flex 布局时也有用到,注意区别。

CSS Grid 网格布局 - 单元格水平对齐

.wrap{
	display: grid;
	justify-items: center;
}
grid_网格单元水平对齐 6-1
虚线的是网格线,内容位于网格单元水平方向的中间。

justify-items 的值有 :

  • start: 内容与网格区域的左端对齐。
  • end: 内容与网格区域的右端对齐。
  • center: 内容处于网格区域的中间位置。
  • stretch: 内容宽度占据整个网格区域(默认值)。

CSS Grid 网格布局 - 单元格垂直对齐

.wrap{
	display: grid;
	align-items: center;
}
  • start: 内容与网格区域的顶端对齐。
  • end: 内容与网格区域的底部对齐。
  • center: 内容处于网格区域的中间位置。
  • stretch: 内容高度占据整个网格区域(默认值)。

查看 flex align-items 交叉轴对齐 看区别。

grid_网格单元垂直对齐 6-2
虚线的是网格线,内容位于网格单元垂直方向的中间。

CSS Grid 网格布局 - place-items 简写

place-items 是 justify-items(水平对齐)、align-items(垂直对齐)的简写。

如果第二个值没有写,浏览器就会默认第二个值等于第一个值。

place-items: <align-items> <justify-items>

place-items:start center;

JavaScript 语法:

object.style.justifyItems = "center" ;
object.style.alignItems = "center" ;