一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

我正在参加码上掘金体验活动，详情：show出你的创意代码块

前言

实现了一个简单的课程表页面，是我大一时一个作业。当时不明白什么布局方式，先是用div嵌套弄了一下，发现不太合适。因为许多格子的大小都不同，div需要很麻烦的写样式。课程表比较像表格，就拿表格做了一下。

grid布局

学习了这么久后，发现这一个简单的界面可以很容易的使用grid布局做出来。现在就来简单介绍一下grid布局。

首先学习grid布局需要了解一些grid布局的基本概念。

1. 容器和项目

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

上面的几行代码中，最外层的div元素就是容器，里面的三个div就是项目。但是p标签并不是项目，因为只有容器包含的最外面元素才是项目。

2. 行列

容器里面水平的称为行，竖直的称为列。

3. 单元格

行和列交叉的区域称为单元格

div {
  display: grid;
}

通过display：grid可以指定元素采用grid布局，

注意:设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

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

容器属性

1. 通过grid-template-columns和grid-template-rows可以设置容器内项目的宽度和高度。
2. grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
3. 通过grid-auto-flow属性可以设置元素排列的顺序，是从左到右还是从上到下。

通过这些属性就可以完成简单课程表。