栅格布局：也称为网格系统，运用固定的格子设计版面布局。
Demo
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>栅格布局</title>
<style type="text/css">
/*清空所有标签外边距和内边距。*/
*{
margin: 0px;
padding: 0px;
}
.grid{
/*设置弹性布局容器*/
display: flex;
/*flex容器为单行*/
flex-wrap: nowrap;
/*主轴方式对齐，平均分布在行里*/
justify-content: space-around;
}
.grid-cell-1,
.grid-cell-2,
.grid-cell-3,
.grid-cell-4,
.grid-cell-5,
.grid-cell-6{
/*弹性收缩比率*/
flex-shrink: 1;
padding: 10px;
}
.grid-cell-1{
/*弹性扩展比率*/
flex-grow: 1;
}
.grid-cell-2{
/*弹性扩展比率*/
flex-grow: 2;
}
.grid-cell-3{
/*弹性扩展比率*/
flex-grow: 3;
}
.grid-cell-4{
/*弹性扩展比率*/
flex-grow: 4;
}
.grid-cell-5{
/*弹性扩展比率*/
flex-grow: 5;
}
.grid-cell-6{
/*弹性扩展比率*/
flex-grow: 6;
}
/*粉红色背景*/
.box-red{
background-color: green;
min-height: 50px;
text-align: center;
width: 100%;
line-height: 50px;
}
/*绿色背景*/
.box-green{
background-color: pink;
min-height: 50px;
text-align: center;
width: 100%;
line-height: 50px;
}
</style>
</head>
<body>
<header id="header" class="box-red">
<div class="grid">
<div class="grid-cell-1">
<div class="box-green">
游戏商城Logo
</div>
</div>
<nav class="grid-cell-3">
<div class="box-green">
顶部导航栏
</div>
</nav>
<div class="grid-cell-1">
<div class="box-green">
顶部功能区
</div>
</div>
</div>
</header>
<section id="content" class="box-red">
<div class="grid box-green">
<div class="grid-cell-1">
<div class="box-red">
优惠
</div>
</div>
<div class="grid-cell-1">
<div class="box-red">
优惠
</div>
</div>
<div class="grid-cell-1">
<div class="box-red">
优惠
</div>
</div>
<div class="grid-cell-1">
<div class="box-red">
优惠
</div>
</div>
</div>
<div class="box-green">
<div class="grid">
<nav class="grid-cell-1">
<div class="box-red">
游戏分类
</div>
</nav>
</div>
</div>
<div class="grid box-green">
<div class="grid-cell-1">
<div class="box-red">
游戏列表
</div>
</div>
</div>
</section>
<footer id="footer" class="grid box-red">
<nav class="grid-cell-2">
<div class="box-green">
底部导航栏
</div>
</nav>
<div class="grid-cell-1">
<div class="box-green">
底部网址
</div>
</div>
</footer>
</body>
</html>