Grid

by bean_baggy

HTML

<div class="flex">
  <div class="case">
    <p>Links, Downloads, Map, Last modified</p>
    <div class="wrapper">
      <div class="cell downloads">Cell 1</div>
      <div class="cell links">Cell 2</div>
      <div class="cell map">Cell 3<br>Cell 3.1<br>Cell 3.2<br>Cell 3.3</div>
      <div class="cell last-modified">Cell 4</div>
    </div>
  </div>
  <div class="case">
    <p>Downloads, Map, Last modified</p>
    <div class="wrapper">
      <div class="cell downloads">Cell 1</div>
      <div class="cell map">Cell 3<br>Cell 3.1<br>Cell 3.2<br>Cell 3.3</div>
      <div class="cell last-modified">Cell 4</div>
    </div>
  </div>
  <div class="case">
    <p>Links, Map, Last modified</p>
    <div class="wrapper">
      <div class="cell links">Cell 2</div>
      <div class="cell map">Cell 3<br>Cell 3.1<br>Cell 3.2<br>Cell 3.3</div>
      <div class="cell last-modified">Cell 4</div>
    </div>
  </div>
  <div class="case">
    <p>Map, Last modified</p>
    <div class="wrapper">
      <div class="cell map">Cell 3<br>Cell 3.1<br>Cell 3.2<br>Cell 3.3</div>
      <div class="cell last-modified">Cell 4</div>
    </div>
  </div>
  <div class="case">
    <p>Links, Downloads, Last modified<br>Nicht relevant</p>
    <div class="wrapper">
      <div class="cell downloads">Cell 1</div>
      <div class="cell links">Cell 2</div>
      <div class="cell last-modified">Cell 4</div>
    </div>
  </div>
</div>

SCSS

// Relevanter Code
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cell+.map {
  grid-column: 2;
}


.map {
  grid-column: 1;
  grid-row: 1 / span 3;
}


.last-modified {
  grid-column: span 2;
}

// Nicht relevanter Code
.wrapper {
  border: 1px solid black;
  width: 200px;
  margin-right: 10px;
}

.cell {
  border: 1px solid red;
}

.flex {
  display: flex;
}

p {
  font-size: .7rem;
  font-family: Arial;
}