Grid dengan Lebar Blok Automatik dalam CSS

Dalam pelajaran sebelumnya, dalam grid kami, ternyata lebar elemen dan jaraknya secara keseluruhan harus memberikan lebar elemen induk. Ini agak tidak universal. Mari kita buat supaya elemen menyesuaikan diri secara automatik mengikut lebar induk.

Katakan kita mempunyai induk seperti ini:

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

Katakan elemen grid ini disusun 4 blok sebaris:

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

Mari tetapkan lebar blok kami supaya setiap satunya menduduki suku daripada induk. Untuk ini, tetapkan saiznya kepada 25%:

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

Tetapkan lebar blok dalam peratus supaya grid mempunyai tiga blok sebaris.

Tetapkan lebar blok dalam peratus supaya grid mempunyai dua blok sebaris.

Tetapkan lebar blok dalam peratus supaya grid mempunyai satu blok sebaris.