CSSグリッドにおけるauto-fitの値

次に、auto-fitという値について見てみましょう。 この値も、repeat関数と共に使用して同じサイズの列を指定する際に適用されます。 auto-fill値との違いは、auto-fitが利用可能なコンテナの幅に合わせて列の数を調整し、 列を拡張または縮小することにあります。

例

8つの要素を持つコンテナの例で、auto-fit値の動作を見てみましょう。 前のレッスンで学んだminmax関数をauto-fit値と一緒に適用します：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

例

次に、グリッドコンテナの幅を400pxに減らしてみましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

実践的な課題