css 网格布局_CSS网格布局模块简介

它曾经是表格 ，然后是边距和浮点数 ，然后是flexbox ，现在是网格 ：CSS始终致力于寻求新的更好的方法来减轻对Web布局进行编码的古老工作。 CSS网格布局模型可以沿着两个轴 （水平和垂直）创建和更新布局， 从而影响元素的宽度和高度 。

网格布局不取决于标记中元素的位置，因此，可以在不更改布局的情况下改组标记中元素的位置 。 在网格模型中，网格容器元素通过网格线 分为网格列和行 （统称为网格轨迹 ）。 现在，让我们看看如何创建示例网格 。

浏览器支持

在撰写本文时， 最新的IE浏览器和Edge仅支持CSS网格模块。 在其他主要浏览器中，CSS Grid 处于试验阶段 ，您必须在其中手动启用支持 ：

• Firefox：按Shift + F2 ，在浏览器底部显示的GCLI输入栏中输入以下命令： pre pref set layout.css.grid.enabled true 。
• Chrome：浏览chrome://flags URL并启用Experimental Web Platform features 。

所有主要的浏览器支持都可能在2017年初/中期推出 。

样本网格

要将元素转换为网格容器 ，可以使用以下三个display属性之一 ：

1. display: grid; –将元素转换为块网格容器
2. display: inline-grid; –将元素转换为嵌入式网格容器
3. display: subgrid; –如果元素是网格项目，则将其转换为忽略网格模板和网格间隙属性的子网格

就像一个表由多个表单元格组成一样 ，一个网格也由多个网格单元格组成 。 网格项被分配给一组网格单元 ，这些网格单元统称为网格区域 。

我们将创建一个包含五个部分（网格区域）的网格 ：顶部，底部，左侧，右侧和中央。 HTML 在容器div中由五个div组成。

<div class="grid-container">
  <div class="grid-top">Top</div>
  <div class="grid-left">Left</div>
  <div class="grid-centre">centre</div>
  <div class="grid-right">Right</div>
  <div class="grid-bottom">Bottom</div>
</div>

在CSS中， grid-template-areas属性定义具有不同网格面积的网格 。 字符串的值表示网格行 ， 字符串中的每个有效名称均表示一列 。 若要创建一个空的网格单元格，您需要在行字符串中使用点（ . ）字符 。

.grid-container {
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-areas:  "top    top    top"
                        "left   centre right"
                        "bottom bottom bottom";
}
.grid-top {
  grid-area: top;
}
.grid-bottom {
  grid-area: bottom;
}
.grid-left {
  grid-area: left;
}
.grid-right {
  grid-area: right;
}
.grid-centre{
  grid-area: centre;
}

因此，此代码创建了一个具有三行和三列的网格 。 top项目占第一行中三列的面积，而bottom项目占最后一行中三列的面积。 left ， centre和right每个项在中间行占据一列 。

现在我们需要为这些行和列分配尺寸 。 grid-template-columns和grid-template-rows属性定义网格轨迹 （行或列）的大小。

.grid-container {
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-areas: "top    top    top"
                       "left   centre right"
                       "bottom bottom bottom";
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 50px  auto 150px;
}

这就是我们CSS网格现在的外观（带有一些其他样式）：

图像：网格

网格项目之间的空间

您可以使用grid-column-gap和grid-row-gap或它们的长期属性grid-gap 在列和行之间添加空格 。

.grid-container {
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-areas: "top    top    top"
                       "left   centre right"
                       "bottom bottom bottom";
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 50px  auto 150px;
  grid-gap: 5px 5px;
}

在下面，您可以看到grid-gap属性确实在网格项之间添加了间隙。

图片：网格，轨道之间有间隔

对齐网格内容和项目

网格容器（ .grid-container ）的justify-content属性沿内联轴（水平轴）对齐网格的内容，而 align-content属性则沿块轴（垂直轴）对齐网格的内容。 这两个属性都可以具有以下值之一 ： start ， end ， center ， space-between ， space-around和space-evenly 。

如果适用，对齐时轨道（行或列）的大小将缩小以适合内容 。 看看下面与不同值对齐的网格内容的屏幕快照。

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

align-content: start;

align-content: end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

要在其网格区域内对齐单个项目 ，请使用另一对对齐属性 ： justify-items和align-items 。 两者都可以具有以下值之一： start ， end ， center ， baseline （沿着区域的基本网格线对齐项目）和stretch （项目填充整个区域）。

翻译自: https://www.hongkiat.com/blog/css-grid-layout-module/