Својството grid-auto-columns

Својството grid-auto-columns го одредува бројот и ширината на колоните што ќе ги зафаќа елементот во имплицитната мрежа. Имплицитна мрежа - мрежа што се создава автоматски, кога елементите излегуваат надвор од рамките на веќе означената мрежа. Во вредноста на својството ја наведуваме ширината на колоните во какви било единици за димензии. Својството се наведува во елементот-родител и ја одредува ширината на колоните на елементите-потомци.

Синтакса

селектор {
	grid-auto-columns: ширина на колоната;
}

Пример

Ајде да ја зададеме ширината на колоните за нашите елементи во имплицитната мрежа:

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

Погледнете ги и

својството grid-auto-rows,
кое го одредува бројот и ширината на редовите во имплицитната мрежа
својството grid-template-columns,
кое го одредува бројот и ширината на колоните во мрежата