Egenskapen grid-auto-columns

Egenskapen grid-auto-columns anger antalet och bredden på kolumnerna som ett element kommer att uppta i ett implicit rutnät. Implicit rutnät - ett rutnät som skapas automatiskt när element hamnar utanför ramarna för det redan definierade rutnätet. I egenskapens värde anger vi kolumnbredder i valfria enheter för storlekar. Egenskapen anges i förälderelementet och bestämmer kolumnbredden för barnelementen.

Syntax

selektor {
	grid-auto-columns: kolumnbredd;
}

Exempel

Låt oss ange kolumnbredden för våra element i det implicita rutnätet:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 40px 40px;
	grid-auto-columns: 200px;
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Se även

egenskapen grid-auto-rows,
som anger antalet och bredden på rader i ett implicit rutnät
egenskapen grid-template-columns,
som anger antalet och bredden på kolumner i ett rutnät