CSSでの自動幅ブロックを使用したグリッドレイアウト

前回のレッスンでは、グリッドレイアウトにおいて要素の幅とマージンの合計が親要素の幅と正確に一致する必要がありました。これは少し柔軟性に欠けます。要素が親要素の幅に自動的に適応するようにしてみましょう。

次のような親要素があるとします：

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

このグリッドの要素が1行に4つのブロックで並ぶようにします：

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

各ブロックが親要素の4分の1を占めるように幅を設定しましょう。そのために、サイズを25%に設定します：

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}