.grid {
  display: grid; /* Включаем раскладку гридами  */
  grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
  grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
  gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
  background: #161617;
}

.tile {
  padding: 15px;
  border-radius: 15px;
  background: #000;
  color: #ffb6ff;
}

/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
  grid-column: auto / span 1;
  grid-row: auto / span 1;
}

/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
  grid-column: auto / span 1;
  grid-row: auto / span 2;
}

/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
  grid-column: auto / span 2;
  grid-row: auto / span 1;
}

/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

<div class="grid">
  <div class="tile tile-2-cols-2-rows">
    <h2>Meet Dynamic Island</h2>
  </div>
  <div class="tile tile-1-cols-1-rows">
    <h2>48MP Main camera</h2>
  </div>
  <div class="tile tile-1-cols-1-rows">
    <h2>The mastermind behind it all</h2>
  </div>
  <div class="tile tile-1-cols-1-rows">
    <p>A battery that’s all in, all day.</p>
  </div>
  <div class="tile tile-2-cols-1-rows">
    <p>Film like a Pro.</p>
  </div>
  <div class="tile tile-1-cols-2-rows">
    <p>Shaky shots, stable video</p>
  </div>
  <div class="tile tile-2-cols-2-rows">
    <h2>Always-On display</h2>
  </div>
  <div class="tile tile-2-cols-2-rows">
    <h2>Tougher than any smartphone glass</h2>
  </div>
  <div class="tile tile-1-cols-1-rows">
    <h2>Water resistance</h2>
  </div>
  <div class="tile tile-1-cols-2-rows">
    <h2>Emergency SOS via satellite</h2>
  </div>
  <div class="tile tile-2-cols-1-rows">
    <p>A camera in a class by itselfie.</p>
  </div>
</div>