პიქსელები და fr ერთეულები CSS გრიდებში

სვეტების სიგანის დაყენება შესაძლებელია ერთდროულად პიქსელებში და fr-ში:

<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: 100px 1fr 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

დავუშვათ, თქვენს გრიდში სამი სვეტია. გახადეთ ისე, რომ პირველი სვეტი დაიკავოს 100px, ხოლო დანარჩენი ორი სვეტი იყოს ერთნაირი ზომის.

დავუშვათ, თქვენს გრიდში ოთხი სვეტია. გახადეთ ისე, რომ პირველი და ბოლო სვეტები დაიკავონ 100px, ხოლო დანარჩენმა სვეტებმა გაინაწილონ დარჩენილი ადგილი ისე, რომ მესამე სვეტი იყოს მეორეზე 1.5-ჯერ დიდი.