De waarde auto in CSS grids

In grid kan bij het opgeven van de afmetingen van rijen en kolommen de waarde auto worden gebruikt. In dat geval zullen de blokken eenvoudigweg alle beschikbare vrije ruimte opvullen, minus de breedte die is opgegeven in pixels. Laten we naar voorbeelden kijken.

Laten we voor de eerste en derde kolom een vaste breedte in pixels instellen, en de tweede kolom laat automatisch de overgebleven ruimte innemen:

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

Plaats de child-elementen in twee kolommen: de eerste met een breedte van 200px, en de tweede laat de overgebleven ruimte innemen.

Plaats de child-elementen in drie kolommen: de eerste met een breedte van 100px, de tweede 150px, en de derde laat de overgebleven ruimte innemen.