Unit fr dalam Grid CSS

Saiz baris dan lajur dalam grid boleh ditetapkan bukan hanya dalam px, tetapi juga dalam unit fleksibiliti fr (pecahan). Penggunaan unit ini bermaksud, kesemua ruang untuk meletakkan elemen akan dibahagikan kepada bahagian yang sama atau pecahan. Setiap elemen boleh mengambil bahagian tertentu daripada pembahagian ini. Mari kita lihat, bagaimana ia dilakukan.

Mari kita menggunakan sifat grid-template-columns untuk menjadikan lajur pertama dan kedua grid mengambil satu bahagian penampung, dan lajur ketiga - tiga bahagian:

<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;
}

Katakan dalam grid anda terdapat dua lajur. Jadikan ia mempunyai lebar yang sama.

Katakan dalam grid anda terdapat tiga lajur. Jadikan ia mempunyai lebar yang sama.

Katakan dalam grid anda terdapat tiga lajur. Jadikan lajur ketiga dua kali lebih besar daripada lajur pertama dan kedua.