Proprietatea grid-auto-columns

Proprietatea grid-auto-columns definește numărul și lățimea coloanelor pe care le va ocupa un element în gridul implicit. Gridul implicit - un grid care este creat automat atunci când elementele ies în afara limitelor gridului deja definit. În valoarea proprietății specificăm lățimea coloanelor în orice unitate de măsură pentru dimensiuni. Proprietatea este specificată în elementul-părinte și determină lățimea coloanelor elementelor-copil.

Sintaxă

selector {
	grid-auto-columns: lățimea coloanei;
}

Exemplu

Să definim lățimea coloanelor pentru elementele noastre în gridul implicit:

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

Vedeți și

proprietatea grid-auto-rows,
care definește numărul și lățimea rândurilor în gridul implicit
proprietatea grid-template-columns,
care definește numărul și lățimea coloanelor în grid