让我们来了解在很长一段时间内，前端网页布局中最令人兴奋的事情。这就是CSS网格技术。CSS网格是一套全新的技术，它允许网页设计师和开发人员在网页上加入强大的页面布局技术。传统上，网络的页面布局一直是一个极具挑战性的做法。过去我们可能使用过表格、div、图层、各种CSS黑客，最终还使用了Foundation、Bootstrap等CSS框架。现在我们有了CSS Grid，这是一个非常强大的二维布局工具，用于在网页上定位项目。你可以用CSS Grid创建你能想到的任何布局。让我们来看看CSS Grid现在是如何工作的一些例子。
网格容器
我们要做的第一件事是设置一个网格容器。我们通过将display 属性设置为grid 来做到这一点。定义好的网格容器的任何直接子项现在都自动成为网格项。
display: grid;
<html>
<head>
<style>
.grid-container {
display: grid;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>
注意，当我们把display 设置为grid ，项目就会以堆叠的行的形式出现，横跨容器的整个宽度。我们这里有一些带有数字的图片作为例子。你可以看到网格线，因为我们在Firefox中打开了网格线以方便可视化。
display: inline-grid;
<html>
<head>
<style>
.grid-container {
display: inline-grid;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>
在display 被设置为inline-grid 的情况下，注意到网格项只跨越了内容的宽度。
明确的网格
一旦我们设置好了容器，就可以使用grid-template-rows 和grid-template-columns 属性显式地定义列和行。
grid-template-rows
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 50px 75px;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>
这里，第一行的高度是50像素，第二行的高度是75像素。所有其他的行只是使用它们所包含的内容的高度。在我们的例子中，这是100px乘100px的图片。
grid-template-columns
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>
现在我们有2行和3列，高度和宽度都是100像素。
grid-template-rows和grid-template-columns中的fr
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>
小数单位是让浏览器自动将自由空间分成相等部分的好方法。这个例子显示了两行相等的部分，以及三列相等的尺寸。这些图片只有100px乘100px，所以它们在每个网格单元中默认从左边开始。
最小和最大的网格轨道尺寸
你可以使用minmax()函数来创建网格轨道，使用可用的空间，但不会收缩得比定义的尺寸更窄，也不会增长得超过定义的尺寸。
minmax()函数
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: minmax(100px,150px) 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="200x200.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="200x200.png">
</div>
</body>
</html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: minmax(100px,auto) 1fr minmax(100px,auto);
}
</style>
</head>
<body>
<div class="grid-container">
<img src="200x200.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="200x200.png">
</div>
</body>
</html>
通过结合minmax()和fr单元，人们可以创建各种响应式设计，不再需要在浏览器中使用多个媒体查询。
重复的网格轨迹
与其明确定义每一行或每一列，你可以使用repeat() 函数来说明你希望有多少行或多少列。
repeat()函数
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</body>
</html>
带有网格间隙的排水沟
默认情况下，行和列之间没有任何空间。你可以使用grid-gap定义行和列之间的空白。请注意，你不能对gutters应用任何样式。这些只是为了留白。
grid-gap
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</body>
</html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 5px;
grid-column-gap: 20px;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</body>
</html>
使用网格线号定位项目
使得CSS Grid非常强大的是能够准确地将内容放在你想要的地方。下面是几个在网格上准确定位图片的例子。
grid-row-start(end) grid-column-start(end)
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.a {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}
</style>
</head>
<body>
<div class="grid-container">
<img class="a" src="1.png">
<img class="b" src="2.png">
<img class="c" src="3.png">
<img class="d" src="4.png">
<img class="e" src="5.png">
<img class="f" src="6.png">
</div>
</body>
