Njësia fr në CSS Grid

Përmasat e rreshtave dhe kolonave në grid mund të përcaktohen jo vetëm në px, por edhe në njësitë e fleksibilitetit fr (fraksion). Përdorimi i këtyre njësive nënkupton që e gjithë hapësira për vendosjen e elementeve do të ndahet në pjesë të barabarta ose fraksione. Çdo element do të jetë në gjendje të marrë një pjesë të caktuar të kësaj ndarjeje. Le të shohim si bëhet kjo.

Le të përdorim vetinë grid-template-columns për të bërë që kolona e parë dhe e dytë e grid-it të zënë një pjesë të kontejnerit, ndërsa kolona e tretë - tre pjesë:

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

Le të themi që grid-i juaj ka dy kolona. Bëni që ato të kenë të njëjtën gjerësi.

Le të themi që grid-i juaj ka tre kolona. Bëni që ato të kenë të njëjtën gjerësi.

Le të themi që grid-i juaj ka tre kolona. Bëni që kolona e tretë të jetë dy herë më e madhe se e para dhe e dyta.