The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. What did they look like? Ships? Motorcycles? Were the circuits like freeways? I kept dreaming of a world I thought I’d never see. And then one day.. I got in. — Tron: Legacy
网格。 数字前沿。 当它们在计算机中移动时，我试图对信息集群进行图像显示。 他们长什么样？ 船？ 摩托车？ 电路像高速公路吗？ 我一直梦想着一个我从未见过的世界。 然后有一天..我进去了。—特隆：旧版
CSS网格简介 (Introduction to CSS Grid)
CSS Grid is a fundamentally new approach to building layouts using CSS.
CSS网格是使用CSS构建布局的根本上新的方法。
Keep an eye on the CSS Grid Layout page on caniuse.com to find out which browsers currently support it. At the time of writing, Apr 2019, all major browsers (except IE, which will never have support for it) are already supporting this technology, covering 92% of all users.
留意caniuse.com上的CSS Grid Layout页面，以了解当前哪些浏览器支持它。 在撰写本文时，2019年4月，所有主要浏览器(除了IE永远不会支持它)都已经支持该技术，覆盖了所有用户的92％。
CSS Grid is not a competitor to Flexbox. They interoperate and collaborate on complex layouts, because CSS Grid works on 2 dimensions (rows AND columns) while Flexbox works on a single dimension (rows OR columns).
CSS Grid不是Flexbox的竞争对手。 它们可以在复杂的布局上进行互操作和协作，因为CSS Grid可以在2维(行和列)上工作，而Flexbox可以在单个维(行或列)上工作。
Building layouts for the web has traditionally been a complicated topic.
传统上，Web的建筑布局是一个复杂的话题。
I won’t dig into the reasons for this complexity, which is a complex topic on its own, but you can think yourself as a very lucky human because nowadays you have 2 very powerful and well supported tools at your disposal:
我不会深入探讨造成这种复杂性的原因，这本身就是一个复杂的话题，但是您可以认为自己是一个非常幸运的人，因为如今您可以使用两个非常强大且受支持的工具 ：
CSS Flexbox
CSS Flexbox
CSS Grid
CSS网格
These 2 are the tools to build the Web layouts of the future.
这两个是构建未来Web布局的工具。
Unless you need to support old browsers like IE8 and IE9, there is no reason to be messing with things like:
除非您需要支持IE8和IE9之类的旧浏览器，否则没有必要弄乱诸如：
- Table layouts 表格布局
- Floats 浮点数
- clearfix hacks clearfix骇客
display: tablehacksdisplay: table黑客
In this guide there’s all you need to know about going from a zero knowledge of CSS Grid to being a proficient user.
从本指南的零知识到成为熟练的用户，在本指南中，您需要了解的所有信息。
基础 (The basics)
The CSS Grid layout is activated on a container element (which can be a div or any other tag) by setting display: grid.
通过设置display: grid在容器元素(可以是div或任何其他标签)上激活CSS Grid布局。
As with flexbox, you can define some properties on the container, and some properties on each individual item in the grid.
与flexbox一样，您可以在容器上定义一些属性，并在网格中的每个单独项目上定义一些属性。
These properties combined will determine the final look of the grid.
这些属性的组合将确定网格的最终外观。
The most basic container properties are grid-template-columns and grid-template-rows.
最基本的容器属性是grid-template-columns和grid-template-rows 。
网格模板列和网格模板行 (grid-template-columns and grid-template-rows)
Those properties define the number of columns and rows in the grid, and they also set the width of each column/row.
这些属性定义了网格中的列数和行数，并且还设置了每列/行的宽度。
The following snippet defines a grid with 4 columns each 200px wide, and 2 rows with a 300px height each.
以下代码段定义了一个网格，该网格具有4列(每列200像素)宽和2行(每列300像素高度)。
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
Here’s another example of a grid with 2 columns and 2 rows:
这是具有2列2行的网格的另一个示例：
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}
自动尺寸 (Automatic dimensions)
Many times you might have a fixed header size, a fixed footer size, and the main content that is flexible in height, depending on its length. In this case you can use the auto keyword:
很多时候，您可能会具有固定的页眉大小，固定的页脚大小以及主要内容，高度取决于其长度而灵活。 在这种情况下，您可以使用auto关键字：
.container {
display: grid;
grid-template-rows: 100px auto 100px;
}不同的列和行尺寸 (Different columns and rows dimensions)
In the above examples we made pretty, regular grids by using the same values for rows and the same values for columns.
在上面的示例中，我们通过对行使用相同的值和对列使用相同的值来制作漂亮，规则的网格。
You can specify any value for each row/column, to create a lot of different designs:
您可以为每个行/列指定任何值，以创建许多不同的设计：
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
}Another example:
另一个例子：
.container {
display: grid;
grid-template-columns: 10px 100px;
grid-template-rows: 100px 10px;
}在单元之间增加空间 (Adding space between the cells)
Unless specified, there is no space between the cells.
除非另有说明，否则单元之间没有空间。
You can add spacing by using those properties:
您可以使用以下属性添加间距：
grid-column-gapgrid-column-gapgrid-row-gapgrid-row-gap
or the shorthand syntax grid-gap.
或简写语法grid-gap 。
Example:
例：
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-column-gap: 25px;
grid-row-gap: 25px;
}The same layout using the shorthand:
使用速记的相同布局：
.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-gap: 25px;
}在多个列和/或行上生成项目 (Spawning items on multiple columns and/or rows)
Every cell item has the option to occupy more than just one box in the row, and expand horizontally or vertically to get more space, while respecting the grid proportions set in the container.
每个单元格项目都可以选择在一行中占据多个框，然后水平或垂直扩展以获取更多空间，同时遵守容器中设置的网格比例。
Those are the properties we’ll use for that:
这些是我们将用于此的属性：
grid-column-startgrid-column-startgrid-column-endgrid-column-endgrid-row-startgrid-row-startgrid-row-endgrid-row-end
Example:
例：
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item1 {
grid-column-start: 2;
grid-column-end: 4;
}
.item6 {
grid-column-start: 3;
grid-column-end: 5;
}The numbers correspond to the vertical line that separates each column, starting from 1:
数字对应于分隔每列的垂直线，从1开始：
The same principle applies to grid-row-start and grid-row-end, except this time instead of taking more columns, a cell takes more rows.
相同的原理适用于grid-row-start和grid-row-end ，除了这次不是占用更多列，而是一个单元格占用更多行。
速记语法 (Shorthand syntax)
Those properties have a shorthand syntax provided by:
这些属性具有以下速记语法：
grid-columngrid-columngrid-rowgrid-row
The usage is simple, here’s how to replicate the above layout:
用法很简单，这是复制上述布局的方法：
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item1 {
grid-column: 2 / 4;
}
.item6 {
grid-column: 3 / 5;
} 使用grid-area作为简写 (Using grid-area as a shorthand)
The grid-area property can be used as a shorthand for the grid-column and grid-row shorthands, when you need to apply both to a single element. Instead of having:
当您需要将二者都应用于单个元素时，可以将grid-area属性用作grid-column和grid-row速记的简写。 而不是：
.item1 {
grid-row: 1 / 4;
grid-column: 3 / 5;
}You can use
您可以使用
.item1 {
grid-area: 1 / 3 / 4 / 5;
}(grid-row-start / grid-column-start / grid-row-end / grid-column-end)
(网格行开始/网格列开始/网格行结束/网格列结束)
使用span (Using span)
Another approach is to set the starting column/row, and set how many it should occupy using span:
另一种方法是设置起始列/行，并使用span设置应占用的行数：
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item1 {
grid-column: 2 / span 2;
}
.item6 {
grid-column: 3 / span 2;
}span works also with the non-shorthand syntax:
span也可以使用非速记语法：
.item1 {
grid-column-start: 2;
grid-column-end: span 2;
}and you can also use on the start property. In this case, the end position will be used as a reference, and span will count “back”:
并且您还可以在start属性上使用。 在这种情况下，终点位置将用作参考， span将计为“后退”：
.item1 {
grid-column-start: span 2;
grid-column-end: 3;
}更多网格配置 (More grid configuration)
使用分数 (Using fractions)
Specifying the exact width of each column or row is not ideal in every case.
在每种情况下，指定每一列或每一行的确切宽度都不是理想的。
A fraction is a unit of space.
分数是空间的单位。
The following example divides a grid into 3 columns with the same width, 1⁄3 of the available space each.
下面的示例划分的栅格成3列以相同的宽度，每个可用空间的三分之一 。
.container {
grid-template-columns: 1fr 1fr 1fr;
}使用百分比和雷姆 (Using percentages and rem)
You can also use percentages, and mix and match fractions, pixels, rem and percentages:
您还可以使用百分比，以及混合和匹配分数，像素，rem和百分比：
.container {
grid-template-columns: 3rem 15% 1fr 2fr
} 使用repeat() (Using repeat())
repeat() is a special function that takes a number that indicates the number of times a row/column will be repeated, and the length of each one.
repeat()是一个特殊的函数，它使用一个数字来指示行/列将被重复的次数以及每个行/列的长度。
If every column has the same width you can specify the layout using this syntax:
如果每一列都具有相同的宽度，则可以使用以下语法指定布局：
.container {
grid-template-columns: repeat(4, 100px);
}This creates 4 columns with the same width.
这将创建具有相同宽度的4列。
Or using fractions:
或使用分数：
.container {
grid-template-columns: repeat(4, 1fr);
}指定行的最小宽度 (Specify a minimum width for a row)
Common use case: Have a sidebar that never collapses more than a certain amount of pixels when you resize the window.
常见用例：调整窗口大小时，边栏不会折叠到超过一定数量的像素。
Here’s an example where the sidebar takes 1⁄4 of the screen and never takes less than 200px:
这里的地方的侧栏的屏幕的四分之一 ，从不小于200像素花费较少的一个例子：
.container {
grid-template-columns: minmax(200px, 3fr) 9fr;
}You can also set just a maximum value using the auto keyword:
您还可以使用auto关键字设置最大值：
.container {
grid-template-columns: minmax(auto, 50%) 9fr;
}or just a minimum value:
或只是最小值：
.container {
grid-template-columns: minmax(100px, auto) 9fr;
} 使用grid-template-areas定位元素 (Positioning elements using grid-template-areas)
By default elements are positioned in the grid using their order in the HTML structure.
默认情况下，元素使用HTML结构中的顺序在网格中定位。
Using grid-template-areas You can define template areas to move them around in the grid, and also to spawn an item on multiple rows / columns instead of using grid-column.
使用grid-template-areas您可以定义模板区域以在网格中移动它们，也可以在多个行/列上生成一个项目，而不是使用grid-column 。
Here’s an example:
这是一个例子：
<div class="container">
<main>
...
</main>
<aside>
...
</aside>
<header>
...
</header>
<footer>
...
</footer>
</div>.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
grid-template-areas:
"header header header header"
"sidebar main main main"
"footer footer footer footer";
}
main {
grid-area: main;
}
aside {
grid-area: sidebar;
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}Despite their original order, items are placed where grid-template-areas define, depending on the grid-area property associated to them.
尽管它们是原始顺序，但它们仍放置在grid-template-areas定义的位置，具体取决于与它们关联的grid-area属性。
在模板区域中添加空单元格 (Adding empty cells in template areas)
You can set an empty cell using the dot . instead of an area name in grid-template-areas:
您可以使用点设置一个空单元格. 而不是grid-template-areas中的区域名称：
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
grid-template-areas:
". header header ."
"sidebar . main main"
". footer footer .";
}用网格填充页面 (Fill a page with a grid)
You can make a grid extend to fill the page using fr:
您可以使用fr使网格扩展以填充页面：
.container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}示例：页眉，侧边栏，内容和页脚 (An example: header, sidebar, content and footer)
Here is a simple example of using CSS Grid to create a site layout that provides a header op top, a main part with sidebar on the left and content on the right, and a footer afterwards.
这是一个使用CSS Grid创建站点布局的简单示例，该站点布局提供了页眉顶部，主体部分(左侧为侧边栏和右侧为内容)以及页脚。
Here’s the markup:
这是标记：
<div class="wrapper">
<header>Header</header>
<article>
<h1>Welcome</h1>
<p>Hi!</p>
</article>
<aside><ul><li>Sidebar</li></ul></aside>
<footer>Footer</footer>
</div>and here’s the CSS:
这是CSS：
header {
grid-area: header;
background-color: #fed330;
padding: 20px;
}
article {
grid-area: content;
background-color: #20bf6b;
padding: 20px;
}
aside {
grid-area: sidebar;
background-color: #45aaf2;
}
footer {
padding: 20px;
grid-area: footer;
background-color: #fd9644;
}
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}I added some colors to make it prettier, but basically it assigns to every different tag a grid-area name, which is used in the grid-template-areas property in .wrapper.
我添加了一些颜色使其更漂亮，但是基本上它为每个不同的标签分配了一个grid-area名称，该名称在.wrapper的grid-template-areas属性中.wrapper 。
When the layout is smaller we can put the sidebar below the content using a media query:
当布局较小时，我们可以使用媒体查询将边栏放在内容下方：
@media (max-width: 500px) {
.wrapper {
grid-template-columns: 4fr;
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
}
}See the Pen CSS Grid example with sidebar by Flavio Copes (@flaviocopes) on CodePen.
见笔与侧边栏CSS网格例如由弗拉维奥·科佩斯( @flaviocopes上) CodePen 。
结语 (Wrapping up)
These are the basics of CSS Grid. There are many things I didn’t include in this introduction but I wanted to make it very simple, to start using this new layout system without making it feel overwhelming.
这些是CSS Grid的基础。 我没有在本简介中包含很多内容，但是我想使其非常简单，以开始使用这种新的布局系统而不会让人感到不知所措。
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
