<div class="container">
<div class="main">
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="card">Card</div>
</div>
<div class="filter">
Filter
</div>
</div>
body {
background: #F2F2F2;
padding: 1rem;
}
.container {
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 1rem;
}
.main {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.card {
background: #fff;
padding: 1rem;
}
.filter {
background: #fff;
padding: 1rem;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.