cafe hak

by phloe

HTML

<div class="container">
  <div class="container__content">
    <div class="grid">
      <div class="header">
        <h1>Breaking</h1>
      </div>
      <div class="block"></div>
      <div class="block block--small"></div>
      <div class="block"></div>
      <div class="bg"></div>
    </div>
  </div>
</div>

<div class="container">
  <div class="container__content">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

CSS

.container {
  position: relative;
}

.container__content {
  max-width: 800px;
  margin: 0 auto 40px;
}

.grid {
  display: grid;
  grid-gap: 40px;
  grid-template: "a" / 1fr;
}

.grid > :nth-child(1) {
  grid-area: a;
}

.grid > :nth-child(5) {
  grid-area: 1 / 1 / 3 / 4;
}

@media (min-width: 400px) {
  .grid {
    grid-template: "b b a" "b b c" "b b d" / 1fr 1fr 1fr;
  }

  .grid > :nth-child(2) {
    grid-area: b;
  }

  .grid > :nth-child(3) {
    grid-area: c;
  }

  .grid > :nth-child(4) {
    grid-area: d;
  }
}

.block {
  background-color: red;
  opacity: 0.2;
  min-height: 100px;
}

.block--small {
  min-height: 50px;
}

.bg {
  position: absolute;
  left: 0;
  right: 0;
  /*
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  */
  min-height: 50px;
  background-color: #333;
  z-index: -1;
}

.header {
  position: sticky;
  top: 0;
  color: #FFF;
  background-color: #333;
  padding: 10px;
}

.container > .block + .block {
  margin-top: 40px;
}