如何快速用CSS Grid布局网站

 

使用CSS Grid模块布置网站模型比起流行的前端ui框架更快更简单地布局。在这篇文章中，我会教你如何使用它快速布局。

Our grid

我们将会模仿一个经典网站的非常基本的网格开始：

首先，我会对布局用到的HTML和CSS进行解释，我已经将其分解为四个部分。一旦你了解了这些，我会在之后的文章写更多的的案例。如果您对CSS Grid完全陌生，那你就需要看下我之前写的用5分钟的时间来学习拥抱未来的CSS Grid 布局文章

1.创建HTML

我们先用HTML创建一个container的div（将里面的元素变成网格）和创建items（里面有页头，菜单，内容，页脚）。

<div class="container">

<div class="header">HEADER</div>

<div class="menu">MENU</div>

<div class="content">CONTENT</