<div class="articles">
<div class="article">1</div>
<div class="article">2</div>
<div class="article">3</div>
<div class="article--featured">4</div>
<div class="article">5</div>
<div class="article">6</div>
</div>
body {
align-items: center;
background: #cecece;
padding: 2em;
}
.articles {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
margin: 0 auto;
max-width: 1200px;
}
.article,
.article--featured {
align-items: center;
background: #fff;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
display: flex;
justify-content: center;
}
.article--featured {
grid-column: 2 / span 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.