auto-ის მნიშვნელობა CSS გრიდებში

გრიდში, რიგების და სვეტების ზომების მითითებისას შეგიძლიათ გამოიყენოთ მნიშვნელობა 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, ხოლო მესამე დაეცეს დარჩენილ ადგილს.