KE_grid-table

by sthag

HTML

<div class="table">
  <div class="head">
    <div class="row">
      <div class="cell">Kopf</div>
      <div class="cell">Kopf</div>
      <div class="cell">Kopf</div>
    </div>
  </div>
  <div class="body">
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell cell-span-2">Große Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle mit mehr Inhalt</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell cell-span-3">Riesige Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
    <div class="row">
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
      <div class="cell">Zelle</div>
    </div>
  </div>
  <div class="foot">Fuß</div>
</div>

SCSS

$max-cells-in-row: 3;

@mixin cell-span($number) {
  .cell-span-#{$number} {
    grid-column: span #{$number};
  }
}

@for $i from 1 through $max-cells-in-row {
  @include cell-span(#{$i});
}

html,
body {
  margin: 0;
  height: 100%;
}

.table {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  background-color: antiquewhite;

  & > * {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(3, 1fr); // Mit auto funktioniert es nicht mehr :/
  }
}

.row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
}

.cell {
  padding-inline: 4px;
  background-color:rgba(255, 255, 255, .5);
}

.head {
  position: sticky;
  top: 0;
  left: 0;
  align-self: start;
  background-color: crimson;

    .cell {
    padding-block: 16px;
  }
}

.body {
  background-color: black;

  .cell {
    padding-block: 48px;
  }
}

.foot {
  padding: 16px 4px;
  background-color: yellowgreen;
}