DAY19 搞样式--CSS Gird 怎麽用（上）？

前言

上一篇提到了格线布局的概念，简单的用图片来呈现，并没有提到程序码的部分，今天就让我们来开始研究看看程序码的部分要如何撰写罗！

来用程序码画个格线吧！

今天我们要尝试着用程序码写出这张图片的格线布局，来看看要怎麽做吧！

首先我们必须有一个外容器，也就是 container

<div class="container"></div>

接着我们必须要让他的显示类型变成Grid，所以在 css 部分必须要下 display

.container{
　　display : grid; 
}

然後我们要画线罗！

先来画横线，就是columns的部分，拆成五个20%等距的栏位

.container{
　　grid-template-columns: 20% 20% 20% 20% 20%;
}

再来画直线，就是rows的部分，拆成四个25%等距的行列

.container{
　　grid-template-rows: 25% 25% 25% 25%;
}

像这样就可以完成画线的部分罗！可以看到container已经被我们切成5乘4的表格了
为了方便检视，所以我放了20个 box 进去填满并用 border 让大家可以看到格线，如下图:

容器画完格线了要怎麽放元件进去呢?

一样用前一篇的图片来做示范，我们先看到图片中的内元件：

元件的宽度是从 columns-1 开始，到 columns-4 结束。
高度从 row-1 开始，到 row-2 结束。

在程序码中要如何撰写呢？
我们需要对於元件的部分撰写 CSS，来帮元件设定他画线的起点跟终点
用 grid-colums-start 决定栏位的起点是第几条线， grid-column-end 决定栏位的终点是第几条线

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

用 grid-row-start 决定行的起点是第几条线，grid-row-end 决定行的终点是第几条线

.boxA{
　　grid-row-start: 1;
　　grid-row-end: 2;
}

像这样就可以看到我们已经画好元件A罗！
可喜可贺，今天完成了我们第一组格线布局！