初学者css常见问题_5分钟内学习CSS Grid-初学者教程

初学者css常见问题

Grid layouts are fundamental to the design of websites, and the CSS Grid module is the most powerful and easiest tool for creating it. I personally think it’s a lot better than for example Bootstrap (read why here).

网格布局是网站设计的基础，而CSS网格模块是创建它的最强大，最简单的工具。我个人认为它比Bootstrap好得多( 在这里阅读为什么)。

The module has also gotten native support by the major browsers (Safari, Chrome, Firefox, Edge), so I believe that all front-end developer will have to learn this technology in the not too distant future.

该模块还获得了主要浏览器 (Safari，Chrome，Firefox，Edge)的本地支持，因此我相信所有前端开发人员都必须在不远的将来学习该技术。

In this article, I'll take you through the very basics of CSS Grid as quickly as possible. I’ll be leaving out everything you shouldn’t care about until you’ve understood the basics.

在本文中，我将带您尽快了解CSS Grid的基础知识。在您了解基本知识之前，我将遗漏您不关心的所有内容。

I’ve also created a free CSS Grid course. Click here to get full access toit.

我还创建了一个免费CSS Grid课程。单击此处以获得对它的完整访问。

Alternatively, check out this article, which explains what you’ll learn throughout the course:

另外，请查看本文，其中介绍了您将在整个课程中学到的内容：

Now let’s jump into it!

现在开始吧！

您的第一个网格布局 (Your first grid layout)

The two core ingredients of a CSS Grid are the wrapper (parent) and theitems (children). The wrapper is the actual grid and the items are the content inside the grid.

CSS网格的两个核心要素是包装器 (父级)和项目 (子级)。包装器是实际的网格，项目是网格内的内容。

Here’s the markup for a wrapper with six items in it:

这是其中包含六个项目的包装器的标记：

<div class="wrapper"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>

To turn our wrapper div into a grid, we simply give it a display ofgrid:

要将包装器div转换为网格，我们只需为其显示grid ：

But, this doesn’t do anything yet, as we haven’t defined how we want our grid to look like. It’ll simply stack 6 div'son top of each other.

但是，这还没有做任何事情，因为我们还没有定义我们希望网格的外观。它将仅将6 div's堆叠在一起。

I’ve added a bit of styling, but that hasn’t got anything to do with CSS grid.

我添加了一些样式，但这与CSS网格没有任何关系。

列和行 (Columns and rows)

To make it two-dimensional, we’ll need to define the columns and rows.Let’s create three columns and two rows. We’ll use the grid-template-row and grid-template-column properties.

为了使其成为二维，我们需要定义列和行，让我们创建三列和两行。我们将使用grid-template-row和grid-template-column属性。

As we’ve written three values for grid-template-columns, we’ll get three columns. We’ll get two rows, as we’ve specified two values for the grid-template-rows.

当我们为grid-template-columns编写了三个值时，我们将获得三列。我们将获得两行，因为我们为grid-template-rows指定了两个值。

The values dictate how wide we want our columns to be (100px) and how tall we’d want our rows to be (50px). Here’s the result:

这些值指示我们希望列的宽度为(100px)，我们希望行的高度为(50px)。结果如下：

To make sure you properly understand the relation between the values and how the grid looks, take a look at this example as well.

为了确保您正确理解值之间的关系以及网格的外观，还请看一下此示例。

.wrapper {display: grid;grid-template-columns: 200px 50px 100px;grid-template-rows: 50px 50px;
}

Try to grasp the connection between the code and the layout.

尝试掌握代码和布局之间的联系。

Here’s how it plays out:

播放方法如下：

放置物品 (Placing the items)

The next thing you’ll need to learn is how to place items on the grid. This is where you get superpowers, as it makes it dead simple to create layouts.

您需要学习的下一件事是如何将项目放置在网格上。这是您获得超能力的地方，因为它使创建布局变得非常简单。

Let’s create a 3x3 grid, using the same markup as before.

让我们使用与以前相同的标记创建一个3x3网格。

.wrapper {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}

This will result in the following layout:

这将导致以下布局：

Notice, we only see a 3x2 grid on the page, while we defined it as a 3x3 grid. That’s because we only have six items to fill the grid with. If we had three more, then the lowest row would be filled as well.

注意，我们在页面上仅看到3x2网格，而我们将其定义为3x3网格。这是因为我们只有六个项目可用于填充网格。如果再增加三个，则最低行也将被填充。

To position and resize the items we’ll target them and use the grid-column and grid-row properties:

要定位和调整项目的大小，我们将它们定位为目标，并使用grid-column和grid-row属性：

.item1 {grid-column-start: 1;grid-column-end: 4;
}

What we’re saying here is that we want item1 to start on the first grid line and end on the fourth column line. In other words, it’ll take up the entire row.

我们在这里说的是，我们希望item1从第一条网格线开始，到第四列线结束。换句话说，它将占用整行。

Here’s how that’ll play out on the screen:

这是在屏幕上显示的方式：

Are you confused why we have 4 column lines when we only have 3 columns? Take a look at this image, where I’ve drawn the column lines in black:

您是否感到困惑，为什么只有3列却有4列？看一下这张图片，我在其中绘制了黑色的列线：

Notice that we’re now using all the rows in the grid. When we made the first item take up the entire first row, it pushed the rest of the items down.

注意，我们现在正在使用网格中的所有行。当我们使第一个项目占据整个第一行时，它会将其余项目推下。

Finally, I’d like to show a simpler way of writing the syntax above:

最后，我想展示一种编写上述语法的简单方法：

To make sure you’ve understood this concept properly, let’s rearrange the items a little bit.

为了确保您正确理解了这个概念，让我们重新排列一下项目。

.item1 {grid-column-start: 1;grid-column-end: 3;
}.item3 {grid-row-start: 2;grid-row-end: 4;
}.item4 {grid-column-start: 2;grid-column-end: 4;
}

Here’s how that looks on the page. Try to wrap your head around why it looks like it does. It shouldn’t be too hard.

这是页面上的外观。试着绕着为什么看起来像这样。应该不难。

And that was it!

就是这样！

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营。