CSS Grid是一种在Web上创建二维布局的新方法。仅需几行CSS，就可以创建一个没有JavaScript几乎不可能的网格。没有插件或复杂的安装，没有繁琐的附加文件，仅由于12列而没有更多的设计限制。

什么样的网格是可能的？

简而言之：实际上，几乎所有想到的网格以及更多其他网格。自由选择不同网格项目的空间，大小和位置。可以在Grid by Example中找到最常见的带有标记的网格的概述。

对于所有UX / UI设计人员，请花点时间：是的，我将向您展示一些CSS。您可能不了解全部内容，但是我提供了一些漂亮的图片和一个CodePen Playground，以便您可以使用它。而且，我保证一旦您了解了它的实际工作原理，您的布局就会好得多！

让我们开始吧！我们的示例的HTML标记：

拥有5个div的div （当然可以或多或少）。如果愿意，您可以直接在CodePen中尝试HTML和CSS标记。.container``div

<div class="container">
   <div class="item color-1"> item-1 </div>
   <div class="item color-2"> item-2 </div>
   <div class="item color-3"> item-3 </div>
   <div class="item color-4"> item-4 </div>
   <div class="item color-5"> item-5 </div>
 </div>

我添加了一些CSS样式以更好地理解，与网格无关

基础：在CSS中设置网格，列和行

在CSS中，我们.container通过添加将类转换为网格display:grid。使用grid-template-columns我们激活所需的列，在这种情况下，5列每列250px。grid-template-rows在这种情况下，使用可以设置行的高度（如果需要）150px。就是这样，第一个网格就完成了！

.container{
  display: grid;
  grid-template-columns: 250px 250px 250px 250px 250px;
  grid-template-rows: 150px;
}
/* short form: */ 
grid-template-columns: repeat(5, 250px);

设置空隙

可以grid-gap为所有项目创建项目之间的任何所需距离，或者使用column-gap和分别为水平和垂直距离创建项目之间的所需距离row-gap。顺便说一句，您可以使用所有通用单位，例如px用于固定间隙或%用于柔性间隙。

.container{
  display: grid;
  grid-template-columns: repeat(5, 250px);
  grid-template-rows: 150px;
  grid-gap: 30px;
}

请注意，在容器的左侧和右侧，它始终是半个间隙！因此在此示例中为15px（其他大多数网格也相同）

使用“ fr”自动分配到可用的屏幕区域

设计师的梦想！随着分数单位总之fr你可以按照你的意愿划分可用空间！例如，在这里，我们将屏幕尺寸分为6个部分。第一列1fr占空间的1/6 = ，第二列为3/6 = ，3fr第三列为2/6 = 2fr。当然，您也可以添加grid-gap。

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

所有行都灵活

固定柱和柔性柱的px和fr混合

px并且可以以任何所需的方式混合，其余的将适应可用空间。奇迹般有效！fr

.container{
  display: grid;
  grid-template-columns: 300px 3fr 2fr;
}

第一行由px固定，其余布局灵活

绝对的安排自由

最好的是，即使在网格中，所有项目都可以占用您想要的空间！为此，用设置起点，用设置grid-column-start终点grid-column-end。或grid-column: startpoint / endpoint;

.container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}
.item-1 {
 grid-column: 1 / 4;
}
.item-5 {
 grid-column: 3 / 4;
}

不要对网格线感到困惑，它们从第一项的开始就开始！

同样适用于垂直或全区域分布！

在这里CSS Grid可以发光并证明其优于Boostrap和Co的优势。借助，项目可以采用所有垂直尺寸和位置grid-row。正如我们将在下一个示例中看到的那样，这是适应不同屏幕尺寸和设备的绝对优势。

.container{
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
}
.item-2 {
 grid-row: 1 / 3;
}
.item-1 {
 grid-column: 1 / 4;
 grid-row: 3 / 4;
}

任何垂直宽度和位置

适应不同的屏幕尺寸和设备？当然！

在这里，CSS Grid与常规网格相比也具有明显的优势，根据屏幕大小，您不仅可以通过媒体查询从柔性元素切换到固定元素，还可以调整整个项目的位置！

.container{
 display: grid;
 grid-template-columns: 250px 3fr 2fr;
}
.item-1 {
 grid-column: 1 / 4;
}
.item-2 {
 grid-row: 2 / 4;
}
@media only screen and (max-width: 720px){
  .container{
   grid-template-columns: 1fr 1fr;
  } 
  .item-1 {
   grid-column: 1 / 3;
   grid-row: 2 / 3;
  } 
  .item-2 {
   grid-row: 1 / 1;
  }
}

浏览器支持

现在，所有现代浏览器（Safari，Chrome，Firefox，Edge）都原生支持CSS Grid。凭借87.85％的全球支持，CSS网格已经成为Boostrap and Co.的替代产品。

状态：2020年10月Bycaniuse.com

参考

Responsive CSS Grid: The Ultimate Layout Freedom