Kuptimi i vlerës auto në CSS Grid

Në grid, kur përcaktohen madhësitë e rreshtave dhe kolonave, mund të përdoret vlera auto. Në këtë rast, bllokat thjesht do të mbushin të gjithë hapësirën e lirë në dispozicion për to, minus gjerësinë që është përcaktuar në piksel. Le të shohim me shembuj.

Le t'i caktojmë kolonës së parë dhe të tretë nga kolonat një gjerësi fikse në piksel, dhe kolona e dytë le të marrë automatikisht hapësirën e mbetur:

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

Vendosni elementet e fëmijë në dy kolona: e para me gjerësi 200px, dhe e dyta le të marrë hapësirën e mbetur.

Vendosni elementet e fëmijë në tre kolona: e para me gjerësi 100px, e dyta 150px, dhe e treta le të marrë hapësirën e mbetur.