CSS Grid：插图介绍

我记得第一次学习CSS时，我很高兴能够了解浮动和内联显示以将元素放置在所需的布局中。我想知道如果当时有二维布局系统，我会如何反应。实际上，即使是现在我也对此感到兴奋，因为它改变了一切：我们编写CSS的方式以及编写标记的方式。使用CSS网格，构建响应式，动态和源顺序无关的布局比以往任何时候都更容易。

在这篇文章中，我们将了解所有CSS网格属性，以便构建简单的布局和一些不太简单的布局。我们将定义所有内容，然后我们将深入挖矿，看看我们可以用CSS网格实现什么。话虽这么说，如果你准备好学习一种新的思考布局的方法，那就拿红色药丸我会告诉你兔子洞的深度。

1.在我们开始之前

但在我们开始之前，我想解决您可能遇到的一些问题，并确保我们熟悉CSS网格及其术语的基础知识。

Q＆A

CSS网格是否取代了flex-box？

好吧，CSS网格不能取代flex-box。它们是用于不同目的的两种不同工具。实际上，它们可以很好地协同工作，我们可以在网格显示内部进行柔性显示，反之亦然。

CSS网格和flex-box有什么区别？

存在很多差异，但主要的一点是flex-box是一维布局系统而CSS网格是二维布局系统。看看下面的图1.1：

图1.1：Flex-box与CSS网格为什么不使用bootstrap？

我认为这个问题的最佳答案是Jen Simmons的引用：

我越是使用CSS Grid，我越相信通过在其上添加一层抽象没有任何好处。 CSS Grid是直接嵌入浏览器的布局框架 – Jen Simmons

CSS网格生产准备好了吗？

这取决于。你需要支持：IE，Opera mini，Blackberry浏览器还是百度手机？如果答案是否定的，那么是生产就绪，如果答案是肯定的，那么无论如何你可以使用它来支持它的浏览器（没有前缀：91.61％）使用 @supports CSS规则：

@supports (display: grid) {   div {     display: grid;   } } 

基本

基本上，网格可以分解为两个元素：网格容器和网格项。

图1.2：基本网格

正如我们在图1.2中看到的那样，网格容器是一组列和行。一种 row 是两个连续的行线（水平线）和a之间的空格 column 是两个连续列线（垂直线）之间的空格。一行可以称为轨道，而列也是如此。一个网格 track 是两条平行网格线之间的空间。

每个轨道可以有一个或多个网格单元。网格 cell 是最基本的网格单元，因为它是最小的网格单元。它是四条相交网格线之间的空间。如果我们将多个网格单元组合在一起，我们有一个网格 area。重要的是要提到网格区域必须是矩形的，例如我们可以具有T形网格区域。

网格线从1开始到显式或隐式定义的行数。网格线的最后一个数字可以称为-1，它之前的元素为-2，依此类推。这将在以后派上用场。
在图1.2中，列线的数量从1到6（从-6到-1），行线的数量从1到5（或-5到-1）。

考虑网格线的数量 explicit 如果你在CSS中明确设置它。它被认为是 implicit 如果它是由浏览器设置的。

最后，网格单元可以通过空间或间隙分开。这些差距被称为 gutters，但我们通常将它们称为 gaps :)。

2. CSS网格基本属性

好的，我们应该准备好开始实现一些网格。我们首先要讨论我们可以使用网格容器的所有属性，然后我们将看看网格项的属性。

让我们考虑本节的以下模板：

 class="grid-container">      class="grid-item">grid item 1