fr vienetas CSS griduose

Grido eilučių ir stulpelių matmenis galima nustatyti ne tik px, bet ir lankstumo vienetais fr (frakcija). Šių vienetų naudojimas reiškia, kad visa elemento talpinimo erdvė bus padalinta į vienodas dalis ar frakcijas. Kiekvienas elementas galės paimti tam tikrą šio padalijimo dalį. Pažiūrėkime, kaip tai daroma.

Naudodami savybę grid-template-columns padarykime, kad pirmasis ir antrasis grido stulpeliai užimtų vieną konteinerio dalį, o trečiasis stulpelis - tris dalis:

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

Tarkime, jūsų gride yra du stulpeliai. Padarykite, kad jie būtų vienodo pločio.

Tarkime, jūsų gride yra trys stulpeliai. Padarykite, kad jie būtų vienodo pločio.

Tarkime, jūsų gride yra trys stulpeliai. Padarykite, kad trečiasis stulpelis būtų du kartus platesnis už pirmąjį ir antrąjį.