grid-layout

by asuma igarashi

HTML

<div id="wrapper">
    <div id="top" class="red"></div>
    <div id="mid_left" class="blue"></div>
    <div id="mid_right" class="green"></div>
    <div id="bottom_left" class="inner"></div>
    <div id="bottom_center" class="inner"></div>
    <div id="bottom_right" class="inner"></div>
</div>

CSS

#wrapper {
  display: grid;
  grid: "top top top" 30px
        "mid_left midright midright" 300px
        "bottom_left bottom_center bottom_right" 70px
        / 50px 120px 30px;
  width: 200px;
  height: 400px;
  background: #fff;
}