<section class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</section> 
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 2px;
  background: wheat;
}

section div {
  background: teal;
  height: 100vh;
  display: flex;
  font-size: 40px;
  color: white;
  font-family: Courier New;
  justify-content: center;
  align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.