grid

语法:

grid：

取值:

说明:

兼容性:

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Edge	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	11*	16+	52+	57+	10.1+	44+	10.3+	62+	62+

示例:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>grid 布局示例</title>
<meta name="author" content="xiaohan, css.deepjs.cn" />
<style>
.kit-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 1px;
  background: #ccc;
}

.kit-grid-item {
  /* border: 1px solid #ccc; */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.block {
  display: block;
  margin: 20px;
  width: 400px;
  height: 400px;
  border: 2px solid #ccc;
}

.kit-grid-number {
  display: grid;

grid-template-areas:
    "a a a ac"
    "a a a ac"
    "a a a del"
    "a0 a0 dot del";
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}
/* .kit-grid-number .kit-grid-item { grid-area: a } */
.kit-grid-number .a0 { grid-area: a0 }
.kit-grid-number .ac { grid-area: ac }
.kit-grid-number .dot { grid-area: dot }
.kit-grid-number .del { grid-area: del }

.kit-grid-tpl {
  display: grid;
  grid-template-areas:
    "a7 a8 a9 ac"
    "a4 a5 a6 ac"
    "a1 a2 a3 del"
    "a0 a0 dot del";
  grid-template-columns: auto;
  grid-template-rows: auto;
}
.kit-grid-tpl.calculator {
  display: grid;
  grid-template-areas:
    "ac del percentage division"
    "a7 a8 a9 multiplication"
    "a4 a5 a6 subtraction"
    "a1 a2 a3 addition"
    "a0 a0 dot equal";
  grid-template-columns: auto;
  grid-template-rows: auto;
}
.kit-grid-tpl .a0 { grid-area: a0 }
.kit-grid-tpl .a1 { grid-area: a1 }
.kit-grid-tpl .a2 { grid-area: a2 }
.kit-grid-tpl .a3 { grid-area: a3 }
.kit-grid-tpl .a4 { grid-area: a4 }
.kit-grid-tpl .a5 { grid-area: a5 }
.kit-grid-tpl .a6 { grid-area: a6 }
.kit-grid-tpl .a7 { grid-area: a7 }
.kit-grid-tpl .a8 { grid-area: a8 }
.kit-grid-tpl .a9 { grid-area: a9 }
.kit-grid-tpl .ac { grid-area: ac }
.kit-grid-tpl .dot { grid-area: dot }
.kit-grid-tpl .del { grid-area: del }
.kit-grid-tpl .addition { grid-area: addition }
.kit-grid-tpl .subtraction { grid-area: subtraction }
.kit-grid-tpl .multiplication { grid-area: multiplication }
.kit-grid-tpl .division { grid-area: division }
.kit-grid-tpl .percentage { grid-area: percentage }
.kit-grid-tpl .reverse { grid-area: reverse }
.kit-grid-tpl .equal { grid-area: equal }
</style>
</head>
<body>
  <a href="https://www.w3.org/TR/css3-grid-layout/">https://www.w3.org/TR/css3-grid-layout/</a>
  <div class="block">
    <div class="kit-grid kit-grid-number">
      <div class="kit-grid-item">7</div>
      <div class="kit-grid-item">8</div>
      <div class="kit-grid-item">9</div>
      <div class="kit-grid-item">4</div>
      <div class="kit-grid-item">5</div>
      <div class="kit-grid-item">6</div>
      <div class="kit-grid-item">1</div>
      <div class="kit-grid-item">2</div>
      <div class="kit-grid-item">3</div>
      <div class="kit-grid-item a0">0</div>
      <div class="kit-grid-item dot">.</div>
      <div class="kit-grid-item del">Del</div>
      <div class="kit-grid-item ac">AC</div>
    </div>
  </div>

更灵活的方式

计算器面板
  <div class="block">
    <div class="kit-grid kit-grid-tpl calculator">
      <div class="kit-grid-item a9">9</div>
      <div class="kit-grid-item a7">7</div>
      <div class="kit-grid-item a8">8</div>
      <div class="kit-grid-item a6">6</div>
      <div class="kit-grid-item a5">5</div>
      <div class="kit-grid-item a4">4</div>
      <div class="kit-grid-item a3">3</div>
      <div class="kit-grid-item a2">2</div>
      <div class="kit-grid-item a1">1</div>
      <div class="kit-grid-item a0">0</div>
      <div class="kit-grid-item dot">.</div>
      <div class="kit-grid-item del">Del</div>
      <div class="kit-grid-item ac">AC</div>
      <div class="kit-grid-item addition">+</div>
      <div class="kit-grid-item subtraction">-</div>
      <div class="kit-grid-item multiplication">x</div>
      <div class="kit-grid-item division">/</div>
      <div class="kit-grid-item percentage">%</div>
      <div class="kit-grid-item equal">=</div>
      
    </div>
  </div>

</body>
</html>