css网格

by Kara Luton

卡拉·卢顿(Kara Luton)

CSS网格初学者指南 (A Beginner’s Guide to CSS Grid)

I first heard about CSS Grid towards the end of 2016. I was sitting at one of my first Tech Ladies® meetings and an attendee mentioned hearing how amazing it was. Fast forward a year and a half later and I’m finally digging deeper into Grid. As a devoted Flexbox user, I can already tell how this will be a game changer.

我最早在2016年底听说CSS Grid。我当时是我第一次参加TechLadies®会议，其中一位与会者提到听到了它的惊人之处 。 快进一年半以后，我终于更深入地研究Grid了。 作为专注于Flexbox的用户，我已经知道这将如何改变游戏规则。

The biggest question I had when beginning to learn about CSS Grid was: how is Grid different than Flexbox? And I found out that in general, Grid can do everything that Flexbox can do. Some people are of the mindset that Grid is for multi-dimensional layouts while Flexbox should be used for one-dimensional layouts. But Grid is great at one-dimensional layouts as well — especially if you come back later and decide that you want to make that layout multi-dimensional.

开始学习CSS Grid时，我最大的问题是：Grid与Flexbox有何不同？ 而且我发现，在一般情况下，电网能做到的一切 ，Flexbox，就可以做。 有些人的心态是Grid用于多维布局，而Flexbox应该用于一维布局。 但是Grid同样适用于一维布局-尤其是当您稍后返回并决定要使该布局为多维时。

设置CSS网格 (Setting Up CSS Grid)

Grid is extremely easy to setup — all it takes is two lines of CSS.

网格非常容易设置-只需要两行CSS。

HTML

HTML

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

CSS

CSS

.wrapper {    display: grid;    grid-template-columns: 10rem 10rem 10rem;}

And voila! You have a grid. Seriously, that’s all you need. It’s pretty great.

瞧！ 你有一个网格。 说真的，这就是您所需要的。 非常好

You’ll notice that, unlike when setting Flexbox to display: flex, adding display: grid to your wrapper doesn’t immediately make a difference. This is because you aren’t explicitly defining how many columns you want your grid to have. You’ll do this with grid-template-columns like I did above. So in this example, I’m setting three columns to have a width of 10rem each.

您会注意到，与将Flexbox设置为display: flex ，将display: grid添加到包装程序不同，这不会立即有所作为。 这是因为您没有明确定义希望网格包含多少列。 您将像上面一样使用grid-template-columns进行此操作。 因此，在此示例中，我将三列设置为每列宽度为10rem。

You can use any value you want when setting grid-template-columns, but I suggest staying away from percentages unless you’re trying to add up to 100%. This is because you will have to take your amount of grid-gap (which we’ll dive into in a little bit) into account, and that can get a little tricky.

设置grid-template-columns ，可以使用任何所需的值，但我建议不要使用百分比，除非您尝试将其总计为100％。 这是因为您必须考虑到grid-gap (我们将稍作讨论)，这可能会有些棘手。

显式轨迹与隐式轨迹 (Explicit vs Implicit Tracks)

Before I talk about explicit and implicit tracks, let’s first talk about what tracks are. Tracks are how columns and rows are numbered. Instead of counting the individual columns and rows by themselves, in CSS Grid you count them by the track lines. Here’s the grid we started with — I’ve numbered all of the track rows and columns to make it a little easier for you to see.

在讨论显式和隐式轨道之前，让我们先讨论什么是轨道。 轨道是对列和行进行编号的方式。 在CSS Grid中，您无需按计数本身来计算各个列和行，而是按跟踪线对其进行计数。 这是我们开始使用的网格-我已对所有轨道行和列进行编号，以使您更容易看到它。

You can see that we actually have four column lines and three row lines. This will help when placing your items on the grid.

您可以看到我们实际上有四列线和三行线。 将项目放在网格上时，这将有所帮助。

A quick side note: if you’re using Firefox’s Developer Edition (the beta version of the regular Firefox) it actually has some great dev tools for seeing the column and row track numbers. If you inspect your wrapper element and then go to the layout tab, check the box for your wrapper and now your grid will look like below! I really hope Chrome adds an inspect feature like this in the future. It’s extremely helpful.

简要说明一下：如果您使用的是Firefox的Developer Edition(常规Firefox的Beta版)，则实际上有一些很棒的开发工具可用于查看列和行的轨道号。 如果检查包装器元素，然后转到布局选项卡，请选中包装器框，现在网格将如下图所示！ 我真的希望Chrome将来能添加这样的检查功能。 这非常有帮助。

Let’s go back to the difference between explicit and implicit tracks. If we take our code from above, you’ll notice that we’ve only set our columns. In this case, we’ve explicitly set our columns to have three, but we’ve implicitly set our rows. We have six items, but obviously all of these items cannot fit in three columns so a second row gets implicitly set.

让我们回到显式轨道和隐式轨道之间的区别。 如果我们从上面获取代码，您会注意到我们只设置了列。 在这种情况下，我们已经 明确地 将我们的列设置为三个，但是我们隐式地 设置行。 我们有六个项目，但是显然所有这些项目都不能容纳在三列中，因此隐式设置了第二行。

This is a little confusing, so I definitely recommend messing around with CSS Grid on your own to see the difference between explicit and implicit tracks.

这有点令人困惑，因此我绝对建议您自己动手使用CSS Grid，以了解显式轨道和隐式轨道之间的区别。

添加网格间隙 (Adding Grid-Gap)

Think of grid gap like margin except it’ll only be added between items and not to the outside of the grid. I’ve run into so many cases when I add margin on items in a Flexbox grid only to have to go to the grid’s wrapper and set the same amount of margin, but negative, to offset the margin that gets set outside of the grid. Thankfully with CSS Grid, you don’t have to deal with that.

将网格间隙想像为边距，只是它将仅添加在项目之间，而不是添加到网格外部。 当我在Flexbox网格中的项目上添加边距时，不得不去网格的包装器并设置相同数量的边距(但为负)以抵消在网格外部设置的边距时，我遇到了很多情况。 幸运的是，使用CSS Grid，您不必进行处理。

Let’s take our example CSS above and add some grid-gap.

让我们以上面CSS示例为例，并添加一些网格间隙。

.wrapper {  display: grid;  grid-template-columns: 10rem 10rem 10rem;  grid-gap: 1rem;}

I used the shorthand property grid-gap, but you can define an explicit value for the columns and rows by using grid-column-gap and grid-row-gap.

我使用了简写属性grid-gap ，但是可以使用grid-column-gap和grid-row-gap为列和行定义一个显式值。

*Note: Chrome 66 will be changing grid-gap to gap and grid-column-gap/grid-row-gap to column-gap/row-gap.

*注： Chrome66将改变grid-gap到gap和grid-column-gap / grid-row-gap到column-gap / row-gap 。

Repeat()函数 (The Repeat() Function)

Defining how wide you want each of your columns to be when using grid-template-columns with three columns that are all the same width is pretty simple. But that’s a lot of typing if you want any more columns than that. This is where the repeat() function comes in.

在使用具有三个相同宽度grid-template-columns时，定义希望每个列的宽度非常简单。 但是，如果您想要更多的列，则需要进行很多输入。 这是repeat()函数出现的地方。

Here’s our example we’ve been using with the repeat() function added in.

这是我们一直使用的示例，其中添加了repeat()函数。

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}

As you can see in my CSS, I’m setting three columns each to be 10rems wide. This grid will look exactly like the grid pictured in our grid-gap example. By using the repeat() function we’re just making writing things a little simpler and easier to read for when you’re wanting to set a lot of columns.

如您在CSS中所见，我将三列设置为10rems宽。 该网格看起来与我们的grid-gap示例中的网格完全一样。 通过使用repeat()函数，我们可以使编写代码的过程变得更加简单易读，以备您需要设置许多列时使用。

小数单位 (Fractional Units)

Fractional units, or fr, are a new CSS length unit introduced with CSS Grid and one that I can see myself using all the time. Say we want three columns all of equal width. Instead of setting width: calc(100% / 3) on the items, we can use fractional units. Think of fractional units as “free space.”

分数单位或fr是CSS Grid引入的一种新CSS长度单位，我可以一直使用它。 假设我们要三列均等宽。 可以使用分数单位代替在项目上设置width: calc(100% / 3) 。 将分数单位视为“自由空间”。

Let’s continue on with our example that we’ve been using.

让我们继续我们一直在使用的示例。

.wrapper {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-gap: 1rem;}

You’ll notice that the only thing I changed was grid-template-columns. I’m now telling the browser that I want three columns, and that I want each of those columns to take up one fractional unit or one “free space.” This works very similarly to Flexbox’s flex-grow property.

您会注意到，我唯一更改的是grid-template-columns 。 我现在告诉浏览器，我想要三列，并且我希望这些列中的每一列都占用一个小数单位或一个“可用空间”。 这与Flexbox的flex-grow属性非常相似。

The reason each item is a little wider than in our previous example is because they are now taking up as much space as they can while still fitting in three columns. In this case, I didn’t set a hard width so they are taking up the full-width of my screen. I know this is a little hard to see without having it on your own screen, so I definitely recommend messing with this on your own.

每个项目都比我们先前的示例中的项目宽一点的原因是，它们现在占据了尽可能多的空间，同时仍可容纳三列。 在这种情况下，我没有设置硬宽度，因此它们占用了我的屏幕的全角。 我知道如果不将其显示在自己的屏幕上很难看到，所以我绝对建议您自己将其弄乱。

You don’t have to set all of your columns to be 1fr, either. Below is an example where I’ve set my first and third column to 10rems while my middle column is 1fr. You can also set your columns to 2fr, 3fr, and so on, and that column’s items will take up 2x, 3x (and so on) the amount of space.

您也不必将所有列都设置为1fr。 下面是一个示例，其中我将第一列和第三列设置为10rems，而中间列为1fr。 您还可以将列设置为2fr，3fr，依此类推，该列的项目将占用2x，3x(依此类推)的空间量。

调整单个网格项目的大小 (Sizing Individual Grid Items)

Let’s talk about sizing our individual grid items. You cannot place a hard width on individual items, because we explicitly set the width with grid-template-columns. But what if you want item five in our example to be the width of multiple columns? We can do this using grid-column and span.

让我们谈谈调整单个网格项目的大小。 您不能在单个项目上设置硬宽度，因为我们使用grid-template-columns显式设置了宽度。 但是，如果您希望我们示例中的项目5为多列的宽度，该怎么办？ 我们可以使用grid-column和span做到这一点。

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}

.item5 {  grid-column: span 2;}

You’ll see above that we’re setting grid-column of item five to be a span of two which will allow item five to span a width of two columns.

您将在上方看到我们将项目5的grid-column设置为跨度为2，这将允许项目5跨越两列的宽度。

But what if you wanted item five to span three columns? This is what will happen.

但是，如果您希望第5项跨越三栏怎么办？ 这将发生。

Because item five naturally starts at the second column, we don’t have enough space for it to span the total width we’ve set. So it will move down to the next row. You can apply the same concept from grid-column to grid-row if you’re wanting an item to span multiple rows.

由于项目5自然是从第二列开始的，因此我们没有足够的空间来容纳我们设置的总宽度。 因此它将向下移动到下一行。 如果您希望一个项目跨越多行，则可以将相同的概念从grid-column应用于grid-row行。

There’s a pretty simple solution for fixing the blank space that’s leftover from item five moving down a row. It can be used whether you’re setting an item to span a row or a column— grid-auto-flow: dense.

有一个非常简单的解决方案，用于修复从项目5向下移动时剩余的空白。 无论您是将项目设置为跨行还是跨列，都可以使用它— grid-auto-flow: dense 。

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;  grid-auto-flow: dense;}

.item5 {  grid-column: span 3;}

In CSS Grid, the grid will automatically check to see if items fit. Like I said above, if an item doesn’t fit it will break to the next line. Grid-auto-flow: dense tells the grid to fill in those empty spaces with any item that will fit. In this case, I’ve added a seventh grid item so the grid automatically moves that and the sixth item to the empty spots.

在CSS网格中，网格将自动检查项目是否适合。 就像我在上面说的那样，如果一个项目不合适，它将中断到下一行。 Grid-auto-flow: dense告诉网格使用适合的任何项目填充这些空白区域。 在这种情况下，我添加了第七个网格项，因此网格会自动将其和第六个网格项移至空白点。

CSS Grid will always layout items that need to go in a specific spot first — in this case, item five, since it is spanning three columns. Then, if you have grid-auto-flow: dense set, it will look for other items to fit into the blank spots on the grid.

CSS Grid始终会布局需要首先放置在特定位置的项目-在本例中为项目5，因为它跨越三列。 然后，如果您设置了grid-auto-flow: dense ，则它将寻找其他项目以适合网格上的空白点。

The grid-auto-flow property by itself determines in which direction you need to add another row or column after you’ve already defined your items. Row is the default. I haven’t see a big use case for this besides using grid-auto-flow: dense.

grid-auto-flow属性本身确定在定义项目之后需要向哪个方向添加另一行或另一列。 行是默认值。 除了使用grid-auto-flow: dense之外，我还没有看到一个大用例。

放置网格项目 (Placing Grid Items)

In our example with sizing individual grid items we were originally setting item five to grid-column: span 2 , which allowed item five to span across two columns. Actually, grid-column is shorthand for grid-column-start and grid-column-end. The same goes for grid-row as well.

在我们为单个网格项目调整大小的示例中，我们最初将项目5设置为grid-column: span 2 ，这允许项目5跨越两列。 实际上， grid-column是grid-column-start和grid-column-end简写。 grid-row也是如此。

So, technically, we were setting item five to be grid-column-start: span 2and grid-column-end: auto. Essentially, we were telling the grid to start item five where it naturally would, but go twice the size.

因此，从技术上讲，我们将项目5设置为grid-column-start: span 2和grid-column-end: auto 。 本质上，我们是在告诉网格以自然的位置开始第5项，但要扩大两倍。

Let’s work with item five again, and I’m going to show you this using Firefox Developer Edition’s inspector tools so it’s easier for you to see what track line item five is at. I’ve also added a couple more grid items.

让我们再次处理项目5，并且我将使用Firefox开发人员版的检查器工具向您展示此内容，以便您更轻松地了解项目5所在的行。 我还添加了几个网格项目。

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}

.item5 {  grid-column-start: 1;  grid-column-end: 3;}

CSS Grid will layout all of the items before our fifth one, stop and then look at where we started and ended item five, and place it where we told it to. The shorthand of this would be grid-column: 1 / 3 where 1 is our start value and 3 is our ending value.

CSS Grid将在第五个项目之前布置所有项目，停下来，然后看一下我们开始和结束第五个项目的位置，并将其放置在我们告诉它的位置。 其简写为grid-column: 1 / 3其中1是我们的起始值，3是我们的终止值。

You can also tell an individual grid item how wide you want it to span and where you want it to end. I’m using the shorthand grid-column property in this example, so I’m telling item five to span two columns ending at track line four.

您还可以告诉单个网格项目其跨度和结束位置。 在此示例中，我使用了简写的grid-column属性，因此，我告诉项目5跨越以跟踪线4结尾的两列。

.wrapper {  display: grid;  grid-template-columns: repeat(3, 10rem);  grid-gap: 1rem;}

.item5 {  grid-column: span 2 / 4;}

If you want your item to span the entire width of the grid, but don’t know how wide your grid is, you can set grid-column: 1 / -1. Basically that -1 value is telling your item to go all the way across to the last track. If you do this with rows you’ll notice that your item may not go all the way to the bottom of your grid. It will only go to the bottom of your explicit, rows not your implicit rows.

如果您希望项目跨越网格的整个宽度，但不知道网格的宽度，则可以设置grid-column: 1 / -1 。 基本上，-1值告诉您的项目一直到最后一条轨道。 如果对行执行此操作，则会注意到您的项目可能不会一直到网格底部。 它只会深入到您的显式内容的底部， 行数 不是您的隐式行。

翻译自: https://www.freecodecamp.org/news/a-beginners-guide-to-css-grid-3889612c4b35/

css网格