CSS Grid 网格布局(入门)- 网格对齐 justify-content 和 align-content

有时候网格大小可能小于网格容器的大小,这时需要设置对齐。

对齐有两种:justify-content(水平对齐)、align-content(垂直对齐)。属性设置在网格容器上。

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

CSS Grid 网格布局 - justify-content 水平对齐

.wrap{
	display: grid;
	justify-content: center;
} 
  • start: 网格与网格容器的左端对齐。
  • end: 网格与网格容器的右端对齐。
  • center: 网格处于网格容器的中间。
  • stretch: 没有指定网格项宽度时,其宽度占据整个网格容器(默认)。
  • space-around: 网格项两侧间隔相等,最边缘间隔是中间空格间隔的一半。
  • space-between: 网格项之间间隔相等,最边缘没有间隔。
  • space-evenly: 网格项之间间隔相等,最边缘间隔等于网格项之间的间隔。
gird_网格水平对齐 5-1

查看 space-evenly 实例

查看 flex justify-content 主轴对齐 看区别。

查看不同排序下的 justify-content 水平对齐 实例

CSS Grid 网格布局 - align-content 垂直对齐

.wrap{
	display: grid;
	align-content: center; 
}
  • start: 网格与网格容器的顶端对齐。
  • end: 网格与网格容器的底部对齐。
  • center: 网格处于网格容器的中间。
  • stretch: 没有指定网格项高度时,其高度占据整个网格容器(默认)。
  • space-around: 网格项两侧间隔相等,最边缘间隔是中间空格间隔的一半。
  • space-between: 网格项之间间隔相等,最边缘没有间隔。
  • space-evenly: 网格项之间间隔相等,最边缘间隔等于网格项之间的间隔。
gird_网格垂直对齐1 5-5

查看 flex align-content 多轴线对齐 看区别。

.wrap{
	display: grid;
	grid-auto-flow:column;
	align-content: center; 
}

grid-auto-flow : column 下的垂直对齐 :

gird_网格垂直对齐2 5-6

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

place-content 是 align-content(垂直) 和 justify-content(水平)的简写。 如果第二个值没有写,浏览器就会默认第二个值等于第一个值。

place-content: <align-content> <justify-content>

place-content:end center;

JavaScript 语法:

object.style.justifyContent = "center" ;
object.style.alignContent = "center" ;