CSS网格布局简介（包含示例）

CSS Grid has taken over the world of web design. It’s really cool. There are plenty of tutorials, blogs and articles on the internet, which are great sources of knowledge.

CSS Grid接管了Web设计的世界。 这真的很酷。 互联网上有大量的教程，博客和文章，它们是丰富的知识来源。

But the majority of them teach you the basics with very few real examples. So in this guide, we'll look at examples as we learn.

但是其中大多数都通过很少的实际示例来教您基础知识。 因此，在本指南中，我们将在学习过程中看一些示例。

什么是网格？ (What is Grid?)

CSS Grid allows us to write better layouts using the in-browser capability of grids. Prior to CSS Grid, we either had to use our own custom grid system or something like Bootstrap.

CSS Grid允许我们使用网格内的浏览器功能编写更好的布局。 在使用CSS Grid之前，我们要么使用自己的自定义网格系统，要么使用Bootstrap之类的东西。

These other options work fine, but CSS grid takes the pain out of most of the things we faced in those solutions.

这些其他选项可以正常工作，但是CSS网格可以减轻我们在这些解决方案中面临的大部分麻烦。

CSS Grid makes it a piece of cake to develop simple and complex layouts. In this blog we will learn some basic terminologies and then go ahead with a simple layout example.

CSS Grid使开发简单和复杂的布局变得轻而易举。 在此博客中，我们将学习一些基本术语，然后继续介绍一个简单的布局示例。

基本术语 (Basic Terminologies)

The basic terms associated with CSS Grid are as follows:

与CSS Grid相关的基本术语如下：

1. Columns
   列
2. Rows
   行数
3. Cells
   细胞
4. Grid Lines
   网格线
5. Gutter
   排水沟

All the terms are explained in the diagram above. This example is a 3x2 column grid, which means 3 columns and 2 rows.

上图中说明了所有术语。 此示例为3x2列网格，表示3列和2行。

示例布局 (Example Layout)

Now that the basic concepts are out of the way, we are going to use these concepts to make an example layout like the below:

既然基本概念已不复存在，我们将使用这些概念进行如下示例布局：

As you can see, there is a header and a footer. Then the center row has 3 columns with nav in the first column sidebar on the right, and the main content area in the center (which occupies most of the row).

如您所见，有一个页眉和页脚。 然后，中心行在右侧的第一列侧栏中有3列导航栏，中间是主要内容区域(占据了该行的大部分)。

Below is the sample HTML for this example.

以下是此示例的示例HTML。

<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>

Now that the HTML is out of our way, let's dig into the CSS. First and foremost, let's give it some styling so that our HTML looks like the above. These CSS rules are not part of CSS grid, so you can omit them if you want.

现在，HTML已经不合我们了，让我们深入研究CSS。 首先，让我们给它一些样式，以便我们HTML像上面一样。 这些CSS规则不是CSS网格的一部分，因此您可以根据需要省略它们。

.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}

As you can see, I am styling all the items inside a wrapper container. I am setting its background color to

orange

and giving

bottom

and

right

margins.

I'm setting

display

flex

just to align items dead center by setting

justify-content

and

align-items

to

center

.

如您所见，我正在对包装容器中的所有项目进行样式设置。 我将其背景色设置为

orange

并给出了

bottom

和

right

margins.

我设置

display

flex

的设置只是为了对齐项目死点

justify-content

和

align-items

至

center

。

Next, let's get into the CSS Grid part of it.

接下来，让我们进入它CSS Grid部分。

.wrapper {
display: grid;
grid-template-columns: 1fr 5fr 2fr;
grid-template-rows: 5fr 20fr 5fr;
grid-gap: 10px;
height: 720px;
}

In the above piece of code we are setting

display

to

grid

– hence the title of this topic. That is how we convert a container into

grid

.

在上面的代码中，我们将

display

设置为

grid

-因此，本主题的标题。 这就是我们将容器转换为

grid

。

Next we set the columns and rows. We'll do this by using the

grid-template-columns

and

grid-template-rows

properties.

grid-template-columns

allows us to set the number of columns with their appropriate

width

.

grid-template-rows

allows us to set the number of

rows

with their appropriate

height

.

接下来，我们设置列和行。 我们将使用

grid-template-columns

和

grid-template-rows

属性来完成此操作。

grid-template-columns

允许我们设置具有适当

width

的列数。

grid-template-rows

允许我们设置具有适当

height

的

rows

数。

In the example above, there are 3 columns with first column taking

1 fraction

, the second column taking

5 fraction

, and the third column

2 fractions

. A single fraction unit means “one piece of however many pieces we are splitting this into”.

在上面的示例中，有3列，其中第一列占

1 fraction

，第二列占

5 fraction

，第三列占

2 fractions

。 单个小数单位表示“将我们拆分成的一件或多件” 。

If you look at the same example above the same concept applies to

rows

. There are three rows, and the first row contains the

header

which takes the entire row across all three columns. The second row takes the nav, contents, and aside, whereas the footer goes to the third and last row and takes up all three columns.

如果您看上面的同一示例，则同一概念适用于

rows

。 一共有三行，第一行包含

header

，该

header

占据了整行中的所有三列。 第二行获取导航，内容和一旁的内容，而页脚转到第三行和最后一行并占用所有三列。

This means the first and last rows take up the same amount of height, that is

5 fractions

. And the center row takes up the rest of the remaining height.

这意味着第一行和最后一行占据相同的高度，即

5 fractions

。 中排占据了其余的剩余高度。

Next we will also create a gutter of 10px. We can do this in CSS Grid by using the

grid-gap

property. Lastly, we set a height for our wrapper container.

接下来，我们还将创建一个10px的装订线。 我们可以通过使用

grid-gap

属性在CSS Grid中完成此操作。 最后，我们为包装容器设置一个高度。

If we take a look at it in the browser we'll get the result we're looking for:

如果在浏览器中查看它，将得到我们想要的结果：

Now let's make it look more like we want it to look by setting some properties for the header and footer. We are going to tell the header and footer to take up their entire rows.

现在，通过设置页眉和页脚的一些属性，使其看起来更像我们想要的样子。 我们将告诉页眉和页脚占用整个行。

We'll do this by using the

grid-column-start

and

grid-column-end

properties, like this:

我们将通过使用

grid-column-start

和

grid-column-end

属性来做到这一点，如下所示：

header {
grid-column-start: 1;
grid-column-end: 4;
}

footer {
grid-column-start: 1;
grid-column-end: 4;
}

As you can see, both the header and footer start from

grid line

1 and end at

grid line

4. This allows them to take up their entire rows. This will yield the exact output we are looking for, as below:

如您所见，页眉和页脚都从

grid line

1开始，到

grid line

4结束。这使它们可以占用整个行。 这将产生我们想要的确切输出，如下所示：

完整的代码 (Complete Code)

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid</title>
<style type="text/css">
.wrapper {
display: grid;
grid-template-columns: 1fr 5fr 2fr;
grid-template-rows: 5fr 20fr 5fr;
grid-gap: 10px;
height: 720px;
}

header {
grid-column-start: 1;
grid-column-end: 4;
}

footer {
grid-column-start: 1;
grid-column-end: 4;
}

.wrapper * {
background: orange;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1px;
margin-right: 1px;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="items">HEADER</header>
<nav class="items">NAV</nav>
<div class="items contents">CONTENTS</div>
<aside class="items">ASIDE</aside>
<footer class="items">FOOTER</footer>
</div>
</body>
</html>

That is it for this article. You can follow me here for more articles. If you liked it, don’t forget to share it on social media.

本文就是这样。 您可以在这里关注我以获取更多文章。 如果您喜欢它，请不要忘记在社交媒体上分享它。

翻译自: https://www.freecodecamp.org/news/intro-to-css-grid-layout/