CSS гридларида auto қиймати

Гридда сатр ва устунлар ўлчамларини кўрсатишда 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 энли, учинчиси эса қолган жойни эгалсин.