网站建设之CSS网格快速介绍网站布局的未来

网格布局是网站设计的基础，CSS网格模块是创建网站最强大，最简单的工具。

该模块还得到了由本机支持主流浏览器（Safari浏览器，Chrome浏览器，火狐，IE）今年，所以我相信所有的前端开发人员必须学习这一技术在不太遥远的将来。

在本文中，我将尽可能快地介绍CSS Grid的基本知识。直到你理解了基础知识之后，我才会把你不应该关心的一切都抛在脑后。

我也在创建一个深入的CSS Grid课程，我将在12月免费推出。看看这里的课程预览。

哦，如果你想早点进入课程，请在这里留下你的电子邮件。

现在让我们跳吧！

你的第一个网格布局

CSS Grid的两个核心成分是包装（父） 和物品（子）。包装是实际的网格，项目是网格内的内容。

下面是包含六个项目的包装的标记：

<div class =“wrapper”> 
  <div> 1 </ div> 
  <div> 2 </ div> 
  <div> 3 
  </ div> 
  <div> 5 </ div> 
  <div > 6 </ div> 
</ div>

为了把我们的包装div变成一个网格，我们简单地给它一个显示grid：

.wrapper { 
    display：grid; 
}

但是，这还没有做任何事情，因为我们还没有定义我们希望我们的网格如何。它将简单地堆叠div's在一起。

列和行

为了使它成为二维的，我们需要定义列和行。我们创建三列和两行。我们将使用grid-template-row和grid-template-column属性。

.wrapper { 
    display：grid; 
    grid-template-columns：100px 100px 100px; 
    grid-template-rows：50px 50px; 
}

正如我们已经写了三个值grid-template-columns，我们会得到三列。我们将得到两行，因为我们已经为它指定了两个值grid-template-rows。

这些值决定了我们希望我们的列有多宽（100px），以及我们希望行数是多少（50px）。结果如下：

为了确保正确理解这些值与网格外观之间的关系，请看一下这个例子。

.wrapper { 
    display：grid; 
    grid-template-columns：200px 50px 100px; 
    grid-template-rows：100px 30px; 
}

尝试掌握代码和布局之间的联系。

这是如何发挥的：

放置物品

接下来你需要学习的是如何在网格上放置物品。这是你获得超级大国的地方，因为它使得创建布局变得非常简单。

我们来创建一个3×3网格，使用与之前相同的标记。

.wrapper { 
    display：grid; 
    grid-template-columns：100px 100px 100px; 
    grid-template-rows：100px 100px 100px; 
}

这将导致以下布局：

注意，我们只在页面上看到一个3×2的网格，而我们将其定义为一个3×3的网格。那是因为我们只有六个项目来填补网格。如果我们还有三个，那么最下面的一行也会被填充。

要定位和调整项目大小，我们将定位它们并使用grid-column和grid-row属性：

.item1 { 
    grid-column-start：1; 
    grid-column-end：4; 
}

我们在这里说的是，我们希望item1从第一个网格线开始，到第四个结束线。换句话说，它会占用整行。以下是在屏幕上显示的内容：

你们为什么只有3列的时候，我们有4条专栏？看看这个图像，我画了黑色的列线：

请注意，我们现在正在使用网格中的所有行。当我们把第一个项目占据整个第一行时，它将其余的项目向下推。

最后，我想展示一个更简单的方法来编写上面的语法：

.item1 { 
    grid-column：1/4; 
}

为了确保你已经正确理解了这个概念，让我们重新排列一些项目。

.item1 { 
    grid-column-start：1; 
    grid-column-end：3; 
}

.item3 { 
    grid-row-start：2; 
    grid-row-end：4; 
}

.item4 { 
    grid-column-start：2; 
    grid-column-end：4; 
}

以下是页面上的外观 试着把你的头看起来像是这样。它不应该太难。

这就是它！