我们直接进入代码，如下所示，先写些标签，源码在这个链接里面：https://codepen.io/Shadid/pen/zYqNvgv
<divclass="container">
<header>Header</header>
<aside>Aside1</aside>
<section>Section</section>
<aside>Aside2</aside>
<footer>Footer</footer>
</div>
在上面，我们创建了一个header、两个aside和一个footer元素，并将它们包装在一个container 元素中。我们为容器元素中的所有元素添加背景色和字体大小。
.container>*{
background:aquamarine;
font-size:30px;
}
运行的网页如下：
现在我们添加一些网格属性：
.container{
display:grid;
grid-gap:5px;
grid-template-areas:
"header"
"aside-1"
"aside-2"
"section"
"footer"
}
/*Assigngridareastoelements*/
header{
grid-area:header;
}
aside:nth-of-type(1){
grid-area:aside-1;
}
aside:nth-of-type(2){
grid-area:aside-2;
}
section{
grid-area:section;
}
footer{
grid-area:footer;
}
首先，我们定义了display:grid，它将启用网格布局，然后我们使用grid-gap在网格元素中增加间隙。
接下来，我们为每个html元素分配了一个网格区域名称。在container 类中，我们可以使用grid-template-areas`属性定 义html 模板的外观，注意网格模板区域是如何排列的。
grid-template-areas:
"header"
"aside-1"
"aside-2"
"section"
"footer"
元素的顺序与 dom 结构不同。但是，最终按我们网络区域的顺序来展示。
下一步是使我们的页面具有响应性。我们希望在更大的屏幕上使用不同的布局。CSS网格使得处理媒体查询和创建响应式布局变得非常容易。看下面代码：
@media(min-width:670px){
.container{
grid-template-areas:
"headerheaderheader"
"aside-1sectionaside-2"
"footerfooterfooter"
}
}
我们所要做的就是在媒体查询中重新排序网格模板区域。
如何使用 CSS 网格来组织列和？先从下面的代码开始：
<divclass="container">
<divclass="item">One</div>
<divclass="item">Two</div>
<divclass="item">Three</div>
<divclass="item">Four</div>
<divclass="item">Five</div>
<divclass="item">Six</div>
</div>
添加一些基本的 css
.container{
display:grid;
height:100vh;
grid-gap:10px;
}
.item{
background:lightcoral;
}
我们为上面的 dom 结构使用了网格布局，并使用grid-gap增加了风格之间的间距。现在，我们使用grid-template-columns属性来添加一些列。
.container{
display:grid;
height:100vh;
grid-gap:10px;
grid-template-columns:100px200pxautoauto;
}
就像这样，我们使用了列。我们指定第一列为100px，第二列为200px。由于我们在第3列和第4列中应用了auto，因此剩余的屏幕长度将在其中分成两半。
