Numărul și lățimea coloanelor în grid-urile CSS

Vom începe familiarizarea cu lucrul în grid stabilind numărul și lățimea coloanelor, de-a lungul cărora vor fi poziționate elementele copil. În acest scop vom folosi proprietatea grid-template-columns, care este specificată în elementul părinte și definește numărul și lățimea coloanelor pe care le vor ocupa elementele descendente în grid. În valoarea proprietății specificăm lățimea coloanelor în pixeli.

Exemplu

Mai întâi, să creăm elementul părinte și să îl facem un container grid. Să presupunem că avem un div, în care sunt situate patru elemente copil. Să setăm pentru acesta în proprietatea display valoarea grid, iar în proprietatea grid-template-columns să scriem lățimea pentru două coloane:

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

Exemplu

Acum, să creăm un grid cu patru coloane de dimensiuni diferite:

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

Sarcini practice

Să presupunem că aveți un div cu nouă elemente copil. Faceți elementul părinte un container grid.

Poziționați elementele copil în două coloane cu lățimea de 200px.

Poziționați elementele copil în trei coloane cu lățimea de 150px.

Poziționați elementele copil în trei coloane: prima cu lățimea de 100px, a doua 150px, iar a treia 200px.