CSS 网格(Grid)布局

CSS Grid 布局是一种二维布局方式可以将页面分成行和列并在其中放置元素。使用 Grid 布局时需要定义网格容器和网格项目。

第一步在网格容器元素通常是一个 div上设置 display: grid; 来启用 Grid 布局。

第二步使用 grid-template-columns 和 grid-template-rows 属性定义网格的行和列。例如如果你想要创建一个 3x3 的网格可以使用

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

 第三步在网格容器内放置网格项目元素。使用 grid-column 和 grid-row 属性来定位网格项目。例如如果你想要将一个元素放在第一行第二列可以使用

grid-column: 2 / 3;
grid-row: 1 / 2;

还有其他一些属性可以帮助你更好地控制网格布局例如 grid-gap 在网格中添加间距、justify-content水平对齐、align-content垂直对齐 等。

除了上述的属性外还有一些其他的属性可以帮助你更好地控制网格布局这些属性包括

• grid-template-areas: 指定网格的名称和网格项目的布局。
• grid-area: 指定网格项目所在的网格区域。
• grid-column-start, grid-column-end, grid-row-start, grid-row-end: 分别指定网格项目在网格中的起始和结束位置。
• grid-auto-columns, grid-auto-rows: 指定网格中除了已定义行和列以外自动生成的行和列的大小。
• grid-auto-flow: 指定网格中空白区域如何填充网格项目。

使用 CSS Grid布局还有很多可能性并且结合Flexbox 布局可以更好地控制元素的定位。

需要注意的是这些属性需要在网格容器上使用而不是网格项目上使用。此外CSS Grid 布局是一个相对新的技术并不是所有浏览器都支持。因此在使用前应检查浏览器兼容性。