【CSS】ある要素の幅や高さを画面の余っている部分全体に伸ばす方法

　時折、画面の余っている部分いっぱいに要素を広げたいという要望があります。そういった時の解決方法は様々ありますが、なるべく設定が壊れにくい方がいいです。グリッドデザインならばこれを実現できます。

　これは次のコードで実装できます。

<div class="box">
  <div>ほげ</div>
  <div class="tgt">伸ばす対象</div>
  <div>ふが</div>
</div>

.box {
  /* グリッドレイアウトを指定 */
  display: grid;
  /* 伸ばしたくない要素には fit-content で伸ばさない要素に合うサイズを指定 */
  /* 伸ばしたい要素には 1fr で空いているスペースの割合を使うと指定。一つだけなので占有することになる */
  grid-template-rows: fit-content(100%) 1fr fit-content(100%);

  /* ここから下はデモの見栄え用のコード */
  gap: 8px;
  height: 10em;
  width: fit-content;
  width: -moz-fit-content;
  background: #aaaaff88;
  padding: 0.25em;
}

.box div {
  background: #faa;
}

　デモが次です。

　グリッドレイアウトの fr は利用可能な空間をどれだけ占有するかの割合を指定する単位です。伸ばさない要素を fit-content で指定し占有空間と関係ない要素とし、伸ばす要素のみを fr で指定することによって利用可能な空間を完全に占有させています。

グリッドレイアウトの基本概念 – CSS： カスケーディングスタイルシート ｜ MDN#単位 fr

　画像や地図など、できる限り大きく表示したい要素がある時に便利な方法です。