Воҳиди fr дар CSS grid

Андозаҳои сатрҳо ва сутунҳоро дар grid на танҳо дар px метавон таъин кард, балки дар воҳидҳои фаврорнокии fr (фраксия) низ. Истифодаи ин воҳидҳо маънои онро дорад, ки ҳама фазо барои ҷойгиркунии элементҳо ба қисмҳои баробари ё фраксияҳо тақсим карда мешавад. Ҳар як элемент метавонад қисми муайяни ин тақсимотро гирад. Биёед бубинем, ки ин чӣ гуна анҷом дода мешавад.

Биёед бо ёрии хосияти grid-template-columns тавре созем, ки сутунҳои аввал ва дуюми grid як қисми контейнерро ишғол кунанд, ва сутуни сеюм - се қисм:

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

Фарз кунем, ки дар grid-и шумо ду сутун ҳаст. Тавре созед, ки онҳо паҳнои баробар дошта бошанд.

Фарз кунем, ки дар grid-и шумо се сутун ҳаст. Тавре созед, ки онҳо паҳнои баробар дошта бошанд.

Фарз кунем, ки дар grid-и шумо се сутун ҳаст. Тавре созед, ки сутуни сеюм ду баробар аз сутунҳои аввал ва дуюм калонтар бошад.