details and grid

by Simon Hi

HTML

<main class="container">
  <details>
    <summary class="L1C1">AA</summary>
    <p class="L2C1">Contenu AA</p>
  </details>
  <details>
    <summary class="L1C2">BB</summary>
    <p class="L2C2">Contenu BB</p>
  </details>
  <details>
    <summary class="L3C1">CC</summary>
    <p class="L4C1">Contenu CC</p>
  </details>
</main>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto 1fr auto;
}
.container > * {
  display: contents;
}
.container > * > * {
  border: 0.25em solid #000;
  color: #fff;
  margin: 0.25em;
}
.L1C1 {
  grid-row: 1;
  grid-column: 1;
  background: #900;
}
.L1C2 {
  grid-row: 1;
  grid-column: 2;
  background: #090;
}
.L2C1 {
  grid-row: 2;
  grid-column: 1;
  background: #600;
}
.L2C2 {
  grid-row: 2;
  grid-column: 2;
  background: #060;
}
.L3C1 {
  grid-row: 3;
  grid-column: 1;
  background: #009;
}
.L4C1 {
  grid-row: 4;
  grid-column: 1;
  background: #006;
}