CodePen Embed - Gallery grid 2 across

<!--

Forum question answer only:

https://www.sitepoint.com/community/t/content-creeps-across-screen/477525/5

-->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

<div class="scrapbook">
  <h2 class="page-heading">The Hutchins Clan</h2>
  <h3 class="page-subheading">Phyllis' Scrapbook</h3>
  <div class="scrapbook-frame">
    <div class="scrapbook-left">
      <img class="scrapbook-left" src="https://picsum.photos/id/1016/500/300" alt="page 1" class="scrapbook-left">
    </div>
    <div class="scrapbook-right">
      <img src="https://picsum.photos/id/1018/500/200" alt="page 1" class="scrapbook-right">
    </div>
  </div> <!--    END of .scrapbook-frame   -->
  <p class="scrapbook-page-number">Pages 1-2</p>
</div>
<!--    END of scrapbook  -->

.scrapbook {
  background-color: rgb(234, 217, 201);
  max-width: 1000px;
  margin: 1rem auto 2rem;
  padding: 1rem 2rem;
  border: 3px solid #999;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  font-family: birthstone;
}
h2.page-heading,
h3.page-subheading {
  margin: 0.5rem 0;
  text-align: center;
  font-family: birthstone;
  font-size: 50px;
  line-height: 1;
}
h3.page-subheading {
  margin: 0 0 1rem;
  font-size: 30px;
}
.scrapbook-frame {
  display: grid;
  gap: 1rem;
  border: 2px solid #000;
  grid-template-columns: 1fr 1fr;
  page-break-after: always;
}

.scrapbook-left,
.scrapbook-right {
  grid-column: 1;
  padding: 0.5rem 0 0.5rem 0.5rem;
  box-sizing: border-box;
}
.scrapbook-right {
  grid-column: 2;
  padding: 0.5rem 0.5rem 0.5rem 0;
}
.scrapbook-left img,
.scrapbook-right img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scrapbook-page-number {
  text-align: right;
  font-size: 17px;
  margin: 0.5rem 0;
}

@media screen and (max-width: 600px) {
  .scrapbook-frame {
    display: block;
  }
  .scrapbook-left,
  .scrapbook-right {
    grid-column: 1;
    padding: 0.5rem;
  }
  .scrapbook-left img,
  .scrapbook-right img {
    border: 1px solid #999;
  }
  h2.page-heading {
    font-size: 34px;
  }
  h3.page-subheading {
    font-size: 24px;
  }
}

Run Pen

This Pen is owned by Paul O'Brien on CodePen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.