Die fr-Einheit in CSS-Grids

Die Größen von Zeilen und Spalten im Grid können nicht nur in px angegeben werden, sondern auch in Flexibilitätseinheiten fr (Fraktion). Die Verwendung dieser Einheiten bedeutet, dass der gesamte verfügbare Platz für die Anordnung der Elemente in gleiche Anteile oder Fraktionen aufgeteilt wird. Jedes Element kann einen bestimmten Teil dieser Aufteilung einnehmen. Schauen wir uns an, wie das gemacht wird.

Lassen Sie uns mit der Eigenschaft grid-template-columns erreichen, dass die erste und zweite Spalte des Grids 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>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;
}

Angenommen, Ihr Grid hat zwei Spalten. Sorgen Sie dafür, dass sie die gleiche Breite haben.

Angenommen, Ihr Grid hat drei Spalten. Sorgen Sie dafür, dass sie die gleiche Breite haben.

Angenommen, Ihr Grid hat drei Spalten. Sorgen Sie dafür, dass die dritte Spalte doppelt so groß ist wie die erste und die zweite.