横幅の最大値をmax-widthではなくminmaxで設定してみる

CSSで横幅の最大値を指定するときはmax-widthを使うことが多いですが、CSSグリッドレイアウトのminmaxを使って横幅の最大値を指定することもできます。

max-widthを使って横幅の最大値を指定

サンプルとなるHTML

<header class="header">
  <div class="container">
    <h1>WAKABA MARCH</h1>
  </div>
</header>

まずはヘッダーの中身をmax-widthを使って最大値を指定してみます。

.header {
  background-color: gray;
  text-align: center;
}

.container {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background-color: green;
  box-sizing: border-box;
}

.header h1 {
  margin: 0;
  color: white;
}
ヘッダーの中身の横幅を600pxに指定したサンプルの画像
サンプル画像

minmaxを使って横幅の最大値を指定

つづいてヘッダーの中身をminmaxを使って最大値を指定してみます(装飾に関しては省いてあります)。
またこれだけだとIE11では表示できないので、別途古い規格の設定を記述する必要があります。

.header {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 600px) 1fr;
}

.container {
  grid-column-start: 2;
}

minmaxを用いることで横幅の最小値を「auto」、最大値を「600px」に指定しています。
これでmax-widthのときと同じような設定を行うことができます。コードや状況にあわせて、うまく使い分けることができるといいですね。