网格

翻译不完整。 请帮助我们翻译这篇文章!

网格是一个成熟的设计工具,许多现代网站布局是基于规则网格。在本文中,我们将看看基于网格的设计,以及如何使用CSS来创建网格——两者都通过现在的工具和刚刚开始在浏览器中可用的新技术。

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.(CSS网格布局在网页上来看是一个二维布局系统。你可以把内容排列在行列上,且而还有很多方法实现复杂的布局。这篇文章会告诉你你所以需要的知识。)(由于,中英版本差异太大,所以我把出入较大的文本,做了中英对照翻译。2020-08-26)

预备知识: HTML基础 (学习 HTML简介),以及了解CSS如何工作的(学习 CSS简介 和 盒子样式。)
目标: 要了解网格布局系统背后的基本概念,以及如何在一个网页上实现一个网格布局。

译者注:本篇中文版主要讲如何自己编写网格布局,最后过渡到浏览器支持的 CSS Grid Layout。当前(2019-04-29)大多数浏览器已经支持了 CSS Grid Layout,没必要自己编写了,英文版仅介绍 CSS Grid Layout 的用法

什么是网格布局?

网格仅仅是由水平和垂直线集合创建的一个模式,我们可以根据这个模式排列我们的设计元素。它们帮助我们创建设计——在页面之间移动时元素不会跳动或更改宽度,从而在我们的网站上提供高一致性。

网格通常具有列(column)行(row),以及在每行和列之间的间隙——通常称为沟槽(gutter)

[临时图; 将很快替换更好的图片。]

注意:任何有设计背景的人似乎都感到惊讶,CSS没有内置的网格系统,而我们似乎使用各种次优方法来创建网格状的设计。正如你将在本文的最后一部分中发现的那样,这将被改变,但是你可能需要知道在未来一段时间内创建网格的现有方法。

Creating your grid in CSS 在CSS中创建自己的风格

Having decided on the grid that your design needs, you can use CSS Grid Layout to create that grid in CSS and place items onto it. We will look at the basic features of Grid Layout first and then explore how to create a simple grid system for your project. (决定你设计所需要的网格后,你可以用CSS Grid Layout创建那样的表格,并把项目摆放到其上。我们先来看看Grid Layout的基础特点,然后尝试为你的项目做一个简单的网格系统)

The following video provides a nice visual explanation of using CSS Grid:(此视频提供了一个很好的解释)

Defining a grid 定义网格

As a starting point, download and open the starting point file in your text editor and browser (you can also see it live here). You will see an example with a container, which has some child items. By default these display in normal flow so the boxes display one below the other. We will be working with this file for the first part of this lesson, making changes to see how grid behaves. (一如既往,先下载文件,这个是效果。例子中有一类名为container的容器,容器中有一些子项。在正常布局流的默认情况下,子项是自顶而下的排布。在这篇文章中,我们会从这里开始,对这些文件做一些改变,来了解grid是如何工作的。)

To define a grid we use the grid value of the display property. As with Flexbox, this switches on Grid Layout, and all of the direct children of the container become grid items. Add this to the CSS inside your file: (如果要使用网格布局,我们把类container的display的值设置为grid。与弹性盒子相似,在父容器变为网格布局后,他的直接子代变为网格项。把下面的css规则加到你的文件中。)

.container {
    display: grid;
}

Unlike flexbox, the items will not immediately look any different. Declaring display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. (与弹性盒子不同,子项不会马上改变。display:grid; 声明只是创建了一个单列的网格,所以你的子项还是会像正常布局流那样从上而下一个接一个的排布。)

To see something that looks more grid-like, we will need to add some columns to the grid. Let's add three 200-pixel columns here. You can use any length unit, or percentages to create these column tracks. (为了看上去更像是网格,我们需要给网格加一些列。所以,先加三个200px的列进去。当然,如果不用px,也可以用像长度单位,甚至是百分比。)

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Add the 2nd declaration to your CSS rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid.(用这个规则代替刚刚的规则,由于第二条声明的加入,在你刷新页面后,你会看到子项们重新排列了。)

Simple Grid Example (下面是刚刚用到的代码)
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
        
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}          
<div class="container">
 <div>One</div>
 <div>Two</div>
 <div>Three</div>
 <div>Four</div>
 <div>Five</div>
 <div>Six</div>
 <div>Seven</div>
</div> 
.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
} 

Flexible grids with the fr unit (使用fr这个单位)

In addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns. This unit represents one fraction of the available space in the grid container.(除了使用长度和百分比,我们也使用fr这个单位来定义网格的行与列大小。这个单位表示网格容器可用空间的一部分,可能有点抽像,看看下面的例子吧。)

Change your track listing to the following definition, creating three 1fr tracks.(用下面的规则改变网格布局,创建3个1fr的track(以下我把这个词译成“轨道”) )

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

You should now see that you have flexible tracks. The fr unit distributes space in proportion, therefore you can give different positive values to your tracks, for example if you change the definition like so:(fr这个单位,按比例分配了空间,如果还是没理解,改一下数值,看看会发生什么,比如下面的代码)

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

The first track now gets 2fr of the available space and the other two tracks get 1fr, making the first track larger. You can mix fr units and fixed length tracks — in such a case the space needed for the fixed tracks is taken away before the space is distributed to the other tracks.(第一个轨道被分配了2个可用空间,余下的两个轨道各被分配了1个单位的可用空间。也可以把fr与长度单位混合使用,比如grid-template-columns: 300px 2fr 1fr;第一个轨道宽是300px,剩下可用空间再按比例分配。)

Simple Grid Example with fr units(下面是上面例子的汇总)
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
                
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}  
                
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>                        

Note: The fr unit distributes available space, not all space. Therefore if one of your tracks has something large inside it there will be less free space to share out.(注意:fr单位分配的是可用空间,所以当一个轨道包涵过大的盒子,那么就会更少的可用空间来分配。这里感觉像要在特殊情况下,一个轨道宽度设置的过大,但是实际渲染出来并不是那么大,浏览器会自己作处理,给它一个可用的最大值。)

Gaps between tracks 轨道间的缝隙

To create gaps between tracks we use the properties grid-column-gap for gaps between columns, grid-row-gap for gaps between rows, and grid-gap to set both at once.(使用 grid-column-gap 属性生成列缝隙,用 grid-row-gap 生成行缝隙,用 grid-gap 行列一起生成。)

.container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-gap: 20px;
}

These gaps can be any length unit or a percentage, but not an fr unit.(缝隙的单位用长度单位或百分比,而不要用fr,用了也不生效,不信你就试试。)

Simple Grid Example with fr units(下面是style 和 body 标签里的代码)
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
}
                
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}  
                
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>

Note: The *gap properties used to be prefixed by grid-, but this has been changed in the spec, as the intention is to make them usable in multiple layout methods. The prefixed versions will be maintained as an alias so will be safe to use for some time. To be on the safe side, you could double up and add both properties to make your code more bulletproof.(注意了:gap这个一般被加grid-这么一个前缀,不过出有例外,这是为上配合多种布局合同使用。虽然都两种写都可行,但是为了代码的健壮性,还是把两个属性都写上吧。)

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

Repeating track listings (repeat();函数?)

You can repeat all, or a section of, your track listing using repeat notation. Change your track listing to the following:(如果要创建多个等宽轨道,可以用下面的方法)

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

You will now get 3 1fr tracks just as before. The first value passed to the repeat function is how many times you want the listing to repeat, while the second value is a track listing, which may be one or more tracks that you want to repeat.(上面规则第二条和grid-template-columns: 1fr 1fr 1fr;的效果是一样的,只是用了repeat()函数,第一个参数是重复次数,而逗号之后可以多参比如repeat(3, 2fr 1fr);也是行的,效果你自己试试看吧,一看就明白了。)

The implicit and explicit grid 眼睛能看到的网格与眼睛看不到却存在的网格

We have only specified column tracks so far, and yet rows are being created to hold our content. This is an example of the explicit versus the implicit grid. The explicit grid is the one that you create using grid-template-columns or grid-template-rows. The implicit grid is created when content is placed outside of that grid — such as into our rows. The explicit and implicit grids are analogous to the main and cross flexbox axes.(我们已经控制了列,但是好像还没有控制过行。这个例子我们要比对一个“显”“隐”网格。显式网格是我们用grid-template-columns 或 grid-template-rows 属性创建的。而隐式表格都是当内容被放到网格外才生成的,很抽象,一会看例子吧。最后再说明一下,显隐表格与弹性盒了的main和cross轴有点像,如果忘了就复习一下去,这些文章看一遍是记不住的,没事就看,才是学习之道。)

By default, tracks created in the implicit grid are auto sized, which in general means that they are large enough to fit their content. If you wish to give implicit grid tracks a size you can use the grid-auto-rows and grid-auto-columns properties. If you add grid-auto-rows with a value of 100px to your CSS, you will see that those created rows are now 100 pixels tall.(默认情况下,在隐式网下生成的轨道大小是参数是auto,这样浏览器可以自动改大小,使之完全包含内容。当然了,如果你想手动设置,也是完全ok的,grid-auto-rows 和 grid-auto-columns就是干这个用的。下面的例子就是为行都设置了100px的行高。(说实话,我自己都看不明白这是要做什么,后来人如果有能力,就帮忙梳理一下吧))

Simple Grid Example with fr units (试着改改参数,看你能理解不)
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
                
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}                  
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>
                        
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

The minmax() function 新函数介绍环节

Our 100-pixel tall tracks won’t be very useful if we add content into those tracks that is taller than 100 pixels, in which case it would cause an overflow. It might be better to have tracks that are at least 100 pixels tall and can still expand if more content gets into them. A fairly basic fact about the web is that you never really know how tall something is going to be; additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension.(100px高的轨道有时可能会不够用,因为时常会有新的内容加进去。所以如果能随用随增加高度,这种动态分配便是极好的。写网页时其时也很难定个高度,改个字号高度就变了,所以下面的函数便出现帮助我们解决问题了。)

The minmax function lets us set a minimum and maximum size for a track, for example minmax(100px, auto). The minimum size is 100 pixels, but the maximum is auto, which will expand to fit the content. Try changing grid-auto-rows to use a minmax value:( minmax 函数可以给一个轨道规定最大值和最小值,比如 minmax(100px, auto)。最小值是100px,而最大值是auto,这样就可以自动扩充了。在这里尝试一下把 grid-auto-rows 的值用函数代替,如果:)

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap: 20px;
}

If you add extra content you will see that the track expands to allow it to fit. Note that the expansion happens right along the row.(好像没发生什么,这时不要忘了,把.container>div 里的内容加多,复制,然后粘贴,就会有变动了)

As many columns as will fit

We can combine some of the things we have learned about track listing, repeat notation and minmax to create a useful pattern. Sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. We do this by setting the value of grid-template-columns using repeat notation, but instead of passing in a number, pass in the keyword auto-fill. For the second parameter of the function we use minmax(), with a minimum value equal to the minimum track size that we would like to have, and a maximum of 1fr.

Try this in your file now, using the below CSS:

As many columns as will fit
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
                
.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}  
                
<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
</div>                      
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
}

This works because grid is creating as many 200 pixel columns as will fit into the container, then sharing whatever space is leftover between all of the columns — the maximum is 1fr which, as we already know, distributes space evenly between tracks.

Line-based placement

We now move on from creating a grid, to placing things on the grid. Our grid always has lines, which lines start at 1 and relate to the Writing Mode of the document. Therefore in English, column line 1 is on the left hand side of the grid and row line 1 at the top. In Arabic column line 1 would be on the right hand side, as Arabic is written right to left.

We can place things according to these lines by specifying the start and end line. We do this using the following properties:

These properties can all have a line number as the value. You can also use the shorthand properties:

These let you specify the start and end lines at once, separated by a / — a forward slash character.

Download this file as a starting point or see it live here. It has a grid defined already, and a simple article outlined. You can see that auto-placement is placing items one into each cell of the grid that we have created.

We will instead place all of the elements for our site on the grid, using the grid lines. Add the following rules to the bottom of your CSS:

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

aside {
  grid-column: 1;
  grid-row: 2;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3;
}
Line-based placement
                body {
                    width: 90%;
                    max-width: 900px;
                    margin: 2em auto;
                    font: .9em/1.2 Arial, Helvetica, sans-serif;
                }
                
                .container {
                    display: grid;
                    grid-template-columns: 1fr 3fr;
                    grid-gap: 20px;
                }
header {
    grid-column: 1 / 3;
    grid-row: 1;
}

article {
    grid-column: 2;
    grid-row: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
}

footer {
    grid-column: 1 / 3;
    grid-row: 3;
}
        
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
        
aside {
  border-right: 1px solid #999;
}  
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </article>
  <aside>
    <h2>Other things</h2>
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>               

Note: you can also use the value -1 to target the end column or row line, and count inwards from the end using negative values. However this only works for the explicit grid. The value -1 will not target the end line of the implicit grid.

Positioning with grid-template-areas

An alternative way to place items on your grid is to use the grid-template-areas property and giving the various elements of your design a name.

Remove the line-based positioning from the last example (or re-download the file to have a fresh starting point), and add the following CSS.

.container {
  display: grid;
  grid-template-areas: 
      "header header"
      "sidebar content"
      "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
}

Reload the page and you will see that your items have been placed just as before without us needing to use any line numbers!

Line-based placement
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
                        
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
        
aside {
  border-right: 1px solid #999;
} 

.container {
  display: grid;
  grid-template-areas: 
  "header header"
  "sidebar content"
  "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

header {
  grid-area: header;
}

article {
  grid-area: content;
}

aside {
  grid-area: sidebar;
}

footer {
  grid-area: footer;
} 
                
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </article>
  <aside><h2>Other things</h2>
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>                     

The rules for grid-template-areas are as follows:

  • You need to have every cell of the grid filled.
  • To span across two cells, repeat the name.
  • To leave a cell empty, use a . (period).
  • Areas must be rectangular — you can’t have an L-shaped area for example.
  • Areas can't be repeated in different locations.

You can play around with our layout, changing the footer to only sit underneath the content and the sidebar to span all the way down for example. This is a very nice way to describe a layout as it is obvious from the CSS exactly what is happening.

A CSS Grid, grid framework

Grid "frameworks" tend to be based around 12 or 16 column grids and with CSS Grid, you don’t need any third party tool to give you such a framework — it's already there in the spec.

Download the starting point file. This contains a container with a 12 column grid defined, and the same markup as we used in the previous two examples. We can now use line-based placement to place our content on the 12 column grid.

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}
A CSS Grid Grid System
body {
  width: 90%;
  max-width: 900px;
  margin: 2em auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif;
}
                
.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-gap: 20px;
}

header {
  grid-column: 1 / 13;
  grid-row: 1;
}

article {
  grid-column: 4 / 13;
  grid-row: 2;
}

aside {
  grid-column: 1 / 4;
  grid-row: 2;
}

footer {
  grid-column: 1 / 13;
  grid-row: 3;
}
        
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
        
aside {
  border-right: 1px solid #999;
}  
                
<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </article>
  <aside><h2>Other things</h2>
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>
                        

If you use the Firefox Grid Inspector to overlay the grid lines on your design, you can see how our 12 column grid works.

A 12 column grid overlaid on our design.

Test your skills!

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Grids.

Summary

In this overview we have toured the main features of CSS Grid Layout. You should be able to start using it in your designs. To dig further into the specification, read our guides to Grid Layout, which can be found below.

See Also

以下是中文教程,不同的地方太多,我没法合并,所以单独列在下面

在你的项目中使用“网格系统”

为了确保整个网站或应用程序的一致性体验,从一开始就将其置于网格系统上,这意味着您不需要考虑某个元素相对于其他元素的宽度。您的选择限于“该元素将跨越多少个网格列”。

您的“网格系统”可以简单地是在设计过程中使用常规网格所做的决策。如果你的设计开始于一个图形编辑应用,如Photoshop的话,你可以参考这篇文章中所描述的过程创建一个网格 一个更好响应网页设计的Photoshop网格艾利特杰伊提供。

您的网格系统也可能是一个框架—— 无论是由第三方还是您为您自己的的项目创建的——通过CSS强制实现网格。

创建简单的网格框架

首先,看看我们将如何为你的项目创建一个简单的网格框架。

目前大多数网格类型布局是使用浮动创建的。如果你阅读过我们前面关于浮动的文章,你可以看到我们如何使用这种技术来创建一个多列布局——这是任何使用网格系统的本质方法。

要创建的最简单的网格框架类型是固定宽度的 —— 我们只需要计算出想要设计的总宽度,想要多少列,以及沟槽和列的宽度。如果我们决定在具有列根据浏览器宽度增长和缩小的网格上布置设计,我们需要计算出列和沟槽之间的百分比宽度。

在接下来的部分中,我们会讨论如何创建这两者。我们将创建一个12列网格 —— 一种很常见的选择,因为12可以被6、4、3和2整除,被认为非常适应不同的情况。

一个简单的定宽网格

首先,创建一个使用固定宽度列的网格系统。

制作本地样本simple-grid.html的文件副本,该文件在其body中包含以下标记。

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>    
  </div>
</div>

第一行显示单个列的大小,第二行显示网格上一些不同大小的区域——目的是将其转换为12列上的两行演示网格。

为包装容器提供980像素的宽度,其右侧有20px的padding,这使总共列/沟槽宽度960像素——在这里,padding被整个content的宽度减去,因为我们将这里所有元素的box-sizing属性的值设置为 border-box  (可以看 Changing the box model completely 有更详细的解释)。在<style>元素中,添加以下代码。

* {
  box-sizing: border-box;
}
    

body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}

在网格的每一行的行容器从另一行中清除一行,在上一个规则下面添加以下规则:

.row {
  clear: both;
}

此清除意味着我们不需要应用构成完整十二列的元素去填充每一行。行将保持分离,并且彼此不干扰。

列之间的沟槽为20像素宽。我们在每列的左侧创建一个20px的外边距(margin)作为沟槽——包括第一列,以平衡容器右侧的填充的20像素。所以,我们共有12个沟槽 — 12×20 = 240。

我们需要从960像素的总宽度中减去它,为列提供720像素。如果我们除以12,每列就应该是60像素宽。

下一步是为.col类创建一个规则集,让它向左浮动,给它一个20像素的margin-left形成一个沟槽,一个60像素的 width。将以下规则添加到CSS的底部:

.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}

现在,最上面一行的每一列将被整齐地排列为网格。

注意:我们还为每个列指定了一个浅红色,以便您可以准确地看到每个列占用多少空间。

那些我们想要跨越多个列的布局容器需要被赋予特殊的类,来将它们的width 值调整到所需的列数(加上之间的沟槽)。我们需要创建一个额外的类,以允许容器跨越2到12列。每个宽度是将该列数的列宽加上沟槽宽度得到的结果,总是比列数少1。

在CSS的底部添加以下内容:

/* Two column widths (120px) plus one gutter width (20px) */
.col.span2 { width: 140px; }
/* Three column widths (180px) plus two gutter widths (40px) */
.col.span3 { width: 220px; }
/* And so on... */
.col.span4 { width: 300px; }
.col.span5 { width: 380px; }
.col.span6 { width: 460px; }
.col.span7 { width: 540px; }
.col.span8 { width: 620px; }
.col.span9 { width: 700px; }
.col.span10 { width: 780px; }
.col.span11 { width: 860px; }
.col.span12 { width: 940px; }

创建这些类后,我们现在可以在网格上布置不同的宽度列。尝试保存并在浏览器中加载页面以查看效果。

注意:如果您无法使上述示例工作,请尝试将其与我们在GitHub上完成的版本进行比较(也可以看在线运行)。

尝试修改元素上的类,添加和删除一些容器,看看如何改变布局。例如,您可以使第二行如下所示:

<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>

现在你有一个网格系统工作!你可以简单地定义行和每一行的列数,然后填充每个容器所需的内容。

创建流体网格

我们的网格工作得很好,但它有一个固定的宽度。我们真的想要一个灵活(流体)网格,它将随着浏览器视口中的可用空间而增长和缩小。为了实现这一点,我们可以使用参考像素宽度并将其转换为百分比。

将固定的宽度变为基于百分比的灵活(flexible)宽度的公式如下。

target / context = result

对于列宽来说,上下文是一个960像素的包装器,目标的宽度是60像素,我们可以使用以下计算百分比。

60 / 960 = 0.0625

然后我们移动小数点2个位置,给出6.25%的百分比。因此,在我们的CSS中,我们可以替换60像素列宽度为6.25%。

我们需要对沟槽宽度做同样的事情:

20 / 960 = 0.02083333333

因此,我们需要更换20像素margin-left在我们的.col规则和20像素padding-right的.wrapper有2.08333333%。

更新网格

要开始使用本部分,请制作您之前的示例页面的新副本,或者将我们的simple-grid-finished.html代码的本地副本用作起点。

更新第二个CSS规则(使用.wrapper选择器)如下:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}

不仅我们给了它一个百分比width,我们还添加了一个max-width属性,以阻止布局变得太宽。

接下来,更新第四个CSS规则(使用.col选择器)如下:

.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255, 150, 150);
}

现在来看稍微更费力的部分 —  我们需要更新所有的 .col.span 规则,使用百分比而不是像素宽度。这需要一点时间与计算器; 为了省你一些努力,我们已经为你做了下面。

使用以下内容更新CSS规则的底部块:

/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span2 { width: 14.58333333%; }
/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
.col.span3 { width: 22.91666666%; }
/* And so on... */
.col.span4 { width: 31.24999999%; }
.col.span5 { width: 39.58333332%; }
.col.span6 { width: 47.91666665%; }
.col.span7 { width: 56.24999998%; }
.col.span8 { width: 64.58333331%; }
.col.span9 { width: 72.91666664%; }
.col.span10 { width: 81.24999997%; }
.col.span11 { width: 89.5833333%; }
.col.span12 { width: 97.91666663%; }

现在保存您的代码,在浏览器中加载它,并尝试更改视口宽度 - 您应该看到列宽调整很好地适合!

注意:如果您无法使上述示例工作,请尝试将其与我们在GitHub上完成的版本进行比较请参见它如何运行的)。

使用calc() 函数更容易的计算

你可以使用calc()函数在你的CSS里面做数学 — 这允许你插入简单的数学方程到你的CSS值,计算一个值应该是什么。当需要执行复杂的数学运算时,它是特别有用的,甚至可以计算使用不同单位的计算,例如“我希望此元素的高度始终为父级高度的100%,减去50px”。从MediaRecorder API教程中查看此示例

无论如何,回到我们的网格!跨越网格的多个列的任何列具有6.25%的总宽度乘以跨越的列数加上2.08333333%乘以槽的数量(其将总是列数减去1)。该calc()函数允许我们在宽度值内部执行此计算,因此对于跨4列的任何项目,我们可以执行此操作,例如:

.col.span4 {
  width: calc((6.25%*4) + (2.08333333%*3));
}

尝试使用以下代码替换您的底部规则,然后在浏览器中重新加载它,看看是否得到相同的结果:

.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }

注意:您可以在fluid-grid-calc.html(也可以看到它的live)中看到我们的完成版本。

注意:如果你不能让这个工作,它可能是因为你的浏览器不支持该calc()功能,虽然它是相当支持跨浏览器 - 远在IE9

语义与“非语义”网格系统

向您的标记添加类来定义布局意味着您的内容和标记与其视觉呈现相关联。有时你会听到这种使用描述为“非语义”的CSS类 - 描述内容的外观 - 而不是描述内容的类的语义使用。这正是我们的情况下span2,span3类,等等。

这些不是唯一的办法,你可以改为决定网格。然后将大小信息添加到现有语义类的规则中。例如,如果你有一个<div>类content,你想跨越8列,你可以复制从span8类的宽度,给你一个像这样的规则:

.content {
  width: calc((6.25%*8) + (2.08333333%*7));
}

注意:如果你使用一个预处理器,如Sass,你可以创建一个简单的mixin来插入这个值。

在网格中启用偏移容器

我们创建的网格工作良好,只要我们想要启动所有的容器与网格的左手边齐平。如果我们想在第一个容器之前留下一个空的列空间 - 或者在容器之间 - 我们需要创建一个偏移类来添加一个左边距到我们的网站,以推动它在网格上。更多数学!

让我们试试这个。

从您之前的代码开始,或使用我们的fluid-grid.html文件作为起点。

让我们在CSS中创建一个类,它将容器元素偏移一列宽度。将以下内容添加到CSS的底部:

.offset-by-one {
  margin-left: calc(6.25% + (2.08333333%*2));
}

如果你喜欢自己计算百分比,请使用这一个:

.offset-by-one {
  margin-left: 10.41666666%;
}

现在可以将此类添加到任何容器,列如你要在其左侧留下一列宽的空白。在HTML中添加这个:

<div class="col span6">14</div>

尝试替换它

<div class="col span5 offset-by-one">14</div>

注意:您需要减少跨越的列数,为偏移量腾出空间!

尝试加载和刷新以查看差异,或查看我们的fluid-grid-offset.html示例(见在线运行)。完成的示例应如下所示:

注意:作为一个额外的练习,你能实现一个offset-by-two类吗?

浮动网格限制

当使用浮动网格时,你需要注意:你的总宽度要加起来正确,并且你不能在一行中包含跨(越)度为多列的超过该行所能包含的元素。由于浮动工作方式,如果网格列的数量相对于网格变得太宽,则末端上的元素将下降到下一行,从而打破网格。

还要记住,元素的内容比它们占据的行更宽,它会溢出,会看起来像一团糟。

这个系统的最大限制是它基本上是一维的。我们处理的是列元素只能跨越多个列,而不能跨越行。这些旧的布局方法非常难以控制元素的高度,而没有明确设置高度,这是一个非常不灵活的方法 - 它只有当你能保证你的内容将是一定的高度才有效。

Flexbox 网格?

如果你阅读我们以前关于flexbox的文章,可能会认为flexbox是创建网格系统的理想解决方案。目前有一些基于flexbox的网格系统可用,flexbox可以解决我们在创建上面的网格时已经发现的许多问题。

然而,flexbox从来没有被设计为网格系统,并且在作为一体时提出了一系列新的挑战。作为一个简单的例子,我们可以把我们上面使用同样的例子标记和使用以下CSS样式的wrapper,row和col类:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}


.row {
  display: flex;
}

.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255,150,150);
}

你可以在你自己的例子中尝试这些替换,或者看看我们的flexbox-grid.html示例代码(看它如何运行)。

这里我们把每一行变成一个flex容器。使用基于flexbox的网格,我们仍然需要行,以便允许我们添加小于100%的元素。我们设置该容器display: flex。

在.col我们将flex属性的第一个值(flex-grow)设置为1,项目可以增长,第二个值(flex-shrink)为1,所以项目可以收缩,第三个值(flex-basis)auto。由于我们的元素有一个width集合,auto将使用该宽度作为flex-basis值。

在顶端,我们在网格上获得十二个整洁的盒子,并且它们随着我们改变视口宽度而同样地增长和收缩。然而,在下一行,我们只有四个项目,这些也从60px基础增长和收缩。只有四个他们可以增长比上面的行中的项目多,结果是他们都占据第二行相同的宽度。

为了解决这个问题,我们仍然需要包含我们的span类来提供一个宽度来替换flex-basis那个元素所使用的值。

他们也不尊重上面的网格,因为他们不知道如何使用它。

Flexbox一维设计。它处理单个维度,即行或列。不能为列和行创建严格的网格,这意味着如果我们要为网格使用flexbox,我们仍然需要为浮动布局计算百分比。

在您的项目中,您可能仍然选择使用flexbox'grid',因为flexbox提供的额外对齐和空间分布能力超过浮动。但是,您应该知道,您仍在使用工具,而不是它的设计目的。所以你可能会觉得它让你跳过额外的箍,得到你想要的最终结果。

第三方网格系统

现在我们了解了我们的网格计算背后的数学,我们是一个很好的地方看看一些第三方网格系统的共同使用。如果你在网上搜索“CSS Grid框架”,你会发现一个巨大的选项列表可供选择。流行的框架如BootstrapFoundation包括一个网格系统。还有独立的网格系统,使用CSS或使用预处理器开发。

让我们来看看这些独立系统之一,因为它演示了使用网格框架的常见技术。我们将使用的网格是Skeleton的一部分,一个简单的CSS框架。

开始访问Skeleton网站,并选择“下载”以下载ZIP文件,解压缩此文件并将skeleton.css和normalize.css文件复制到一个新目录中。

制作我们的html-skeleton.html文件副本,并将其保存在与骨架相同的目录中,并规范化CSS。

在HTML页面中包含骨架并规范化CSS,方法是在其头部添加以下内容:

<link href="normalize.css" rel="stylesheet">
<link href="skeleton.css" rel="stylesheet">

Skeleton不仅仅包括一个网格系统 - 它还包含用于排版的CSS和其他可以用作起点的页面元素。我们现在将这些默认值,但是 - 这是我们真正感兴趣的网格在这里。

注意:Normalize是由Nicolas Gallagher编写的一个非常有用的小型CSS库,它自动执行一些有用的基本布局修复,并使默认元素样式在不同浏览器之间更一致。

我们将使用类似的HTML到我们前面的例子。在您的HTML内文中添加以下内容:

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
    <div class="col">16</div>   
  </div>
</div>

要开始使用Skeleton,我们需要给包装器<div>一个类container- 这已经包括在我们的HTML中。这将以960像素的最大宽度为中心。你可以看到盒子现在从不变得宽于960像素。

你可以看一下skeleton.css文件,看看我们应用这个类时使用的CSS。在<div>使用居中auto左,右页边距,以及20像素的填充应用于左侧和右侧。Skeleton也设置box-sizing属性border-box像我们以前做的,所以此元素的填充和边框将包括在总宽度。

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

元素只能是网格的一部分(如果它们在一行内),因此与前面的示例一样,我们需要一个额外的<div>或其他元素,其中一个类row嵌套在content <div>实际的内容容器之间<div>。我们已经做到了这一点。

现在让我们布置集装箱。骨架基于12列网格。顶行框都需要类,one column以使它们跨越一列。

现在添加这些,如下面的代码段所示:

<div class="container">
  <div class="row">
    <div class="col one column">1</div>
    <div class="col one column">2</div>        
    <div class="col one column">3</div>
    /* and so on */
  </div>
</div>

接下来,给出第二行类上的容器,解释它们应该跨越的列数,如下:

<div class="row">
  <div class="col one column">13</div>
  <div class="col six columns">14</div>
  <div class="col three columns">15</div>
  <div class="col two columns">16</div>   
</div>

尝试保存HTML文件并将其加载到浏览器中以查看效果。

注意:如果您无法使此示例工作,请尝试将其与我们的html-skeleton-finished.html文件进行比较(见在线运行)。

如果你看看skeleton.css文件,你可以看到这是如何工作的。例如,Skeleton对下面定义的样式元素添加了“三列”类。

.three.columns { width: 22%; }

所有的Skeleton(或任何其他网格框架)正在设置预定义的类,您可以通过将它们添加到您的标记使用。这和你自己计算这些百分比的工作完全一样。

正如你所看到的,当使用Skeleton时,我们需要写很少的CSS。它处理所有的浮动我们当我们添加类到我们的标记。正是这种将布局的责任转移到其他使网格系统的框架成为一个引人注目的选择的能力!

骨架是比你可能遇到的一些框架更简单的网格系统。大型框架(如Bootstrap和Foundation)中的网格为各种屏幕宽度提供了更多的功能和额外的断点。但是,它们都以类似的方式工作 - 通过向您的标记添加特定类,您可以使用预定义网格控制元素的布局。

本地CSS网格与网格布局

我们在本文一开始所说的,CSS的之前没有过一个真正的体系,用于创建网格布局。但这已经改变了。大部分常用的浏览器的最新版本已经提供了对新CSS的网格布局模块的支持。

我们看过上面的Skeleton Grid框架 - 像其他第三方网格,甚至是手工构建的网格,它需要你添加<div>s形成行,然后指定这些行中的项目将跨越的列数。

使用CSS网格布局,您可以完全在CSS中指定网格,而不需要将这些帮助类添加到标记。让我们看看我们的简单示例,看看我们将如何使用CSS Grid Layout创建相同的布局。

构建本地网格

首先,通过制作css-grid.html文件的本地副本来开始。它包含以下标记:

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col span6">14</div>
  <div class="col span3">15</div>
  <div class="col span2">16</div>       
</div>

这次我们有一个父 <div> 的类 wrapper,所有的子元素只是直接出现在包装器内——没有行元素。我们已经将一个类添加到应该跨越多个列的项目。

现在将以下内容添加到<style>元素中:

.wrapper {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.col {
  background: rgb(255,150,150);
}

这里我们设置.wrapper规则,因此它是90%的身体宽度,居中,并且 max-width 为 960px。

现在为CSS网格属性。我们可以使用display 属性的 grid 值声明一个网格,使用 grid-gap 设置网格的间隔,然后使用grid-template-columns 属性、 repeat() 函数和 fr 单位——这个为网格布局定义的单位——创建一个12列等宽的网格。

该fr单元是一小部分单元-它描述在网格容器的可用空间的一小部分。如果所有列都是1fr,它们将占用相等的空间量。这消除了计算百分比以创建灵活网格的需要。

创建网格后,网格自动布局规则将立即在这个网格上布置我们的框,我们得到一个十二列灵活的网格布局。

要对跨越网格上的多个列轨道的容器进行样式化,我们可以使用该grid-column属性。跨6列例如:

.span6 {
  grid-column: auto / span 6;
}

跨越3:

.span3 {
  grid-column: auto / span 3;
}

正斜杠之前的值是开始列——在这种情况下,我们没有明确设置,允许浏览器放在下一个可用的列。然后我们可以设置它跨越6,3或我们想要的许多列。

在CSS的底部添加以下内容:

.span2 { grid-column: auto / span 2;}
.span3 { grid-column: auto / span 3;}
.span4 { grid-column: auto / span 4;}
.span5 { grid-column: auto / span 5;}
.span6 { grid-column: auto / span 6;}
.span7 { grid-column: auto / span 7;}
.span8 { grid-column: auto / span 8;}
.span9 { grid-column: auto / span 9;}
.span10 { grid-column: auto / span 10;}
.span11 { grid-column: auto / span 11;}
.span12 { grid-column: auto / span 12;}

OK!尝试保存和刷新,你会看到容器适当地跨多个列。

CSS网格是二维的,因此随着布局的增长和缩小,元素保持水平和垂直排列。

您可以通过将以下内容替换最后的4个字符串来进行测试<div>:

<div class="col">13some<br>content</div>
<div class="col span6">14this<br>is<br>more<br>content</div>
<div class="col span3">15this<br>is<br>less</div>
<div class="col span2">16</div>

这里我们有意添加了一些行break(<br>)标签,以强制某些列变得比其他列高。如果你尝试保存和刷新,你会看到列的高度调整为与最高的容器一样高,所以一切都保持整洁。

最终的布局如下:

注意:如果您无法使此示例工作,您可以检查您的代码与我们的完成版本(也可以看在线运行)。

一些不错的CSS网格特性

对于CSS网格,我们不需要通过边距来抵消它们。尝试在您的CSS中进行这些更改:

.content {
  grid-column: 2 / 8;
}
<div class="col span2 content">16</div>

容器16,现在将下一个可用的行上跨越第2列到第8列。

我们可以像跨越列一样轻松地跨越多行:

.content {
  grid-column: 2 / 8;
  grid-row: 3 / 5;
}

现在将容器16,跨越行3至5以及列2至8。

不需要使用边距伪造沟槽或显式计算它们的宽度 — CSS网格具有这种功能内置的grid-gap 属性。

我们只是接触了CSS网格布局所有可能的皮毛,但在本文的行文中要理解的关键是,你不需要用网格创建一个网格系统——它已经是一个了。您可以编写CSS,将项目直接放入预定义的网格上。要了解更多,请看 CSS Grid Layout Module

主动学习:编写自己的简单网格

CSS布局aticle简介中,我们包括一个关于CSS表的部分,其中包括一个简单的形式示例(参见css-tables-example.html实例和源代码)。我们希望您复制此示例,并执行以下操作:

  1. 删除 <div>元素 —  将会对你的内容处理行数和列。就不再需要此作为CSS网格。
  2. 使用CSS网格属性创建一个接近原始的表单布局,你必须设定容器元素的宽度,并思考怎么设置列的的间隙和行差距。

注意:先去做这个,如果你真的卡住了,你可以检查你的代码和我们的css-tables-as-grid.html例子。不要作弊,先试着练习!

概要

阅读这篇文章后,你应该已经了解了网格布局和网格框架如何在CSS中工作。你也已经窥探未来的CSS网格,现在应该明白,我们今天使用的网格框架本质上是一个临时的解决方案,直到我们有一个广泛支持的本地方式在CSS中实现这一点。

在本单元中