Veturia grid

Veturia grid përfaqëson formën e shkurtuar të shënimit të të gjitha veturive të kolonave dhe rreshtave të kontejnerit grid. Të gjitha vlerat shënohen në një rresht të vetëm përmes së pjerrës.

Përmes grid në një rresht mund të përshkruhet vetëm një lloj veturish - eksplicite (grid-template-rows, grid-template-columns, grid-template-areas) ose implicite (grid-auto-rows, grid-auto-columns, grid-auto-flow). Ato veturi të cilat kanë mbetur të pashënuara, marrin vlerat e paracaktuara.

Sintaksa

elementi {
	grid: veturitë e rrjetit;
}

Shembull

Le të krijojmë një tabelë duke përdorur veturinë grid:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Dhe tani le t'u caktojmë rreshtave të dytë dhe të tretë gjerësi të njëjtë, dhe çdo kolone - 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: 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

Dhe tani në tabelën nga shembulli i mëparshëm le ta bëjmë rreshtin e sipërm me gjerësi në 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: 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-template,
e cila përcakton numrin dhe gjerësinë e kolonave dhe rreshtave për elementin
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
veturia grid-template-areas,
e cila përcakton vendosjen e elementeve në grid
veturia grid-auto-flow,
e cila përcakton vendosjen automatike të elementeve në rrjet