<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.