CSS Grid Game

网格布局可使用智能回流元素（Intelligently Reflow Elements），比如典型游戏界面五大区块：标题、统计、主面板、得分、控制区。

区域	描述
title	标题区，标题区和主面板对齐。
stats	统计区，统计区显示在标题区之下。
score	得分区，得分区和统计区在列方向对齐。
board	主面板区，主面板在统计区和标题区右侧。
ctrls	控制区，控制区集中放置在主面板下方。

当游戏页面达到最低高度时，主面板底部和统计区底部对齐，否则主面板将扩展到屏幕可用空间。

横屏布局

横屏时界面被划分为2列3行的网格

横屏时列宽设置

grid-template-columns:auto minmax(min-content, 1fr);

列号	列宽	描述
第1列	auto	根据内容自动控制列宽
第2列	minmax(min-content, 1fr)	使用剩余空间，列宽不小于主面板区和控制区的最小宽度。

横屏时行高设置

 grid-template-rows:auto minmax(min-content, 1fr) auto;

行号	行宽	描述
第1行	auto	根据内容自动控制列宽
第2行	minmax(min-content, 1fr)	使用剩余空间，列宽不小于主面板区和控制区的最小行高。
第3行	auto	根据内容自动控制列宽

横屏时的区块分布

使用grid-template-areas定义区域，取值中每个字符串表示一行，字符串中每个单词用于定义区域名称，字符串中单词的数量则用于确定列的数量，每个字符串中单词数量必须相同。

grid-template-areas:
  "title board" 
  "stats board" 
  "score ctls";

横屏

竖屏布局

竖屏时的区块分布

grid-template-areas:
  "title stats" 
  "score stats" 
  "board board" 
  "ctrls ctrls";

竖屏

完整代码

<div class="flex">
  <div class="layout">
    <div class="title flex box">title</div>
    <div class="score flex box">score</div>
    <div class="stats flex box">stats</div>
    <div class="board flex box">board</div>
    <div class="control flex box">control</div>
  </div>
</div>

• 通过网格布局和媒体查询结合，无需修改文档结构即可实现重新排列布局的顺序。
• 游戏界面中每个区块采用网格线来定义，若占用多行或多列则采取跨行或跨列的方式来实现。

*, *:before, *:after{box-sizing:border-box; margin:0; padding:0;}
.flex{display:flex; justify-content:center; align-items:center;}
.box{border:1px dashed #ddd; padding:.5em;}
.area{background-color:rgba(255, 0, 0, .5); padding:1em; border-radius:.5em; color:#fff; text-align:center; height:100%;}

.layout{background-color:#f9f9f9; margin:1em;}
.title{grid-area:title;}
.stats{grid-area:stats;}
.score{grid-area:score;}
.board{grid-area:board; height:50vh;}
.ctrls{grid-area:ctrls;}

@media (orientation:landscape){
  .layout{
    display:grid;
    grid-template-columns:auto minmax(min-content, 1fr);
    grid-template-rows:auto minmax(min-content, 1fr) auto;
    grid-template-areas:"title board" "stats board" "score ctls";
  }
.title{gird-column:1; grid-row:1;}
.stats{grid-column:1; grid-row:2;}
.score{grid-column:1; grid-row:3;}
.board{grid-column:2; grid-row:1 / span 2;}
.ctrls{grid-column:2; grid-row:3 / span 2;}
}

@media (orientation:portrait){
  .layout{
    display:grid;
    grid-template-columns: auto minmax(min-content, 1fr);
    grid-template-rows: auto auto minmax(min-content, 1fr) auto;
    grid-template-areas:"title stats" "score stats" "board board" "ctrls ctrls";
  }
}