项目的立项目标和动机_请参考规格：背景和动机

项目的立项目标和动机

In the previous article in this series we took a look at the introduction to the grid spec, and in particular why we have grid layout as well as flexbox. This time I am taking a look at the background and motivation section, which gives some examples of the sort of problems Grid aims to solve.

在本系列的上一篇文章中，我们介绍了网格规范的介绍 ，尤其是为什么我们拥有网格布局以及flexbox。 这次，我看一下背景和动机部分，其中提供了Grid旨在解决的这类问题的一些示例。

As these examples come with some code, I thought I would also build them as live examples that we can refer to. This part of the spec looks forward to things that will be described in detail later, so I’ll link out to some other examples in order that you can see how each of the different things works.

这些示例带有一些代码，我想我也应该将它们构建为我们可以参考的实时示例。 规范的这一部分期待稍后将进行详细描述的事物，因此，我将链接到其他一些示例，以便您可以了解每种不同事物的工作方式。

The first two paragraphs describe issues that, if you have ever built a web site that had more than a single column layout, you are likely to be familiar with. Our older layout methods were not designed for the responsive web of multiple devices sizes and capabilities that we now have to develop for. Grid layout aims, for the first time, to give us a method of dividing up the available area, and being able to redefine it for different screen sizes. The spec then shows us a couple of examples.

前两段描述的问题是，如果您曾经建立过一个网站而不只是一个列布局，那么您可能会很熟悉。 我们较旧的布局方法并非针对现在必须开发的具有多种设备尺寸和功能的响应式网络而设计。 网格布局的目的是首次为我们提供一种划分可用区域的方法，并能够针对不同的屏幕尺寸对其进行重新定义。 然后，规范向我们展示了两个示例。

1.1.1使布局适应可用空间 (1.1.1 Adapting layouts to available space)

The first example describes a game layout, and provides some very barebones HTML and CSS to demonstrate how this game is laid out. You can see that on CodePen with a little extra styling to help demonstrate some of the features more clearly.

第一个示例描述了游戏布局，并提供了一些非常准系统HTML和CSS来演示该游戏的布局。 您可以在CodePen上看到一些额外的样式，以帮助更清晰地演示一些功能。

See the Pen Refer to the spec: background example 1 by rachelandrew (@rachelandrew