Unit fr dalam CSS Grid

Ukuran baris dan kolom dalam grid dapat diatur tidak hanya dalam px, tetapi juga dalam unit fleksibilitas fr (fraksi). Penggunaan unit ini berarti bahwa semua ruang untuk menempatkan elemen akan dibagi menjadi bagian yang sama atau fraksi. Setiap elemen dapat mengambil bagian tertentu dari pembagian ini. Mari kita lihat, bagaimana hal ini dilakukan.

Mari kita gunakan properti grid-template-columns untuk membuat kolom pertama dan kedua grid mengambil satu bagian container, dan kolom ketiga - tiga bagian:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Misalkan dalam grid Anda ada dua kolom. Buatlah agar mereka memiliki lebar yang sama.

Misalkan dalam grid Anda ada tiga kolom. Buatlah agar mereka memiliki lebar yang sama.

Misalkan dalam grid Anda ada tiga kolom. Buatlah agar kolom ketiga dua kali lebih besar dari kolom pertama dan kedua.