Die fr-Einheit

Die flexible Einheit fr bezeichnet einen Anteil oder einen Bruchteil der gesamten Größe des Raums, in dem sich das Element befindet. Der Vorteil der Verwendung von fr ist seine Anpassungsfähigkeit an verschiedene Container oder Bildschirmauflösungen, da fr einfach den gesamten Raum in die angegebene Anzahl von Bruchteilen (Teilen) aufteilt, ohne diese an einen exakten Pixelwert zu binden.

Beispiel

Lassen Sie uns mithilfe der Eigenschaft grid-template-columns erste und zweite Grid-Spalte so gestalten, dass sie jeweils einen Teil des Containers einnehmen, und die dritte Spalte - drei Teile:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Beispiel

Werte, die in der Einheit fr angegeben sind, können auch gebrochene Zahlen sein. Lassen Sie uns das vorherige Beispiel ändern, indem wir für die Breite der zweiten und dritten Spalte Dezimalzahlen angeben:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Siehe auch

die Einheit px,
die die Größe in Pixeln angibt
die Einheit em,
die die Größe in em angibt
die Einheit rem,
die die Größe in rem angibt
die Einheit %,
die die Größe in Prozent angibt
die Einheit vw,
die die Größe in vw angibt
die Einheit vh,
die die Größe in vh angibt
die Einheit vmax,
die die Größe in vmax angibt
die Einheit vmin,
die die Größe in vmin angibt