用CSS Grid进行灵活强大的布局

CSS Grid(网格) 模块是创建网站布局一个非常棒的工具。它能使你快速地进行布局尝试，比你尝试过的任何其他布局系统都快。

如何快速地实现以下三种基本布局，grid布局就能够做到。

如果你对什么是Grid布局还不是十分了解的话，可以先看看 5分钟快速入门Grid
接下来我们见识一下Grid的灵活与强大

一、首先是html结构

<div class="container">
	<header>head</header> <!--头部-->
	<aside>sideBar</aside> <!--侧边栏-->
	<div class="content">content</div> <!--主体内容-->
	<footer>footer</footer> <!--尾部-->
</div>

二、接下来是基本的CSS样式

.container {
    
    
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 100px 400px 100px;
	grid-gap: 10px;
}

我们需要在 container 元素设置 display: grid; ，将其设置为网格容器。
并定义需要多少行grid-template-rows和多少列grid-template-columns

我们来依次解释一下以上代码是什么意思：
使用 grid-template-columns 属性创建一个 5 列的网格，每个列都是一个单位宽度（总宽度的 1/5）。（注：其中， repeat(5, 1fr) 意思是 5 个重复的 1fr 值。 fr 是网格容器剩余空间的等分单位。）使用 grid-template-rows 属性创建 3 行，第一行高度是 100px ，第二行高度是 400px 和第三行高度是 100px。最后，使用 grid-gap 属性在网格中的网格项之间添加一个10px 间隙。

三、添加grid-template-areas

.container {
    
    
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 100px 400px 100px;
	grid-gap: 10px;
	grid-template-areas: 
		"s h h h h"
		"s c c c c"
		"s f f f f";
}

grid-template-areas 属性是将你的代码在创建的网格中进行可视化表示。
正如你所看到的，它有 3 行 5列，和我们在 grid-template-columns 和 grid-template-rows 中定义的正好呼应。

每行代表一行，用网格术语来说是 网格轨道(Grid Track) ，每个字符（ h，s，c，f）代表一个网格单元格。注：其实是 网格区域(Grid Area) 名称。

四个字母中的每一个现在都形成一个矩形 grid-area 。

其中字符 h，s，c，f，是因为他们分别代表 header, aside, content 和 footer 的。 当然，你可以使用任意名称。

四、给网格项设定网格区域名称

header {
    
    
	grid-area: h;
	border-radius: 20px;
	background-color: yellow;
}
aside {
    
    
	grid-area: s;
	border-radius: 20px;
	background-color: red;
}
.content {
    
    
	grid-area: c;
	border-radius: 20px;
	background-color: pink;
}
footer {
    
    
	grid-area: f;
	border-radius: 20px;
	background-color: purple;
}

剩下的就是将这些字符与网格中的网格项建立对应的连接。 我们可以在网格项中使用 grid-area 属性。

最后你就可以看到如下的结果。

如果想吧sideBar放在右侧怎么办呢
只需要调整grid-template-areas:属性网格单元格的位置就可以改变整个布局。

grid-template-areas: 
		"h h h h s"
		"c c c c s"
		"f f f f s";

除此之外还可以用.来代替空白部分

grid-template-areas: 
		". h h h ."
		"c c c c s"
		". f f f .";

至此，你已经看到了Grid网格布局一小块的灵活强大部分。