栅格布局：也称为网格系统，运用固定的格子设计版面布局。
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>
