Jednostka fr w siatkach CSS

Wymiary rzędów i kolumn w siatce można ustawiać nie tylko w px, ale również w jednostkach elastyczności fr (fraction - ułamek). Użycie tych jednostek oznacza, że cała dostępna przestrzeń do rozmieszczenia elementów zostanie podzielona na równe części lub ułamki. Każdy element będzie mógł zająć określoną część tego podziału. Spójrzmy, jak to się robi.

Za pomocą właściwości grid-template-columns sprawmy, aby pierwsza i druga kolumna siatki zajęły jedną część kontenera, a trzecia kolumna - trzy części:

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

Załóżmy, że twoja siatka ma dwie kolumny. Spraw, aby miały one taką samą szerokość.

Załóżmy, że twoja siatka ma trzy kolumny. Spraw, aby miały one taką samą szerokość.

Załóżmy, że twoja siatka ma trzy kolumny. Spraw, aby trzecia kolumna była dwa razy szersza od pierwszej i drugiej.