Die Bedeutung von auto in CSS Grids

In Grid kann bei der Angabe der Größen von Zeilen und Spalten der Wert auto verwendet werden. In diesem Fall füllen die Blöcke einfach den gesamten ihnen verfügbaren freien Raum abzüglich der Breite, die in Pixeln angegeben ist. Schauen wir uns das an Beispielen an.

Lassen Sie uns der ersten und dritten Spalte eine feste Breite in Pixeln zuweisen, und die zweite Spalte soll automatisch den verbleibenden Platz einnehmen:

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

Platzieren Sie die Kindelemente in zwei Spalten: die erste mit einer Breite von 200px, und die zweite soll den verbleibenden Platz einnehmen.

Platzieren Sie die Kindelemente in drei Spalten: die erste mit einer Breite von 100px, die zweite mit 150px, und die dritte soll den verbleibenden Platz einnehmen.