Jednotka fr v CSS gridů

Velikosti řádků a sloupců v gridu lze nastavovat nejen v px, ale i v jednotkách flexibility fr (fraction). Použití těchto jednotek znamená, že veškerý prostor pro umístění prvků bude rozdělen na stejné díly nebo frakce. Každý prvek bude moci zaujmout určitou část tohoto rozdělení. Podívejme se, jak se to dělá.

Pomocí vlastnosti grid-template-columns uděláme to, aby první a druhý sloupec gridu zaujal jednu část kontejneru, a třetí sloupec - tři části:

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

Nechť ve vašem gridu jsou dva sloupce. Zařiďte, aby měly stejnou šířku.

Nechť ve vašem gridu jsou tři sloupce. Zařiďte, aby měly stejnou šířku.

Nechť ve vašem gridu jsou tři sloupce. Zařiďte, aby třetí sloupec byl dvakrát větší než první a druhý.