グリッドラッパー

<div class="grid">
  <div class="wrapper">
    <p>
      このアイテムは、最大幅が設定された列である中央の「ラッパー」に揃えられます。
    </p>
  </div>
  <div class="full-width">
    <p>このアイテムは、グリッドコンテナーの端に揃えられます。</p>
  </div>
  <div class="left-edge">
    <p>
      このアイテムは、グリッドコンテナーの左端とラッパーの右端に揃えられます。
    </p>
  </div>
  <div class="right-wrapper">
    <p>このアイテムは、「ラッパー」列の右端に揃えられます。</p>
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(
      20px,
      1fr
    );
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
}

.grid > * {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;
}

.full-width {
  grid-column: 1 / -1;
}

.wrapper {
  grid-column: 2 / -2;
}

.left-edge {
  grid-column: 1 / -2;
}

.right-wrapper {
  grid-column: 4 / -2;
}

.grid {
  max-width: 96vw; /* 幅をビューポートの幅の 96% に制限 */
  margin: 0 auto; /* コンテナーを水平方向に中央揃え */
}