fr jedinica u CSS gridovima

Veličine redova i kolona u gridu mogu se postaviti ne samo u px, već i u jedinicama fleksibilnosti fr (frakcija). Korišćenje ovih jedinica znači da će ceo prostor za pozicioniranje elemenata biti podeljen na jednake delove ili frakcije. Svaki element će moći da zauzme određeni deo ove podele. Hajde da pogledamo kako se to radi.

Hajde da pomoću svojstva grid-template-columns postavimo da prva i druga kolona grida zauzmu jedan deo kontejnera, a treća kolona - tri dela:

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

Neka vaš grid ima dve kolone. Postavite tako da imaju istu širinu.

Neka vaš grid ima tri kolone. Postavite tako da imaju istu širinu.

Neka vaš grid ima tri kolone. Postavite tako da treća kolona bude dva puta veća od prve i druge.