Css grid experimental v1

by Julien Roche

HTML

<body>
  <div class="grid">
    <div class="grid__item grid__item--span-h-2 grid__item--span-v-2">a</div>
    <div class="grid__item grid__item--span-h-2 grid__item--span-v-3">b</div>
    <div class="grid__item grid__item--span-v-2">c</div>
    <div class="grid__item grid__item--span-v-2">d</div>
    <div class="grid__item grid__item--span-v-2">e</div>
    <div class="grid__item grid__item--span-v-4">f</div>
    <div class="grid__item grid__item--span-h-2 grid__item--span-v-3">g</div>
    <div class="grid__item grid__item--span-v-2">h</div>
  </div>
</body>

CSS

html, body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  background-color: yellow;
  display: flex;
  flex-direction: column;
}

.grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(7, 1fr);
  height: 100%;
  margin: 1em 1em 1em 1em;
}

.grid__item {
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

.grid__item--span-h-2 {
  grid-column: span 2;
}

.grid__item--span-v-2 {
  grid-row: span 2;
}

.grid__item--span-v-3 {
  grid-row: span 3;
}

.grid__item--span-v-4 {
  grid-row: span 4;
}

JavaScript

// See https://julesforrest.com/css-grid-experiments/