グリッドパネル（CSSのみ）

簡単な等分割のグリッドパネルです。ほかにいい方法あるよなあとは思いましたが、とりあえず。

<style>
.post {
  border: 1px solid #83B9A0;
  height: 4.5em;
  padding-top: 3.5em;
  text-align: center;
}
.clumn4,
.clumn3,
.clumn2 {
  background: rgb(228, 244, 245);
  clear: both;
  margin: 0 0 1em;
  overflow: hidden;
  padding: 0.66%;
}
.clumn4 section,
.clumn3 section,
.clumn2 section {
  background: rgb(173, 222, 220);
  float: left;
  margin: 0.66%;
  width: 48.68%;
}
.clumn2 section {
  width: 48.68%;
}
.clumn3 section {
  width: 32%;
}
.clumn4 section {
  width: 23.68%;
}
</style>

See the Pen xGYxmv by nwst-code (@nwst) on CodePen.