原文地址：认识CSS网格布局原作者：ChrisWright译者：华翔校对：柯柯、倩倩译|布局介绍CSS网格布局是继浏览器Flexbox布局之后最重要的布局方式。我们可以忘掉过去15年来经常使用的各种“神奇数字”、hack和一堆变通布局方案。网格布局提供了一种非常简单的布局声明方式，不需要依赖一些常见的主流css框架，也可以减少很多手动布局的方式。如果你之前对CSS网格布局不熟悉，那么你可以开始了解它。它是一种布局工具，适用于容器元素并指定子元素的间距、大小和对齐方式。CSS网格布局给了我们一个更强大的能力——熟悉的水平和垂直居中布局无需添加标签即可完成。同样，这允许我们根据可用空间自动调整，而不需要媒体查询。学习的最低要求首先，网格布局有很多新的语法需要学习，但你只需要读一点就可以上手。本文将通过示例向您介绍CSS网格布局的各种重要介绍性概念。浏览器兼容性CSS网格布局自Safari10.1开始支持，Firefox52、Opera44、Chrome57和MicrosoftEdge将在Edge15中更新对网格布局的支持。微软的浏览器（IE10-11和Edge13-14）具有较旧的实现，所以有很多限制，我们将简要描述新旧实现之间的差异，以便您知道如何避免它们。对于大多数布局，我们将使用以下查询属性来让旧版浏览器了解它们所理解的功能：@supports(display:grid){.grid{display:grid;}}不支持浏览器@supports或网格浏览器将无法工作。为了正确显示本文中的示例，您需要使用支持网格布局的浏览器。创建带装订线的两列网格为了演示CSS网格布局如何定义列，让我们从以下布局开始：[使用grid-template-columns和grid-gap创建带装订线的两列布局]为了创建在网格布局上面，我们需要用到grid-template-columns和grid-gap。grid-template-columns指示网格中的列如何布局。它的值是由空格分隔的一系列值。这些值表示每一列的大小，值的个数表示列数。例如，一个四列宽度为250px的网格布局可以这样表示：grid-template-columns:250px250px250px250px;也可以使用repeat关键字来表达：grid-template-columns:repeat(4,250px);definethespacinggrid-gap定义网格布局的间距，接受一个或两个值，如果定义了两个值，则表示列（column）和行（row）的间距。在两列布局示例中，我们可以这样使用它：.grid{display:grid;网格模板列：50vw50vw；grid-gap:1rem;}不幸的是，这个间隙会占据容器元素的整个宽度，计算为100vw+1rem，最终这种布局会导致出现水平滚动条。[创建视口单位间距的网格引起的水平滚动条]要解决这个空间溢出问题，我们需要换一种方式，使用小数单位或FR。小数单位小数单位标识可用空间的份额。如果900px是可用空间，一个元素占1份，另一个元素占2份——那么第一个元素的宽度将是900px的1/3，另一个元素是900px的2/3。将视口单位替换为分数的修改后的新代码如下：.grid{display:grid;网格模板列：1fr1fr；grid-gap:1rem;}ContentAlignment使用上面的网格布局，并添加对齐属性将它们定位到指定的轨道（track），这是网格列或行中位置的通用名称。grid和flex布局一样，有一系列的对齐属性——一共有四个值——start、center、end、stretch，对应它的子元素所在的track。stretch和其他的不一样，它会将元素从轨道的头部拉伸到轨道的末端。[align-itemsandjustify-content]在示例中我们希望内容水平和垂直居中，我们可以在容器上设置以下属性：.center-content{display:grid;对齐项目：居中；justify-content:center;}ExampleAddress使用旧的网格布局实现两列布局如果使用旧的网格布局方式创建，我们需要考虑实现上的很多限制。旧的布局方式不仅没有grid-gap，还需要在每个grid元素上声明grid元素的起始位置，否则默认设置为1，这样所有的grid都会堆叠在第一列.旧版本的布局需要添加间距作为网格轨道的一部分，还需要设置每个网格的起始位置：.grid-legacy{display:-ms-grid;-ms-grid-columns:1fr1rem1fr;//替换gapspacing}.grid-legacy:first-child{-ms-grid-column:1;}.grid-legacy:last-child{-ms-grid-column:3;}旧的布局方式实现对齐旧的全高布局方式和IE11中的Flexbox存在同样的问题，在容器上设置最小高度（min-height）不一定生效。这个问题用网格布局来解决比较方便。为了实现这种效果我们在父容器的row属性上使用了minmax方法，其中minmax指定了行或列的最大值和最小值。-ms-grid-rows:minmax(100vh,1fr);在子元素上，我们声明了一个单位为1fr的单列单行网格：.ms-cell{-ms-grid-columns:1fr;-ms-grid-rows:1fr;}最后，由于我们不能像Flexbox或最新的网格布局那样对齐父元素，我们必须使用元素自己的对齐方式：.ms-align-center{-ms-grid-列：1；-ms-grid-column-align：居中；//在新的网格布局中对齐自我-ms-grid-row-align:center;//justify-selfinthenewgridlayout}旧的两列布局示例到这里我们实现如何创建列、实现间距、内容对齐以及对旧网格布局的支持。下面我们来实验一下如何通过grid实现padding。通过CSS网格的负空间网格布局允许您通过grid-column-start属性指定列的开始位置，因此可以在网格内创建填充。【使用grid-template-columns和grid-column-start创建padding】创建padding的一种方法是在column的实际位置上设置一个数字，腾出grid元素原来的空间，grid元素也会被推送到新的网格列。[withgrid-column-startpushfirstitem]在上面的padding示例中，一个div在html结构中包裹了另一个div：
