Број и ширина колона у CSS мрежама

Упознавање са радом у мрежи почећемо тако што ћемо доделити број и ширину колона, по којима ће се размештати подређени елементи. За ту сврху користимо својство grid-template-columns, које се наводи у елементу-родитељу и задаје број и ширину колона, које ће заузимати елементи-потомци у мрежи. У вредности својства наводимо ширину колона у пикселима.

Пример

Хајде да прво креирамо родитељски елемент и да га направимо мрежним контејнером. Нека имамо div, у којем се налази четири подређена елемента. Дефинишимо за њега у својству display вредност grid, а у својству grid-template-columns упишимо ширину за две колоне:

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

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Пример

Сада хајде да креирамо табелу са четири различите по величини колоне:

<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: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Практични задаци

Нека имате див са девет подређених елемената. Направите родитељски елемент мрежним контејнером.

Поставите подређене елементе у две колоне ширине 200px.

Поставите подређене елементе у три колоне ширине 150px.

Поставите подређене елементе у три колоне: прва ширине 100px, друга 150px, а трећа 200px.