5分钟学习css网格

序言

您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid网格布局又是一个新的玩意,它相比于前两者,非常的强大,我也是个初学者,如果译文有误导的地方,请路过的老师多提意见和指正,如果你想阅读英文原文,扫文末下方的二维码,或者跳转到指定的链接就可以了的

开始

网格布局是网站设计的基础,CSS网格模块是创建网站最强大,最简单的工具。我个人认为它比Bootstrap更好

这个模块今年也得到了主流浏览器（Safari，Chrome，Firefox，Edge）的本地支持，所以我相信所有的前端开发者都不得不在不久的将来学习这个技术

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

你的第一个网格布局

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

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

<div class="wrapper">  <!--父级元素,包装，容器-->
          <!-- 子级元素,物品 -->
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
   </div>

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

.wrapper{
        display:grid;  /* 声明是网格形式展示*/
    }

但是,这还没有做任何事情,因为我们还没有定义我们希望我们的网格如何。它会将6个div彼此叠放在一起

列和行

为了使它成为二维的，我们需要定义列和行。我们创建三列和两行。我们将使用 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;
    }

尝试掌握代码和布局之间的联系. 这是如何发挥的:

放置项目

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

让我们来创建一个3x3网格,使用与之前相同的标记

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

这将导致以下布局

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

要定位和调整项目的大小，我们将定位它们并使用网格列和网格行的属性

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

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

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

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

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

.item1{
       <!-- 是grid-column-start和grid-column-end的简写属性,通过在其网格布局中提供一行，一个跨度或任何内容（自动）来指定网格项的大小和位置，网格区域的内嵌开始和内嵌结束边缘 -->
       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;
   }

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

这就是它

总结

本节主要讲的是一css中新型的布局方式,网格布局,声明是网格形式展示,与子元素排列方式都是在父元素中进行设置,通过grid-template-columns,grid-template-rows两个属性设置列宽和行高是多少,又通过grid-column-start与grid-column-end两个属性定位字元素的位置和项目的大小,关于网格布局内容很多,自己知道的也只是冰山一角,有待挖掘和探索

英文原文出处:https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228

作者：川川,一个靠前排的90后帅小伙,具有情怀的代码男,路上正追逐斜杠青年的践行者,愿做你耳朵旁边的枕男,眼睛笔尖下的窗户