简单快速入门的 CSS Grid 网格布局教程

grid 布局是CSS中强大的布局系统,是一个二维的栅格布局系统,意味着它可以同时处理列和行。 它不仅适用响应式页面的开发,同时也提供了更加灵活行列布局设置。

Flex 是为一维布局设计的,而 Grid 网格布局是二维布局。在 css grid 网格布局中, 被设置为 grid 的称为网格容器,容器的直接子元素称为网格项。学习 grid 的第一步就 是了解网格布局的重要术语,快速查看入门教程 grid 布局

CSS Grid 网格布局 - 重要属性

属性 描述
设置在网格容器上
display display grid 或者 inline-grid 声明元素为网格容器
行和列 grid-template-columns 设置网格列
grid-template-rows 设置网格行
网格排序 grid-auto-flow 设置网格项如何排序
网格对齐 justify-content 网格在网格容器的水平方向如何对齐
align-content 网格在网格容器的垂直方向如何对齐
place-content 简写:<align-content>  <justify-content>
网格单元对齐 justify-items 网格项在网格单元的水平方向如何对齐
align-items 网格项在网格单元的垂直方向如何对齐
place-items 简写:<align-items>  <justify-items>
网格单元间距 grid-row-gap 设置行间距
grid-column-gap 设置列间距
gap 简写:<grid-row-gap>  <grid-column-gap>
默认尺寸 grid-auto-columns 指定未设置尺寸的列的宽度
grid-auto-rows 指定未设置尺寸的行的高度
网格区域 grid-template-areas 设置网格区域
设置在网格项上
网格项定位 grid-column-start 网格项在第几根列线上开始
grid-column-end 网格项在第几根列线上结束
grid-row-start 网格项在第几根行线上开始
grid-row-end 网格项在第几根行线上结束
grid-area 网格项定位于哪个区域
网格项对齐 justify-self 网格项在网格单元的水平方向如何对齐
align-self 网格项在网格单元的垂直方向如何对齐