👾 🤞🏿 🤝 每个人都清楚CSS网格 👨‍👨‍👧‍👦 ☸️ 🧙🏿

什么是网格？

网格是水平线和垂直线的重叠集合-一组定义列，另一组定义行。可以根据行和列将项目放置在网格中。

浏览器支持

2020年浏览器支持将达到94％

网格容器

我们通过在元素上声明display：grid或display：inline-grid来创建网格容器。一旦完成此操作，此元素的所有直接子代都将成为网格项。

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-rows是一个CSS属性，用于定义网格行功能的行名和大小调整路径。

CSS属性grid-row确定元素将从网格布局中的哪一行开始，元素将占据几行或元素在网格布局中的哪一行结束。这是grid-row-start和grid-row-end属性的简写属性。

CSS属性grid-gap是的简写属性grid-row-gap，grid-column-gap它定义网格的行和列之间的装订线。

该属性grid-template-areas通过引用区域名称来定义网格模板，这些区域名称是使用grid-area属性设置的。

重复区域名称会使内容跨越那些单元格。点表示空单元格。语法本身提供了网格结构的可视化。

使用属性，grid-area我们可以为每个区域分配自己的名称。命名区域尚未创建任何布局，但是现在我们已经命名了可以在其中使用的区域。

.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}

使用CSS Grid创建网站模板：

更改模板

您只需在中重新分配网格区域即可更改模板grid-template-areas。

因此，如果我们更改为：

grid-template-areas:
 "nav header header"
 "nav article ads"; 
}

结果，我们得到以下模板：

带有媒体查询的网格

网格的优点之一是您可以在几秒钟内创建一个完全不同的模板。

这使得CSS Grid非常适合媒体查询。我们可以简单地在ASCII图形中重新分配值并将结果包装在最终的媒体查询中。

@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}

结果，我们得到：

因此，重点是在属性中重新分配值grid-template-areas。

结论

在本文中，我们仅介绍了CSS Grid Layout冰山一角。有时很难相信CSS Grid可以做什么。这是所有模式的突破。我喜欢它。

我建议您注意此规范，并花一些时间研究它。相信我，将来肯定会派上用场，如果您使用React，Angular，Vue（插入您自己的）编写也没关系。网格在这里已经很长时间了。

每个人都清楚CSS网格