CSS gridlerinde fr birligi

Griddäki setirleriň we sütünleriň ölçeglerini diňe px-de däl, eýsem çeýtelik birliklerinde fr (frakisiýa) hem kesgitläp bolýar. Bu birlikleri ulanmak, elementleri ýerleşdirmek üçin boşluklaryň hemmäsi deň paýlara ýa-da fraksiýalara bölünerdigini aňladýar. Her element bu bölünişiň kesgitlenen bir bölegini alyp biler. Geliň, munyň nädip edilýändigine seredeliň.

Geliň, grid-template-columns häsiýetini ulanyp, gridiň birinji we ikinji sütünlerini konteýneriň bir bölegini, üçünji sütüni bolsa üç bölegini eýelesin:

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

Gridiňizde iki sütün bolsun. Olar deň ini bolýan etmegiňizi haýyş edýäris.

Gridiňizde üç sütün bolsun. Olar deň ini bolýan etmegiňizi haýyş edýäris.

Gridiňizde üç sütün bolsun. Üçünji sütüniň birinji we ikinji sütünlerden iki esse uly bolmagyny üpjün etmegiňizi haýyş edýäris.