Unitatea fr în Grid-urile CSS

Dimensiunile rândurilor și coloanelor în grid pot fi setate nu doar în px, ci și în unități de flexibilitate fr (fracție). Utilizarea acestor unități înseamnă că întregul spațiu pentru plasarea elementelor va fi împărțit în părți egale sau fracții. Fiecare element va putea să ocupe o anumită parte din această împărțire. Să vedem cum se face acest lucru.

Să folosim proprietatea grid-template-columns pentru a face ca prima și a doua coloană a grid-ului să ocupe o parte a containerului, iar a treia coloană - trei părți:

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

Să presupunem că grid-ul dvs. are două coloane. Faceți în așa fel încât acestea să aibă aceeași lățime.

Să presupunem că grid-ul dvs. are trei coloane. Faceți în așa fel încât acestea să aibă aceeași lățime.

Să presupunem că grid-ul dvs. are trei coloane. Faceți în așa fel încât a treia coloană să fie de două ori mai mare decât prima și a doua.