<div class="boards-container">
    <div class="boards-container__board">
      <h1>Board One</h1>
      
      <div class="boards-container__board__card">Card #1</div>
      <div class="boards-container__board__card">Card #2</div>
      <div class="boards-container__board__card">Card #3</div>
      <div class="boards-container__board__card">Card #4</div>
    </div>
    <div class="boards-container__board">
      <h1>Board Two</h1>
      
      <div class="boards-container__board__card">Card #1</div>
      <div class="boards-container__board__card">Card #3</div>
      <div class="boards-container__board__card">Card #4</div>
    </div>
    <div class="boards-container__board">
      <h1>Board Three</h1>
      
      <div class="boards-container__board__card">Card #1</div>
    </div>
     <div class="boards-container__board">
      <h1>Board Four</h1>
      
      <div class="boards-container__board__card">Card #1</div>
      <div class="boards-container__board__card">Card #2</div>
      <div class="boards-container__board__card">Card #3</div>
    </div>
  </div>
.boards-container {
  display: grid;
  grid-auto-columns: 272px;
  grid-auto-flow: column;
  grid-gap: 8px;
  height: 100vh;
  overflow: auto;
}

.boards-container__board {
    background: #EBECF0;
    border-radius: 3px;
    display: grid;
    grid-auto-rows: max-content;
    grid-gap: 10px;
    padding: 10px;
}

.boards-container__board h1 {
    font-size: 16px;
    margin: 0 0 12px 0;
}

.boards-container__board__card {
    background: #FFF;
    box-shadow: 0 1px 0 rgba(9,30,66,.25);
    border-radius: 3px;
    padding: 10px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.