Veturia grid-template-columns

Veturia grid-template-columns përcakton numrin dhe gjerësinë e kolonave që do të zërë një element në grid ose rrjetë. Veturia specifikohet në elementin-prind dhe përcakton gjerësinë e kolonave të elementëve-të pasardhës. Në vlerën e veturisë specifikojmë gjerësinë e kolonave në çdo njësi për madhësi.

Gjatë specifikimit të vlerave në vetri në piksel madhsitë e kolonave do të korrespondojnë saktësisht me to. Nëse përdorim fjalën auto, atëherë kolonat do të mbushin të gjithë hapësirën e disponueshme. Përdorimi i njësisë fr (fraksion) nënkupton, që e gjithë hapësira do të ndahet në pjesë të barabarta. Përparësia e fr është adaptiviteti i tij ndaj kontejnerëve të ndryshëm ose rezolucioneve të ekranit, pasi fr thjesht i ndan ato në numrin e specifikuar të fraksioneve pa lidhje me madhësinë e saktë në piksel.

Sintaksa

përzgjedhës {
	grid-template-columns: gjerësia e kolonës;
}

Shembull

Le të përcaktojmë gjerësinë e kolonave për elementët tanë në grid:

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

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

Shembull

Le t'i japim kolonës së parë dhe të tretë gjerësi fikse në piksel, dhe kolona e dytë le të mbushë automatikisht hapësirën e disponueshme:

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

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

Shembull

Tani me ndihmën e veturisë grid-template-columns të bëjmë që kolona e parë dhe e dytë të zënë një pjesë të kontejnerit, dhe kolona e tretë - tre pjesë:

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

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

Shembull

Vlerat, të specifikuara në njësi fr mund të marrin formë thyesore. Le të ndryshojmë shembullin e mëparshëm, duke specifikuar për kolonën e dytë dhe të tretë gjerësi në numra thyesorë:

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

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

Shembull

Le të specifikojmë në veturinë grid-template-columns funksionin repeat(), që i tregon kontejnerit se të gjitha tre kolonat duhet të kenë gjerësi të njëjtë:

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

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Tani le të ndryshojmë shembullin e mëparshëm në mënyrë që tre kolonave të njëjta t'u shtohet një e katërta, e cila do të zërë dy fraksione të kontejnerit:

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

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Le t'u japim dy kolonave të para gjerësi një fraksion të kontejnerit, dhe dy kolonave të fundit - dy fraksione:

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

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Tani le të vendosim gjerësinë e kolonave duke kombinuar vlerat, të specifikuara me ndihmën e funksionit repeat() dhe njësive të lira fr:

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

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Gjithashtu në funksionin repeat() mund të specifikohet vlera auto-fill, e cila do të mbushë kontejnerin tonë me kolona të njëjta me gjerësinë e nevojshme për ne:

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

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Është shumë i përshtatshëm së bashku me auto-fill të specifikohet funksioni minmax, i cili vendos intervalin e gjerësisë së kolonave nga vlera minimale deri te vlera maksimale. Nëse gjerësia e kontejnerit nuk i përshtat të gjitha kolonat, atëherë disa prej tyre do të zhvendosen në një rresht të ri, me kusht që kolonat në rresht të shpërndahen në mënyrë të barabartë në të. Le të ndryshojmë shembullin e mëparshëm, duke specifikuar në të funksionin minmax. Që të shihni variante të ndryshme të vendosjes së kolonave ndryshoni gjerësinë e faqes së shfletuesit tuaj:

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

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Tani le të specifikojmë veturinë auto-fit, ndryshimi i së cilës nga auto-fill qëndron në atë, që ajo përshtat numrin e kolonave sipas gjerësisë së disponueshme të kontejnerit, duke i zgjeruar ose duke i ngushtuar ato:

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

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Gjithashtu krahas fr mund të përdoren vlera në %, të cilat gjithashtu përcaktojnë se cilën pjesë të kontejnerit do të zërë kolona. Në këtë rast së pari do të llogaritet madhësia e kolonës në %, dhe hapësira e lirë e mbetur do të ndahet në fraksione:

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

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Le të përdorim së bashku veturitë grid-template-columns dhe grid-template-rows:

<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-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Le të krijojmë me ndihmën e veturive grid-template-columns dhe grid-template-rows një tabelë me nëntë qeliza, të vendosura në tre rreshta. Ku rreshti i dytë dhe i tretë do të kenë gjerësi të njëjtë, dhe çdo 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-rows: 60px 1fr 60px;
	grid-template-columns: 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Shembull

Tani në tabelën nga shembulli i mëparshëm të bëjmë që rreshti i sipërm të ketë gjerësi dy fraksione, dhe kolona e parë - 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-rows: 2fr 1fr 1fr;
	grid-template-columns: 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-rows,
e cila përcakton numrin dhe gjerësinë e rreshtave në grid
veturia grid-auto-columns,
e cila përcakton numrin dhe gjerësinë e kolonave në grid implicit