CSS grid-теріздіктеріндегі fr бірлігі

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-теріздігіңізде үш баған болсын. Үшінші баған бірінші және екінші бағандардан екі есе үлкен болатын етіңіз.