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

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

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

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

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

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

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

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

ブロックの幅をパーセンテージで設定し、グリッドが1行に3つのブロックになるようにしてください。

ブロックの幅をパーセンテージで設定し、グリッドが1行に2つのブロックになるようにしてください。

ブロックの幅をパーセンテージで設定し、グリッドが1行に1つのブロックになるようにしてください。