<div class="support-grid"></div>

<section class="grid-1">

  <div class="panel panel-title">
    <h1>Barry’s Cushion</h2>
    <p>A tale of lethargy and soft furnishings</p>
  </div>
    <div class="panel panel-1"></div>
    <div class="panel panel-2"></div>
    <div class="panel panel-3">
      <p>“I should probably get up–things to do.”</p>
    </div>
    <div class="panel panel-4"></div>
    <div class="panel panel-5"></div>
    <div class="panel panel-6"></div>
    <div class="panel panel-7">
      <p>“Naaah.”</p>
    </div>
    <div class="panel panel-8"></div>
    <div class="panel panel-9"></div>
    <div class="panel panel-copyright">
      <p>Sleepy Fat Cat by messenj4h<br>&copy; Copyright happily ever after <a href="https://webdesign.tutsplus.com/tutorials/css-grid-layout-and-comics-as-explained-by-barry-the-cat--cms-27617">Envato Tuts+</a>
    </div>
</section>
/* basics */
body {
  background: #f8f7f2;
  padding: 0 10%;
  font: 100%/1.5 'Kalam', cursive;
}

h1 {
  margin: 0;
  line-height: 1;
  padding: 10px;
  color: #251b19;
}

p {
  margin: 0;
  padding: 10px;
  color: #251b19;
  font-size: 1.2em;
}

a {
  color: #e56633;
}

a:hover {
  text-decoration: none;
}

/* the grid */
.grid-1 {
  display: grid;
  width: 100%;
  max-width: 770px;
  margin: 10% auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto;
  grid-gap: 25px;
}

/* panels */
.panel {
  color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0px 0px 5px #251b19;
}

/* individual panels */
.panel-title {
  box-shadow: none;
}
.panel-1 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-002.svg);
  box-shadow: none;
}
.panel-2 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-001.svg);
}
.panel-3 {
  box-shadow: none;
}
.panel-4 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-003.svg);
}
.panel-5 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-004.svg);
}
.panel-6 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-005.svg);
}
.panel-7 {
  box-shadow: none;
}
.panel-8 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-007.svg);
}
.panel-9 {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cat-008.svg);
  box-shadow: none;
}
.panel-copyright {
  box-shadow: none;
  font-size: .75em;
}

/* media query 1 */
@media only screen and (min-width: 400px) {
  
  .grid-1 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 200px auto 200px 200px auto 200px auto;
  }  
  .panel-title,
  .panel-3,
  .panel-6,
  .panel-7,
  .panel-copyright {
    grid-column: span 2;
  }
  .panel-copyright {
    text-align: right;
  }
  .panel-7 {
    text-align: center;
  }
  h1 {
    font-size: 3em;
  }
  
}

/* media query 2 */
@media only screen and (min-width: 600px) {
  
  .grid-1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 200px 200px 200px auto;
  }
  .panel-title,
  .panel-copyright {
    grid-column: span 3;
  }
  .panel-3,
  .panel-6 {
    grid-column: auto;
  }
  .panel-8 {
    grid-column: span 2;
  }
  h1 {
    font-size: 3.5em;
  }
  p {
    font-size: 1.3em;
  }
  
  /* flexbox centering */
  .panel-3 {  
    display: flex;
    align-items: center;
  }
  
  /* layering */
  .panel-7 {
    grid-column: 1;
    grid-row: 4;
    z-index: 1;
    margin: -5px 0 0 -10px;
    transform: rotate(-2deg);
  }
  
  .panel-7 p {
    background: #f8f7f2;
    box-shadow: 0 0px 0px 5px #251b19;
    text-align: left;
  }
  
  .panel-8 {
    grid-column: 1 / span 2;
    grid-row: 4;
    background-size: 70%;
    background-position: right;
  }
  
}
Run Pen

External CSS

  1. https://codepen.io/tutsplus/pen/ZpvWBO.css

External JavaScript

This Pen doesn't use any external JavaScript resources.