CSS Grid-те auto мәні

Grid-те жолдар мен бағандар өлшемдерін көрсету кезінде auto мәнін қолдануға болады. Бұл жағдайда, блоктар оларға бөлінген барлық бос кеңістікті пиксельмен көрсетілген енді шегеріп, жай ғана толтырады. Мысалдар арқылы қарастырайық.

Бірінші және үшінші бағандарға пиксельдегі бекітілген енді көрсетіп, ал екінші баған қалған орынды автоматты түрде алатын болсын:

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

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Бала элементтерді екі бағанға орналастырыңыз: біріншісінің ені 200px, ал екіншісі қалған орынды алады.

Бала элементтерді үш бағанға орналастырыңыз: біріншісінің ені 100px, екіншісі 150px, ал үшіншісі қалған орынды алады.