Grid 容器属性篇（四） | 每天学一点Grid

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情

Grid 容器属性

本文我们先来看一下部分容器属性，justify-content、align-content、place-content、grid-auto-columns、grid-auto-rows 、grid-template、grid属性。

1. justify-content、align-content、place-content 属性

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。

对应的可选取值如下：

.wrapper {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}

来看一个具体的示例：

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    /* 设置容器为 3 行 3 列，每一个单元格宽高为 100px */
    /* 很明显 3 行 3 列的项目无法占满整个容器 */
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    /* 设置整个内容区域在容器里面居中 */
    justify-content: center;
    align-content: center;
}

.item {
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    font-weight: bold;
    line-height: 100px;
}

效果如下：

至于其他属性值，这里不再一一进行示例，仅给出示意图。

justify-content 值为 start 时效果示意图如下：

justify-content 值为 end 时效果示意图如下：

justify-content 值为 center 时效果示意图如下：

justify-content 值为 stretch 时效果示意图如下：

justify-content 值为 space-around 时效果示意图如下：

justify-content 值为 space-between 时效果示意图如下：

justify-content 值为 space-evenly 时效果示意图如下：

align-content 值为 start 时效果示意图如下：

align-content 值为 end 时效果示意图如下：

align-content 值为 center 时效果示意图如下：

align-content 值为 stretch 时效果示意图如下：

align-content 值为 space-around 时效果示意图如下：

align-content 值为 space-between 时效果示意图如下：

align-content 值为 space-evenly 时效果示意图如下：

place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式。

语法如下：

place-content: <align-content> <justify-content>

例如： place-content: space-around space-evenly;

如果省略第二个值，浏览器就会假定第二个值等于第一个值。

2. grid-auto-columns、grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。

来看一个具体的示例：

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    /* 生成一个 2 行 2 列的网格 */
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
}

在上面的代码中，我们指定在容器中生成一个 2 行 2 列，宽高为 100px 的网格。然而我们的项目一共有 6 个，那么就必然多出了 2 个项目无法放入网格中。

这个时候浏览器就会自动生成多余的网格，以便放置项目。

效果如下：

通过 grid-auto-columns、grid-auto-rows 属性，我们就可以指定浏览器自动生成的网格的行高和列宽。

例如在下面的示例中，我们通过 grid-auto-rows 属性来设置浏览器自动生成的网格，行高为 50px。

.wrapper {
    width: 450px;
    height: 450px;
    background: #f3f3f3;
    text-align: center;
    display: grid;
    /* 生成一个 2 行 2 列的网格 */
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    grid-auto-rows: 50px;  /* 自动生成的网格，行高为 50px */
}

.item {
    text-align: center;
    border: 1px solid #fff;
    color: #fff;
    font-weight: bold;
    line-height: 50px;  /* 行高修改为 50px */
}

效果如下：

3. grid-template、grid 属性

grid-template 属性是 grid-template-columns、grid-template-rows 和 grid-template-areas 这 3 个属性的合并简写形式。

grid 属性是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow 这 6 个属性的合并简写形式。