网格布局中 justify-content align-content 和 place-content

有时，整个网格大小可能小于其 网格容器(grid container) 大小。 如果网格轨道（ grid tracks）使用固定的单位设置 大小（比如 px），就可能出现这种情况。在这种情况下，可以设置网格容器内的网格的对齐方式。

Sometimes the edges of the grid do not correspond to the edges of the grid container, which could happen if the grid tracks are sized with fixed units. For such cases, we can justify the grid within the grid container along the row-axis, or in the inline-dimension, by applying the justify-content property to the grid container.

justify-content

此属性沿着 行轴线（水平方向） 在网格容器（grid container）中对齐网格。

值：

• start：将 网格 对齐到 网格容器(grid container) 的左侧起始边缘（Aligns the grid to be flush with the starting edge of the grid container along the row-axis）
  
• center：将 网格 对齐到 网格容器(grid container) 的水平中间位置（Centers the grid within the grid container along the row-axis）
  
• end：将 网格 对齐到 网格容器(grid container) 的结束边缘位置（Aligns the grid to be flush with the ending edge of the grid container along the row-axis）
  
• space-around：在 每个网格 之间放置一个均匀的空间，左右两端放置一半的空间（Distributes the grid tracks evenly within the grid container along the row-axis such that each grid track has equal space on either side of it, with a half-size space on either end.）
  
• space-between：在 每个网格 之间放置一个均匀的空间，左右两端没有空间（Distributes the grid tracks evenly within the grid container along the row-axis with the first grid track flush with the starting edge of the grid container, and the last grid track flush with the ending edge of the grid container.）
  
• space-evenly：在 每个网格 之间放置一个均匀的空间，左右两端放置一个均匀的空间（Distributes the grid tracks evenly within the grid container along the row-axis such that the space between any 2 adjacent grid tracks are the same.）
  

align-content

此属性沿着 列轴线（垂直方向） 在网格容器（grid container）中对齐网格。

值：

• start：将 网格 对齐到 网格容器(grid container) 的起始边缘（Aligns the grid to be flush with the starting edge of the grid container along the column-axis）
  
• center：将 网格 对齐到 网格容器(grid container) 的垂直中间位置（Centers the grid within the grid container along the column-axis）
  
• end：将 网格 对齐到 网格容器(grid container) 的结束边缘位置（Aligns the grid to be flush with the ending edge of the grid container along the column-axis）
  
• space-around：在 每个网格 之间放置一个均匀的空间，上下两端放置一半的空间（Distributes the grid tracks evenly within the grid container along the column-axis such that each grid track has equal space on either side of it, with a half-size space on either end.）
  
• space-between：在 每个网格 之间放置一个均匀的空间，上下两端没有空间（Distributes the grid tracks evenly within the grid container along the column-axis with the first grid track flush with the starting edge of the grid container, and the last grid track flush with the ending edge of the grid container.）
  
• space-evenly：在 每个网格 之间放置一个均匀的空间，上下两端放置一个均匀的空间（Distributes the grid tracks evenly within the grid container along the column-axis such that the space between any 2 adjacent grid tracks are the same.）
  
  

place-content

place-content 是设置 align-content 和 justify-content 的简写形式。

值：

• < align-content > < justify-content >：第一个值设置 align-content 属性，第二个值设置
  justify-content 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。