Numri dhe Gjerësia e Kolonave në CSS Grid

Njohjen me punën në grid do ta fillojmë duke caktuar numrin dhe gjerësinë e kolonave, përgjatë të cilave do të vendosen elementet fëmijë. Për këtë qëllim do të përdorim vetinë grid-template-columns, e cila specifikohet në elementin prind dhe përcakton numrin dhe gjerësinë e kolonave, të cilat do të zënë elementet fëmijë në grid. Në vlerën e vetisë specifikojmë gjerësinë e kolonave në piksel.

Shembull

Le të krijojmë fillimisht elementin prind dhe ta bëjmë atë kontejner grid. Le të supozojmë se kemi një div, brenda të cilit ndodhet katër elementë fëmijë. Le t'i caktojmë atij në vetinë display vlerën grid, dhe në vetinë grid-template-columns të shkruajmë gjerësinë për dy kolona:

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

Shembull

Tani le të krijojmë një tabelë me katër kolona të ndryshme në madhësi:

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

Detyra Praktike

Le të supozojmë se keni një div me nëntë elementë fëmijë. Bëni elementin prind të jetë një kontejner grid.

Vendosni elementet fëmijë në dy kolona me gjerësi 200px.

Vendosni elementet fëmijë në tre kolona me gjerësi 150px.

Vendosni elementet fëmijë në tre kolona: e para me gjerësi 100px, e dyta 150px, dhe e treta 200px.