Veturia grid-template

Veturia grid-template përcakton numrin dhe gjerësinë e rreshtave dhe kolonave, të cilat do të zërë një element në grid ose rrjetë dhe është një formë e shkurtuar e veturave grid-template-rows dhe grid-template-columns. Rreshtat dhe kolonat, në të cilat do të vendosen elementet tregohen përmes së pjerrës. Veturia grid-template përcaktohet në elementin-prind dhe përcakton vendosjen e elementeve-fëmijë. Në vlerën e veturisë tregojmë gjerësinë e rreshtave ose kolonave në çdo njësi për përmasa.

Gjatë përcaktimit të vlerave në veturi në piksel përmasat e elementeve do të korrespondojnë saktësisht me to. Nëse përdorim fjalën auto, atëherë kolonat dhe rreshtat do të mbushin të gjithë hapësirën e disponueshme. Përdorimi i njësisë fr (fraksion) do të thotë, që e gjithë hapësira do të ndahet në pjesë të barabarta. Përparësia e fr është adaptimi i tij ndaj kontejnerëve ose rezolucioneve të ndryshme të ekranit, pasi fr thjesht i ndan ato në numrin e treguar të fraksioneve pa lidhje me përmasën e saktë në piksel.

Sintaksa

selektor {
	grid-template: gjerësia dhe numri i rreshtave / gjerësia dhe numri i kolonave;
}

Shembull

Le të bëjmë një tabelë duke përdorur veturinë grid-template:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Tani le t'u caktojmë rreshtave të dytë dhe të tretë gjerësi të njëjtë, dhe secilës kolonë - gjerësi të ndryshme:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Tani në tabelën nga shembulli i mëparshëm le ta bëjmë rreshtin e sipërm me gjerësi dy fraksione, dhe kolonën e parë - në gjysmë fraksioni:

<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>9</div>
</div>

#parent {
	display: grid;
	grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shihni gjithashtu

veturia grid,
e cila përcakton formën e shkurtuar të veturave të kolonave dhe rreshtave
veturia grid-template-rows,
e cila përcakton numrin dhe gjerësinë e rreshtave në grid
veturia grid-template-columns,
e cila përcakton numrin dhe gjerësinë e kolonave në grid