使用CSS Grid创建分散式不规则网格布局

Chinese (Simplified) (中文（简体）) translation by Jacky Lee (you can also view the original English article)

在本教程中，我们将使用CSS Grid来帮助我们创建一个“分散式不规则网格布局”，这种布局使用传统的CSS布局方法一直很难实现。

下面是我们将要实现的目标（查看更大的版本以查看整体效果）：

这个设计基于安东尼•哈蒙（Anthony Harmon）的作品，他的作品非常适合作为我们的演示。来看一看他为Rel Acoustics所做的布局：

Web图形设计

多年来，Web设计人员已经习惯于观察文档流和资源顺序，用浮动的盒子来创建布局，像搭积木一样让它们填充到页面中。在响应式设计的世界里，这种方法似乎非常自然。然而，这与平面设计的布局方法相去甚远，在平面布局中，设计师可以自信地将文字和图像精确地放置在他们想要的地方，从而带来更富有实验性和视觉上更加大胆的布局。

比让我们沿x轴和y轴排列元素更为先进的是，CSS Grid可以帮助我们突破布局瓶颈，并让我们的设计变得更加放得开！

“我们必须开始重新构思，看看有哪些适合重叠元素的好的图形设计。”– Jen Simmons

现在让我们开始着手解决这个问题。

1. 定义格子

网格的列不必与用作参考的页面完全一致。我们参考上面布局的一部分, 然后画出网格大致的外观。

注意: 我们在本教程中只构建一个section。因为用同样的方法，可以使用独立的网格布局生成页面中的每个section。

我们将从一些标签开始, 一个网格容器:

<section class="grid1">
  
</section>

接下来, 在该容器上, 我们将声明display: grid;，然后定义列和行。

.grid1 {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
  grid-template-rows: 100px auto 15px auto auto;
}

列的布局正如在上面的图像中看到的那样。fr 单位是整个宽度的一小部分, 所以第一列占3fr, 第二个更宽一些, 占6fr。（译者注：CSS中，fr是一个新增的自适应单位，用于在一系列长度值中分配剩余空间，如果已指定了多个部分，则剩下的空间根据各自的数字按比例分配。）总的布局包括27单位宽度-非常经典的网格比例!

行的定义略有不同。您会发现我们混合使用了固定像素值和auto。使用 "auto"值的行会随内容的变化而自动伸缩。

2. 制作图像

让我们开始制作图像。对于标签，我们有两个选择：要么我们使用 img 元素, 要么我们使用其他可使用图像作为背景的元素。

我们可以在 img 元素中使用object-fit: cover;, 但那会非常棘手——何必让使我们陷入困境呢？!因此, 在这个演示教程中, 我们将使用后者, 因为这将在图像如何随流体布局发生比例变化方面给我们带来更大的灵活性。

Hello！先来一些整齐有序的div：

  <div class="img1"></div>
  
  <div class="img2"></div>
  
  <div class="img3"></div>

再给它们加上背景图像:

.img1 {  
  background: url(wooden.jpg);
  background-size: cover;
}

.img2 {  
  background: url(speaker.jpg);
  background-size: cover;
}

.img3 {  
  background: url(waves.jpg);
  background-size: cover;
}

3. 放置图像

网格的自动定位算法已经把它们整齐地放在我们的网格上了, 但让我们来更具体一些。我们将使用网格线来决定每个元素的开始和结束位置。

我们的第一个图像从第1列开始, 结束于第3列。我们可以这样定义:

grid-column: 1 / 3;

或者像这样:

grid-column: 1 / span 2;

就行而言, 我们的第一幅图片需要从第2行开始, 然后在第5行上结束, 我们可以这样声明:

grid-row: 2 / 5;

或者这样:

grid-row: 2 / span 3;

现在让我们为其他两个图像做同样的事。这是你最后应该做的:

诚然, 这并不特别令人印象深刻, 但这是因为大多数的行还没有任何高度。一旦我们在下一步开始添加更多的内容它们就会有高度了。

有关grid-column和grid-row如何工作的更多内容, 请查看以下快速教程:

4. 添加更多内容

现在让我们添加文本内容，使其包裹在 blockquote标签中，并添加对动作块的调用。您可以将这些内容添加到任何您喜欢的位置，使其成为. grid1 容器的子元素, 资源顺序真的无关紧要。

<div class="strapline">
    <blockquote>“Almost immediately, word spread of a Welshman who had built this incredible sounding sub bass system, and soon enough audiophiles began searching out these legendary subs that were built like no other.”</blockquote>
</div>
  
<div class="cta-wrapper">  
    <div class="cta">
        <h1>Gibraltar</h1>
        <p>Introducing 212/SE, our most powerful and agile subwoofer, designed exclusively for larger systems and rooms to allow superior state of the art speakers to spring to full voice.</p>
        <a class="button" href="">View Product Details →</a>
    </div>
</div>

接下来，在我们添加任何样式之前，将它们定位在网格上，就像我们对图像所做的那样：

.strapline {
  grid-column: 3 / span 3;
  grid-row: 2 / span 1;
}

.cta-wrapper {
  grid-column: 4 / span 2;
  grid-row: 4 / span 2;
}

现在看起来好多了!

在这一点上, 值得注意的是, 如果你想，你可以使用 z-index。默认情况下, 元素会按资源顺序堆叠；标签中的第一个内容将放在底部，随后声明的内容将位于顶部。但如果我们给.img1应用z-index: 1;，它就会堆叠在.img2之上。

5. 检查未检查的内容

现在切换到浏览器的开发者工具，这将给你的网格布局提供一些帮助。在 Chrome 的开发者工具中, 选择元素将会显示网格线和测量, 如下所示:

火狐中的开发者工具会做得更多, 允许您使用 "布局" 选项卡下的控件来覆盖网格。可以显示行号、区域名称, 并在较小的缩略图版本上导航网格区域:

提示: 在 "Rules" 选项卡下查看时, 单击display右侧的grid图标以切换叠加:

通过检查网格, 您很快就会认识到, 如果您发现任何网格项目放错了位置, 则是因为在某处跳过了一行, 或者错误地命名了某些内容。

6. 给内容添加样式

一些快速的字体声明和按钮样式会让页面看起来更好, 无需过多效果。我们接下来在文档的<head>部分链接一些谷歌字体。

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Playfair+Display:400,400i,700" rel="stylesheet">

我们给body使用的是 Open Sans, 为blockquote和heading使用 Playfair Display。让我们应用这些字体:

body {
  color: #292929;
  font: 1em/1.7 'Open sans', sans-serif;
}

blockquote {
  font: italic 1.1em/2 'Playfair Display', serif;
  margin: 0 0 2em 0;
}

.cta h1 {    
  font: bold 6em/1 'Playfair Display', serif;
  margin: 0 0 20px 0;
  position: relative;
}

现在添加按钮样式:

.button {
  display: inline-block;
  color: white;
  text-decoration: none;
  background: #292929;
  padding: .8em 1.5em;
}

.button:hover {
  background: black;
}

最后, 我们让blockquote 居中对齐, 然后在动作调用中添加一些padding, 帮助填充它所在的行。以下是页面现在应该呈现的样子:

请注意, 我们正在为一个比较宽的视图中构建布局。您在教程中看到的页面可能看起来不太理想。

7. 添加视觉风格

我们正在达成的设计目标还有两种视觉风格没有使用。我们可以通过多种方式来添加这些, 但因为它们本身不是content，我们将使用CSS伪元素来添加它们。首先,添加blockquote上面的曲线:

.strapline {
  margin-top: 100px;
  position: relative;
}

.strapline::before {
  content: '';
  display: block;
  background: url(wavy.svg) repeat-x;
  background-size: cover;
  width: 20%;
  height: .5em;
  position: absolute;
  top: -3em;
  left: 40%;
}

这些样式在类名为.strapline的div元素中使用::before伪元素, 通过负的top定位将其定位于容器上方。这是完美的居中, 还记得吗？我们定义了第一行行高为100px，从而使它拥有足够的空间。

我们将为标题中 SVG 格式的徽标做类似的定义:

  .cta h1::before {
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    background: url(badge.svg) no-repeat center center;
    background-size: 80%;
    position: absolute;
    left: -120px;
    top: 0;
  }

我们再次使用一个伪元素, 因为它只是一个视觉修饰, 并非有价值的内容。当然这并不是说您不能将其作为像<img>标签那样来添加。然后, 您可以使用 CSS Grid或 Flexbox来具体布局内容, 您有多种选择来玩转布局!

我们现在已经创建了一个非常稳固的分散式不规则网格布局! 是时候采取下一步行动了。

8. 下一步: 浏览器支持

CSS Grid现在的支持程度已经不错, 尽管如此， IE11 仍然需要一个前缀版本, 因此您可能希望在 @supports 声明中包含网格样式，像下面这样:

@supports (display: grid) {
 
    /* grid layout */
    .grid1 {
        display: grid;
        grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
        grid-template-rows: 100px auto 15px auto auto;
    }
    
    ...
 
}

任何不能正确支持 CSS Grid的浏览器都将忽略您在该声明中放置的任何功能, 这给我们提供了一个备用选项。

如果希望获取有关如何进行样式备用的点子，可以看看这篇文章：Grid “fallbacks” and overrides 。

9. 下一步: 响应式布局

我们的布局在较大的屏幕上看起来很棒, 但是当缩放到较小的视口 (如嵌入到本教程中的视口时), 会出现一些裂痕。如何以一种响应式的方式来处理呢？添加媒体查询将允许您首先建立样式, 然后逐步建立布局, 使得网格在视口变得更宽时能够随之适应视口的变化:

.grid1 {
    display: grid;
    grid-template-columns: 1fr 1fr;   
}

@media only screen and (min-width: 768px) {
  
  .grid1 {
    grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
    grid-template-rows: 100px auto 15px auto auto;
  }
  
}

您也可以选择隐藏我们在较小的设备上创建的视觉修饰, 保存它们, 直到有更多的屏幕可以正常显示这些视觉效果时再用也不迟。你来做出选择吧!

这里有一个示例, 用于说明如何使这个特定的设计变为响应式布局。

小结

通过本教程，给您展示了一种用 CSS 网格实现页面布局的替代方案。忘记你一直在练习着的浮动和定位布局，改掉那些旧习惯吧! 现在开始探索更复杂的布局, 看看我们能否让Web世界变得更加趣。