CSS | 网格属性

在CSS3中，我们可以使用网格布局来更加方便地实现各种复杂的布局效果。网格布局是一种二维布局系统，基于列（列网格）和行（行网格）的结构。

网格容器属性

要使用网格布局，我们需要首先创建一个网格容器，这可以通过设置其display属性为grid来实现。在此基础上，我们可以使用如下属性来控制网格容器的行列数、列宽行高、列间距行间距等。

grid-template-columns 和 grid-template-rows

grid-template-columns属性用于定义列宽，grid-template-rows属性用于定义行高。可以通过指定每个列或行的宽度或高度，或者使用重复函数来自动生成多个相同尺寸的列或行。

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr; /* 定义3个列，分别宽度为100px，占据剩余宽度的1/3和2/3 */
  grid-template-rows: 50px repeat(3, 1fr); /* 定义4行，第一行高度为50px，后3行高度平分剩余空间 */
}

grid-gap

grid-gap属性用于设置列间距行间距。可以通过指定横向和纵向的间距来定义。

.container {
  display: grid;
  grid-gap: 10px; /* 列间、行间距均为10px */
}

grid-template-areas

grid-template-areas属性用于通过区域名称来定义网格容器的布局。可以通过在CSS中定义一个二维数组来实现。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

网格项属性

网格项是指网格容器中用于布局的子元素。对于每个网格项，我们可以使用如下属性来控制其在网格容器中的位置、大小等。

grid-column-start/grid-column-end 和 grid-row-start/grid-row-end

grid-column-start属性用于指定网格项开始所属的列，grid-column-end属性用于指定网格项结束所属的列，grid-row-start属性和grid-row-end同理。

.item {
  grid-column-start: 2; /* 开始所在列为第2列 */
  grid-column-end: 4; /* 结束所在列为第4列 */
  grid-row-start: 1; /* 开始所在行为第1行 */
  grid-row-end: 3; /* 结束所在行为第3行 */
}

grid-column 和 grid-row

grid-column属性可以更加方便地同时设置grid-column-start和grid-column-end，grid-row属性同理。

.item {
  grid-column: 2 / 4; /* 开始所在列为第2列，结束所在列为第4列 */
  grid-row: 1 / 3; /* 开始所在行为第1行，结束所在行为第3行 */
}

grid-area

grid-area属性可以直接指定网格项所占据的列和行，以及所在区域的名称。

.item {
  grid-area: 2 / 2 / 4 / 4; /* 开始所在列为第2列，结束所在列为第4列，开始所在行为第2行，结束所在行为第4行 */
}

justify-self 和 align-self

justify-self属性用于单独控制网格项在所属列中的水平对齐方式，align-self同理用于控制垂直对齐方式。

.item {
  justify-self: center; /* 水平居中对齐 */
  align-self: end; /* 垂直底部对齐 */
}

总结

本篇介绍了CSS中网格属性的用法。通过了解这些属性，我们可以更加便利地控制网格容器的行列数、列宽行高、列间距行间距等，并能够更加方便地设置网格项的位置、大小、对齐方式等。