在本文中，我们将通过创建响应式多列网站布局来实现css grid。
如今，css grid是web开发中一种新的热门趋势。忘记表格布局和浮动：设计网站的新方法已经在这里！该技术引入了二维网格，通过少量css规则定义了多个布局区域。
网格可以使第三方框架如960gs或bootstrap网格冗余，因为您可以轻松地自己完成所有工作！尽管internet explorer实现了旧版本的规范，但所有主流浏览器都支持此功能。
我们要建立什么因此，我们被要求创建一个典型的网站布局，其中包含标题，主要内容区域，右侧边栏，赞助商列表和页脚：
另一个开发人员已经尝试解决这个任务，并提出了一个涉及浮动的解决方案，以及一些clearfix hacks。我们将这个现有布局称为“初始”：display:?table
直到最近，浮动被认为是创建这种布局的最佳选择。在此之前，我们必须使用html表，但它们有许多缺点。具体而言，这样的表的布局是非常刚性的，需要大量的标签（table，tr，td，th等等），和语义这些标记被用来呈现表数据，而不是设计布局。
但css继续发展，现在我们有了css grid。从概念上讲，它类似于旧的表格布局，但可以使用具有更灵活布局的语义html元素。
规划网格首先要做的是：我们需要为文档定义一个基本的html结构。在此之前，让我们简要地谈谈初始示例的工作原理。它有以下主要块：
.container?是全局包装器，左边和右边的边距很小。.main-header是包含.logo（占据20％的空间，向左浮动）和.main-menu（占据空间的79％，向右浮动）的标题。标题也分配了一个hacky修复程序来清除浮动。.content-area-wrapper包裹主要部分.content-area（占空间的66.6％减去1rem保留边缘，向左浮动）和.sidebar（占据空间的33.3％，向右浮动）。包装器本身也分配了一个clearfix。.sponsors-wrapper包含赞助商的徽标。在内部，有一个.sponsors与部分display属性设置为table。反过来，每个赞助商都显示为表格单元格。.footer?是我们的页脚，跨越100％的空间。我们的新布局与初始布局非常相似，但有一个例外：我们不会添加.main-header和.content-area-wrapper包装器，因为不再需要clearfixes。这是html的新版本：
<div class=container>
<header class=logo>
<h1><a href=#>demosite</a></h1>
</header>
<nav class=main-menu>
<ul>
<li class=main-menu__item><a href=#>our clients</a></li>
<li class=main-menu__item><a href=#>products</a></li>
<li class=main-menu__item><a href=#>contact</a></li>
</ul>
</nav>
<main class=content-area>
<h2>welcome!</h2>
<p>
content
</p>
</main>
<aside class=sidebar>
<h3>additional stuff</h3>
<ul>
<li>items</li>
<li>are</li>
<li>listed</li>
<li>here</li>
<li>wow!</li>
</ul>
</aside>
<section class=sponsors-wrapper>
<h2>our sponsors</h2>
<section class=sponsors>
<figure class=sponsor>
<img src=https://via.placeholder.com/150x150>
</figure>
<figure class=sponsor>
<img src=https://via.placeholder.com/200x150>
</figure>
<figure class=sponsor>
<img src=https://via.placeholder.com/100x200>
</figure>
<figure class=sponsor>
<img src=https://via.placeholder.com/100x100>
</figure>
<figure class=sponsor>
<img src=https://via.placeholder.com/200x200>
</figure>
</section>
</section>
<footer class=footer>
<p>
? 2018 demosite. white&sons llc. all rights (perhaps) reserved.
</p>
</footer>
</div>
请注意，您可以将其body用作全局.container;?在这种情况下，这只是一个偏好问题。总而言之，我们有六个主要领域：
商标菜单主要内容侧边栏赞助商页脚通常建议您实施移动优先方法。也就是说，您从移动布局开始，然后为更大的屏幕添加样式。在这种情况下，这不是必需的，因为我们正在调整已经回退到小屏幕设备上的线性化视图的初始布局。因此，让我们首先关注网格的实现，然后讨论响应性和回退规则。所以，返回我们的方案，看看如何安排网格列：
所以，我建议有三列（以红色突出显示）和四行（以蓝色突出显示）。某些区域（如徽标）将仅占用一列，而其他区域（如主要内容）将跨越多列。稍后我们可以轻松修改布局，移动区域或添加新区域。
遵循该计划，为每个区域指定一个唯一的名称。这些将在下面定义的布局中使用：
.logo {
grid-area: logo;
}
.main-menu {
grid-area: menu;
}
.content-area {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.sponsors-wrapper {
grid-area: sponsors;
}
.footer {
grid-area: footer;
}
现在将display属性设置为grid，定义三列并在主容器的左侧和右侧添加小边距：
.container {
display: grid;
margin: 0 2rem;
grid-template-columns: 2fr 6fr 4fr;
}
display:?grid定义网格容器并为其子项设置特殊格式上下文。fr是一个特殊的单位，意思是“网格容器的自由空间的一小部分”。给了我们，和。这意味着中间列占据了50％的可用空间。2?+?6?+?4126?/?12?=?0.5
我还想在行和列之间添加一些间距：
.container {
// ...
grid-gap: 2rem 1rem;
}
完成此操作后，我们可以处理个别区域。但在结束本节之前，让我们快速添加一些常见的样式：
* {
box-sizing: border-box;
}
html {
font-size: 16px;
font-family: georgia, serif;
}
body {
background-color: #fbfbfb;
}
h1, h2, h3 {
margin-top: 0;
}
header h1 {
margin: 0;
}
main p {
margin-botto