Die betekenis van auto in CSS-roosters

In 'n rooster kan die waarde auto gebruik word wanneer groottes vir rye en kolomme gespesifiseer word. In hierdie geval sal die blokke eenvoudig al die beskikbare vrye spasie vul, minus die breedte wat in pixels gespesifiseer is. Kom ons kyk na voorbeelde.

Kom ons spesifiseer 'n vaste breedte in pixels vir die eerste en derde kolom, en laat die tweede kolom outomaties die oorblywende spasie neem:

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

Plaas die kindelemente in twee kolomme: die eerste met 'n breedte van 200px, en laat die tweede die oorblywende spasie neem.

Plaas die kindelemente in drie kolomme: die eerste met 'n breedte van 100px, die tweede 150px, en laat die derde die oorblywende spasie neem.