gridTemplate

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用于 父元素 (成为 Grid Container 网格容器)和其 子元素 （成为 Grid Items 网格项），你就可以轻松使用 Grid(网格) 布局。 如果你刚刚接触 CSS Grid 布局，那么我强烈建议你首先阅读 《 5分钟学会 CSS Grid 布局 》这篇文章作为你的最简入门。当你对 CSS Grid 布局有了基本的认识之后，再来阅读这篇指南，然后阅读 如何使用 CSS Grid 快速而又灵活的布局 让你体会 Grid 布局真正的强大和灵活。 简介 CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局