# CSS Grid 布局入门教程

> 参考链接：https://css-tricks.com/getting-started-css-grid/

我们的 HTML 结构

<div class="wrapper">
	<div class="letter">A</div>
	<div class="letter">B</div>
</div>

给 .letter 一点样式：

.letter {
	font-size: 2rem;
	background: #0069b3;
	color: #fff;
	text-align: center;
}

然后是 .wrapper。

.wrapper {
	display: grid;
	background: black;
}

为 .wrapper 设置了 display: grid; 好像并没有发生什么。是因为我们还需要指定列和行数。

.wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1px;
	background: black;
}

1fr 是一个 CSS 单位表示每列占据一行宽度的几分之几（除去间隙 grid-columkn-gap）。有两个 fr 表示一行放两列。grid-template-columns: 1fr 1fr; 表示每列占据每行宽度的二分之一。

grid-columkn-gap: 1px; 表示每列之间的水平间隙是 1px。

如果在 HTML 结构里在多加两个字符会怎么样呢？

<div class="wrapper">
	<div class="letter">A</div>
	<div class="letter">B</div>
	<div class="letter">C</div>
	<div class="letter">D</div>
</div>

啊哈，出现两行了！但发现上下字母间没有间隙了。所有我们在设置下每行之间的间隙，用 grid-row-gap: 1px; 即可。

.wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 1px;
	grid-row-gap: 1px;
	background: black;
}

我们还可以设置 .wrapper 一行放三列：

.wrapper {   
	grid-template-columns: 1fr 1fr 1fr; 
}

让第一列占据一行宽度的五分之三。

.wrapper {   
	grid-template-columns: 3fr 1fr 1fr;   
}

基于媒体查询布局

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 800px) {
  .wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

grid-template-columns 的用法还可以更复杂，这里就学简单的。下一个要学的是 grid-template-rows。

.wrapper {
	grid-template-rows: 1fr 3fr;
}

这表示第二行的宽度是第一行宽度的三倍。

在线 demo [在这里](https://codepen.io/zhangbao/pen/zWbobZ)。