CSS Grid

by Daniel Beff

HTML

<main>
  <div class="header">
    Header
    <p>Complex layout</p>
    <p>Description</p>
  </div>
  <div class="gallery">Gallery</div>
  <div class="details">
    Details
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
  </div>
  <div class="sellers">Sellers
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo rerum alias illum praesentium maxime sed nisi ex vero velit laudantium iste accusantium nulla fugit quam rem in nemo, est veritatis!
    </p>
  </div>
</main>

SCSS

$grid-gutter: 20px;
$border-color: #ced6d9;
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
main {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  grid-auto-rows: auto;
  font-family: $font-family;
  font-size: 30px;
  -webkit-font-smoothing: antialiased;
}

div {
  background: blue;
  text-align: center;
  color: white;
  padding: 40px;
  transition: all 1s;
  background: #1a7982;
  border-radius: 3px;
}

p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}

.header {
  background: #d50444;
}

.gallery {
  background: #464558;
}

.sellers {
  background: #a5197f;
}

@media screen and (min-width: 600px) {
  main {
    grid-template-columns: 300px repeat(1, 1fr) 300px;
    grid-auto-rows: auto 1fr;
  }
  .gallery {
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 3;
    z-index: 1;
  }
  .header {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    z-index: 1;
  }
  .sellers {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    z-index: 1;
  }
}