<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 class="article">7</div>
  <div class="article--featured">8</div>
  <div class="article">9</div>
  <div class="article--featured">10</div>
  <div class="article">11</div>
  <div class="article">12</div>
  <div class="article">13</div>
  <div class="article">14</div>
  <div class="article">15</div>
</div>

body {
  align-items: center;
  background: #cecece;
  padding: 2em;
}

.articles {
  display: grid;
  grid-auto-flow: dense;
  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;
  min-height: 100px;
  justify-content: center;
}

.article--featured {
  grid-column: 2 / span 2;
}