CSS Gridlarda auto qiymati

Gridda qator va ustun o‘lchamlarini ko‘rsatishda auto qiymatidan foydalanish mumkin. Bunday holda, bloklar ular uchun mavjud bo‘lgan barcha bo‘sh joyni, piksellarda ko‘rsatilgan kenglikdan tashqarida, to‘ldiradi. Keling, misollar orqali ko‘rib chiqaylik.

Keling, birinchi va uchinchi ustunlarga piksellarda belgilangan kenglikni ko‘rsataylik, ikkinchi ustun esa qolgan joyni avtomatik ravishda egallasin:

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

Farzand elementlarni ikkita ustunga joylashtiring: birinchisi 200px kenglikda, ikkinchisi esa qolgan joyni egallasin.

Farzand elementlarni uchta ustunga joylashtiring: birinchisi 100px kenglikda, ikkinchisi 150px, uchinchisi esa qolgan joyni egallasin.