<div class="grid-container">
  <div class="grid-item navbar">
    <h2>CSS Grid Gallery</h2>
    <div class="links">
      <a href="#">Read the tutorial</a>
    </div>
  </div>
  <div class="pictures">
    <img src="https://picsum.photos/300/300?random=1">
    <img src="https://picsum.photos/300/300?random=2">
    <img src="https://picsum.photos/300/300?random=3">
    <img src="https://picsum.photos/300/300?random=4">
    <img src="https://picsum.photos/300/300?random=5">
    <img src="https://picsum.photos/300/300?random=6">
    <img src="https://picsum.photos/300/300?random=7">
    <img src="https://picsum.photos/300/300?random=8">
    <img src="https://picsum.photos/300/300?random=9">
    <img src="https://picsum.photos/300/300?random=10">
    <img src="https://picsum.photos/300/300?random=11">
    <img src="https://picsum.photos/300/300?random=12">
    <img src="https://picsum.photos/300/300?random=13">
    <img src="https://picsum.photos/300/300?random=14">
    <img src="https://picsum.photos/300/300?random=15">
    <img src="https://picsum.photos/300/300?random=16">
    <img src="https://picsum.photos/300/300?random=17">
    <img src="https://picsum.photos/300/300?random=18">
    <img src="https://picsum.photos/300/300?random=19">
    <img src="https://picsum.photos/300/300?random=20">
  </div>
  <div class="grid-item footer">
    <a href="#">Read the CSS Grid tutorial</a>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}

a {
  color: white;
  margin-left: 10px;
}

.grid-container {
  display: grid;
  height: 100vh;
  
  /* Explicit Grid definition */
  grid-template-columns: 100vw;
  grid-template-rows: 70px 1fr 40px;
  
  /* Implicit Grid Behavior */
  grid-auto-flow: column;
}

.pictures {
  padding: 2%;
  display: grid;
  column-gap: 10px;
  row-gap: 10px;
  overflow: scroll;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 2%;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item {
  color: #fff;
  background-color: #212226;
}

@media (min-width: 576px) {
  .pictures {
    grid-template-columns: repeat(3, 1fr);
  }
}