CSS Grid

CSS Grid是CSS的一种布局方法，它使得将HTML中的元素按照集合的形式进行编排变得更加容易，更具有灵活性。Grid有许多属性可以控制网格布局的行列、单元格大小以及间距等。

Grid 布局

一个 Grid 布局由一个网格容器（grid container）来定义。一个网格容器是由一系列网格项目（grid items）组成。每一个网格项目都放置在一个所谓的网格单元（grid cell）中，这是由行和列两个轴定义的。

网格轴

一个 Grid 由两个相互垂直的轴来形成，每个轴包含多个网格的单元格，它们称为线（grid lines）。其中一条轴称为更长的主轴（main axis），另一条则称为次轴（cross axis）。

网格项

网格项（grid items）是 Grid 容器中的直接子元素，可以通过 CSS 中的 grid-template-columns 和 grid-template-rows 属性来规定 Grid 容器中行和列的大小。

网格单元

每个网格项被放置在网格单元中，该网格单元可以由一行和一列定义。网格单元的大小由所在行和列的大小确定。

Grid 属性

以下是一些Grid属性，帮助你控制Grid的外观和行为。

grid-template-columns

grid-template-columns 属性定义了 Grid 中采用的列的数量、每列的大小和列之间的间距。有两种方式来指定它的值，一种是使用称为轨道的单位进行定义。

grid-template-columns: 100px 200px 300px;  /* 列宽度为100px、200px、300px */

或者是使用 repeat() 表示法。例如：

grid-template-columns: repeat(3, 1fr);  /* 三个等宽的列 */

这将使列等分容器的宽度。使用 1fr 表示法的意思是，剩余宽度被分成三份，每一份的宽度为 1fr。

grid-template-rows

grid-template-rows 属性定义了 Grid 中采用的行的数量、每行的大小和行之间的间距。该属性的值用法和 grid-template-columns 相同，如下所示：

grid-template-rows: 100px 200px 300px;  /* 行高分别为 100px、 200px 和 300px */

grid-gap

grid-gap 属性定义了 Grid 中行、列之间的间距。这个属性是一个简写属性，包括 grid-row-gap 和 grid-column-gap，它们分别定义了 Grid 的每一行和每一列之间的间距。例如：

grid-gap: 10px;  /* 行、列间距为10px */

grid-auto-rows

grid-auto-rows 属性用于在 Grid 中设置未被 grid-template-rows 属性显式定义的行的大小。例如：

grid-auto-rows: 50px;  /* 只要新的行都是不明确的，就设置新的行大小为50px */

grid-auto-columns

grid-auto-columns 属性用于在 Grid 中设置未被 grid-template-columns 属性显式定义的列的大小。例如：

grid-auto-columns: 50px;  /* 只要新的列都是不明确的，就设置新的列大小为50px */

grid-auto-flow

grid-auto-flow 属性设置元素在“自由空间”上的流动方式，它有三个可能的值：

• row: 元素会水平流动，在“自由空间”上先水平排列再垂直排列。
• column: 元素会垂直流动，在“自由空间”上先垂直排列再水平排列。
• dense: 元素会在网格中的“自由空间”内紧密填充，如果这样可能会破坏源顺序。

grid-template-areas

grid-template-areas 属性定义了网格模板。网格模板包括网格线和网格区。区域应该是被空格包围的字符，换行符会被自动忽略。

.grid-container {
  display: grid;
  grid-template-columns: repeat(5,100px);
  grid-template-rows: repeat(4,100px);
  grid-template-areas:
    "header header header header header"
    "main main main aside aside"
    "main main main aside aside"
    "footer footer footer footer footer";
}

grid-row-start，grid-column-start，grid-row-end，grid-column-end

这些属性控制占用开始和结束行或列的项。例如：

.grid-item {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-column-end: 4;
  grid-row-end: 2;
}

这表示，该项目将跨越从第2个列到第4个列，从第1个行到第2个行的网格中。

总结

CSS Grid 是一个非常强大的 CSS 布局工具，我们可以使用它来轻松布置网格布局。此外，它也提供了许多灵活的选项，如动态变换列和行大小、支持响应式设计、调整网格间距等。因此，在编写网站或网络应用程序时，使用CSS Grid的技能必不可少。