NEF layout

by phloe

HTML

<div class="layout">
  <div class="main-column">
    <div class="a" tabindex="0"></div>
    <div class="b" tabindex="0"></div>
    <div class="b" tabindex="0"></div>
    <div class="a" tabindex="0"></div>
    <div class="b" tabindex="0"></div>
  </div>
  <div class="side-column">
    <div class="sticky">
      <div class="c" tabindex="0"></div>
      <div class="c" tabindex="0"></div>
    </div>
  </div>
</div>

CSS

.layout {
  display: grid;
  grid: auto-flow 1fr;
}

.main-column, .side-column, .side-column > * {
  display: contents;
}

.side-column > * > :first-child {
  grid-row: 4;
}

.side-column > * > :last-child {
}

@media (min-width: 40rem) {
  .main-column, .side-column, .side-column > * {
    display: block;
  }
  .sticky {
    position: sticky;
    top: 0;
  }
  .layout {
    grid: auto / 2fr 1fr;
    column-gap: 1rem;
  }
}

.a, .b, .c {
  margin-bottom: 1rem;
}
.a:focus, .b:focus, .c:focus {
  outline: 2px red solid;
}

.a {
  background-color: #666;
  min-height: 400px;
}

.b {
  background-color: #999;
  min-height: 150px;
}

.c {
  background-color: pink;
  min-height: 200px;
}