<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 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 class="panel panel-4"></div>
    <div class="panel panel-5"></div>
    <div class="panel panel-6"></div>
    <div class="panel panel-7">
    <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>
/* 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;

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.