css 网格布局_CSS网格布局入门

css 网格布局

介绍 ( Introduction )

CSS Grid Layout allows us to construct custom grids with more flexibility and control than ever before. Grid Layout gives us the ability to divide a webpage into rows and columns with simple properties. It also allows us to position and size each element inside the grid using CSS only, without any change to the HTML.

CSS网格布局使我们能够以前所未有的灵活性和控制力来构建自定义网格。 网格布局使我们能够将网页分为具有简单属性的行和列。 它还允许我们仅使用CSS在网格内定位和调整每个元素的大小 ，而无需对HTML进行任何更改。

定义网格 ( Defining a Grid )

With this module, comes a new value for the display property: grid. When you set the display property of any element to grid, it becomes the grid container and all it's child elements become grid items.

随此模块提供了display属性的新值： grid 。 将任何元素的显示属性设置为grid时 ，它将成为网格容器，并且其所有子元素都将成为网格项。

For the sake of creating a 3x3 layout, let's create the board of a Tic-Tac-Toe game. First, we will write some HTML:

为了创建3x3布局，让我们创建井字游戏的棋盘。 首先，我们将编写一些HTML：

<div class="game-board">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

As you can see, the .game-board div is the grid container and .box divs are grid items. Now we will position them 3 in a row with Grid Layout.

如您所见， .game-board div是网格容器， .box div是网格项。 现在，我们将它们与“网格布局”连续放置3个位置。

.game-board 
{
    display: grid;
    grid-template-rows: 200px 200px 200px;
    grid-template-columns: 200px 200px 200px;
}

Here, I've used two other properties as well. The grid-template-rows property allows us to specify how many rows and of what sizes there should be in the grid. I think you can guess what the other property does.

在这里，我还使用了其他两个属性。 grid-template-rows属性使我们可以指定网格中应包含多少行以及应具有什么大小。 我认为您可以猜测其他物业的功能。

The grid-template-columns property allows us to specify how many columns and of what sizes there should be in the grid. You can specify the size in any unit including pixels, percentages and another unit fr, which we are going to learn next.

grid-template-columns属性使我们可以指定网格中应有多少列以及应具有什么大小。 您可以以任何单位指定大小，包括像素，百分比和另一个单位fr ，我们将在接下来学习。

fr单位（分数） ( The fr Unit (fraction) )

fr is a new unit defined for Grid Layout. It helps you get rid of calculating percentages and divides the space into a fraction of the available space.

fr是为“网格布局”定义的新单位。 它可以帮助您摆脱计算百分比的麻烦，并将空间划分为可用空间的一小部分。

For example, if you place this rule:grid-template-rows: 2fr 3fr, in your grid element's block, then your grid container will, firstly, be divided into 2 rows. Then the fractional parts will be added together which, here, sum up to 5.

例如，如果在网格元素的块中放置以下规则： grid-template-rows: 2fr 3fr ，则网格容器将首先分为两行。 然后将小数部分相加，在这里总计为5。

We'll have two rows: The first row taking up 2/5ths of the vertical space. The second row taking up 3/5ths of the vertical space.

我们将有两行 ：第一行占垂直空间的2/5。 第二行占据垂直空间的3/5。

Back to our Tic-Tac-Toe example, let's use fr instead px. What we want is, that, there should be 3 rows and 3 columns. So, we just have to replace the 3 200px with 3 1fr like this:

回到我们的井字游戏示例，让我们用fr代替px 。 我们想要的是应该有3行3列。 因此，我们只需将3 200px替换为3 1fr，如下所示：

.game-board 
 {
    display : grid ;
    grid-template-rows : 1 fr 1 fr 1 fr ;
    grid-template-columns : 1 fr 1 fr 1 fr ;
}

repeat（）函数 ( The repeat() Function )

In some cases, we have a lot of columns and rows. Specifying each one in the grid-template properties can get tedious. Luckily there is a repeat function which like any loop repeats a certain value a given number of times. It takes two arguments. First one is the number of iterations and second is the value to be repeated. Let's rewrite our previous example using the repeat function.

在某些情况下，我们有很多列和行。 在grid-template属性中指定每个都可能很麻烦。 幸运的是，有一个重复功能，它像任何循环一样，将给定次数重复某个值。 它有两个参数。 第一个是迭代次数，第二个是要重复的值。 让我们使用repeat函数重写前面的示例。

.game-board
{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

The above would create the same as:

上面的内容与以下内容相同：

.game-board 
{
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

网格模板属性 (grid-template property)

There is a shorthand property for specifying both the grid-template-rows and grid-template-columns, that is the grid-template property. Here is it's syntax:

有一个用于指定grid-template-rows和grid-template-columns的简写属性，即grid-template属性。 这是它的语法：

grid-template: ro ws / co lu mns;

Using this shorthand, our previous example looks pretty neat.

使用此速记，我们前面的示例看起来很整洁。

.game-board
{
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

See, just using 2 lines of code you can make a 3x3 grid with Grid Layout.

看，只需使用2行代码，您就可以使用Grid Layout制作3x3网格。

With some added paint and polish, the above example looks like this:

添加一些油漆和上光剂后，以上示例如下所示：

网格线号，单元格和轨道 ( Grid Line Number, Cell & Tracks )

A grid line is a line that exists on each side of a column and a row. One set of lines divide the space vertically into columns and the other set of lines divide the space horizontally into rows. This means that in our previous example, there were four vertical lines and four horizontal lines containing the rows and columns between them.

网格线是存在于列和行的每一侧的线。 一组线将空间垂直划分为列，另一组线将空间水平划分为行。 这意味着在我们之前的示例中，有四条垂直线和四条水平线包含它们之间的行和列。

Grid Lines become quite useful while moving grid items from one place to another in the grid.

将网格项目从网格中的一个位置移动到另一个位置时，网格线变得非常有用。

A grid track is the space between two lines. A grid track can either be a row or a column.

网格线是两条线之间的空间。 网格轨迹可以是行或列。

A grid cell, much like a table cell, is the space between two vertical lines and two horizontal lines. It is the smallest unit of the grid.

网格单元格非常类似于表格单元格，是两条垂直线和两条水平线之间的空间。 它是网格的最小单位。

定位网格项目 ( Positioning Grid Items )

I've taken the grid of the previous example and labeled each cell, not with a X or O, but with a number from 1 to 9. Here's how it looks:

我采用了前面示例的网格并标记了每个单元格，而不是用X或O标记，而是用1到9的数字标记。这是它的外观：

Let's say I want to move the sixth box to the place of the second box. Without CSS Grids, this would have been an almost impossible task, at least for me, without changing the HTML. But with this new module, changing position of items in a grid is a breeze. To move the sixth box to the place of the second box, we must know exactly where the second box is sitting. And we can easily find this with the help of grid line numbers. The second box is sitting after line 2 and before line 3 on the vertical axis and after line 1 and before line 2 on the horizontal axis. Now we can assign these grid line numbers to the sixth box using the following properties:

假设我想将第六个框移到第二个框的位置。 如果没有CSS Grids，这对我来说几乎是不可能完成的任务，至少对我而言，不更改HTML。 但是有了这个新模块，更改网格中项目的位置变得轻而易举。 要将第六个框移到第二个框的位置，我们必须确切知道第二个框的位置。 我们可以借助网格线号轻松找到它。 第二个框在垂直轴上位于第2行之后，第3行之前，在水平轴上位于第1行之后和第2行之前。 现在，我们可以使用以下属性将这些网格线号分配给第六个框：

• grid-column-start
  网格列开始
• grid-column-end
  网格列端
• grid-row-start
  网格行开始
• grid-row-end
  网格行尾

The first two properties correspond to the vertical lines' start and end. And the last two properties refer to the horizontal lines' start and end. Let's assign the correct line numbers to move the sixth box.

前两个属性对应于垂直线的开始和结束。 最后两个属性是指水平线的起点和终点。 让我们分配正确的行号来移动第六个方框。

.box :nth-child(6)
 {
    grid-row-start : 1 ;
    grid-row-end : 2 ;
    grid-column-start : 2 ;
    grid-column-end : 3 ;
}

There are also two shorthand properties for setting the start and end lines of row and column in one line.

还有两个速记属性，用于在一行中设置行和列的起点和终点。

.box :nth-child(6)
 {
    grid-row : 1 / 2 ;
    grid-column : 2 / 3 ;
}

Additionally, there is a grid-area property which is the shorthand property of all four above mentioned properties. It takes values in the following order:

此外，还有一个网格区域属性，它是上述所有四个属性的简写属性。 它按以下顺序获取值：

grid-area : <row-start> / <column-start> / <row-end> / <column-end> ;

Now, our example looks like this:

现在，我们的示例如下所示：

.box :nth-child(6)
 {
    grid-area : 1 / 2 / 2 / 3 ;
}

The above line of code can also be further reduced. As you can see that the box only takes up one row and one column, so we only need to specify the starting lines of the row and column and not the end values.

上面的代码行也可以进一步减少。 如您所见，该框仅占用一行和一列，因此我们只需要指定行和列的起始行，而无需指定结束值。

.box :nth-child(6)
 {
    grid-area : 1 / 2 ;
}

What if we wanted the sixth box to span the area of two boxes? This can easily be done by increasing the column-end value by 1.

如果我们希望第六个框跨越两个框的面积怎么办？ 可以通过将列末尾的值增加1来轻松完成此操作。

.box :nth-child(6)
 {
    grid-area : 1 / 2 / 2 / 4 ;
}

You can also use the span keyword with the number of tracks instead of specifying the ending line number for grid-row-end and grid-column-end. In this case, the sixth box is spanning 2 columns and 1 row.

您还可以将span关键字与轨道数一起使用，而不是为grid-row-end和grid-column-end指定结束行号。 在这种情况下，第六个框跨越2列和1行。

.box :nth-child(6)
 {
    grid-area : 1 / 2 / 2 / span 2 ;
}

命名网格区域 ( Named Grid Areas )

The grid-area property can also be used to name parts of a grid which we can then position with the grid-template-areas property. Let's create a simple bread-and-butter layout with a header on top, nav, main and aside in the middle, and a footer below them. Here's the HTML required for this:

grid-area属性还可以用于命名网格的各个部分，然后我们可以使用grid-template-areas属性进行定位。 让我们创建一个简单的面包和黄油布局，顶部放置一个标题，导航，主要和旁边放置一个标题，下面放置一个页脚。 这是为此所需HTML：

< div class = " container " >
  < header > </ header >
  < nav > </ nav >
  < main > </ main >
  < aside > </ aside >
  < footer > </ footer >
</ div >

We need to name each area using the grid-area property like this:

我们需要使用grid-area属性来命名每个区域，如下所示：

header
 {
  grid-area : header ;
  background-color : #9b59b6 ;
}

nav
 {
  grid-area : nav ;
  background-color : #3498db ;
}

main
 {
  grid-area : main ;
  background-color : #2ecc71 ;
}

aside
 {
  grid-area : aside ;
  background-color : #f1c40f ;
}

footer
 {
  grid-area : footer ;
  background-color : #1abc9c ;
}

Now we will use the grid-template-areas property to specify which rows and columns each grid area has to span across. Here's how we do it:

现在，我们将使用grid-template-areas属性指定每个网格区域必须跨越的行和列。 这是我们的方法：

.container
 {
      display : grid ;
      grid-template-rows : 1 fr 5 fr 1 fr ;
      grid-template-columns : 2 fr 5 fr 3 fr ;
      grid-template-areas :
        "header  header  header"
        "nav     main    aside"
        "footer  footer  footer" ;
      grid-gap : .75 em ;
}

Notice that the header and footer words are repeated three times. This states that both the header and the footer span across the width of 3 rows. You can write all of it in one line but it's nice and clean to write each row on a separate line. You can see that I've used a new property grid-gap here. All it does is simply add a gutter between two grid areas. You can also specify different gutter values for row and column using grid-row-gap and grid-column-gap.

注意，页眉和页脚单词重复了三遍。 这说明页眉和页脚都跨越3行的宽度。 您可以将所有内容写在一行中，但是将每一行写在单独的行中很好，也很干净。 您可以看到我在这里使用了新的属性grid-gap 。 它所做的只是在两个网格区域之间添加一个装订线。 您还可以使用grid-row-gap和grid-column-gap为行和列指定不同的装订线值。

Here's the CodePen for this example:

这是此示例的CodePen：

浏览器支持 ( Browser Support )

At the time of this writing, there is good browser support for CSS Grid Layout. According to caniuse.com, all major browsers support CSS Grid Layout except Internet Explorer 11 which has partial support with -ms- prefix and Opera Mini having no support at all.

在撰写本文时，浏览器对CSS Grid Layout有很好的支持。 根据caniuse.com的说法 ，除Internet Explorer 11带有-ms-前缀的部分支持以及Opera Mini完全不支持的Internet Explorer 11之外，所有主流浏览器都支持CSS网格布局。

结论 ( Conclusion )

CSS Grid Layout allows us to make layouts faster and with more control and ease. In this tutorial, we learned how to define layouts with CSS Grids, the fr unit, the repeat function and some grid-specific glossary. We also learned how to position grid items inside a grid container using grid-lines and grid-named-areas. But that's just the start. In the next tutorial, we will dive deep into CSS Grids.

CSS Grid Layout使我们可以更快，更容易控制和简化布局。 在本教程中，我们学习了如何使用CSS网格，fr单位，重复功能和一些特定于网格的词汇表定义布局。 我们还学习了如何使用网格线和网格命名区域将网格项放置在网格容器内。 但这仅仅是开始。 在下一个教程中，我们将深入研究CSS网格。

Til then, Happy Coding!

直到快乐编码！

翻译自: https://scotch.io/tutorials/getting-started-with-css-grid-layout

css 网格布局