Valoarea auto în grid-urile CSS

Într-un grid, atunci când specificați dimensiunile rândurilor și coloanelor, puteți utiliza valoarea auto. În acest caz, elementele pur și simplu vor umple tot spațiul liber disponibil pentru ele minus lățimea care este specificată în pixeli. Să ne uităm la exemple.

Să setăm pentru prima și a treia coloană o lățime fixă în pixeli, iar a doua coloană să ocupe automat spațiul rămas:

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

Plasați elementele copil în două coloane: prima cu lățimea de 200px, iar a doua să ocupe spațiul rămas.

Plasați elementele copil în trei coloane: prima cu lățimea de 100px, a doua 150px, iar a treia să ocupe spațiul rămas.