Savybė grid-template-columns

Savybė grid-template-columns nustato stulpelių, kuriuos elementas užims garde arba tinklelyje, kiekį ir plotį. Savybė nurodoma tėvinio elemento lygmenyje ir apibrėžia vaikinių elementų stulpelių plotį. Savybės reikšmėje nurodome stulpelių plotį bet kokiame dydžio vienetų formate.

Nurodant savybėse reikšmes pikseliais, stulpelių dydžiai tiksliai atitiks juos. Jei mes nurodome žodį auto, stulpeliai užpildys visą prieinamą erdvę. Vieneto fr (frakcija) naudojimas reiškia, kad visa erdvė bus padalinta į vienodas dalis. Privalumas fr yra jo prisitaikymas prie skirtingų konteinerių ar ekrano raiškos, nes fr tiesiog padalina ją į nurodytą frakcijų skaičių nesusiejant su tiksliais pikselių dydžiais.

Sintaksė

selektorius {
	grid-template-columns: stulpelio plotis;
}

Pavyzdys

Apibrėžkime stulpelių plotį mūsų elementams garde:

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

Pavyzdys

Pirmajam ir trečiajam stulpeliams priskirkime fiksuotą plotį pikseliais, o antrasis stulpelis tegu automatiškai užpildo prieinamą erdvę:

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

Pavyzdys

Dabar naudodami savybę grid-template-columns padarykime, kad pirmasis ir antrasis stulpeliai užimtų vieną konteinerio dalį, o trečiasis stulpelis - tris dalis:

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

Pavyzdys

Reikšmės, nurodytos fr vienetais, gali būti trupmeninės. Pakeiskime prieš tai buvusį pavyzdį, nurodydami antrajam ir trečiajam stulpeliams plotį trupmeniniais skaičiais:

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

Pavyzdys

Savybėje grid-template-columns nurodykime funkciją repeat(), kuri praneš konteineriui, kad visi trys stulpeliai turi turėti vienodą plotį:

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

Pavyzdys

Dabar pakeiskime ankstesnį pavyzdį taip, kad prie trijų vienodų stulpelių pridėtume ketvirtą, kuris užims dvi konteinerio frakcijas:

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

Pavyzdys

Pirmiesiems dviems stulpeliams priskirkime vienos frakcijos plotį, o paskutiniesiems dviems stulpeliams - dvi frakcijas:

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

Pavyzdys

Dabar nustatykime stulpelių plotį sujungdami reikšmes, nurodytas naudojant funkciją repeat() ir laisvus fr vienetus:

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

Pavyzdys

Taip pat funkcijoje repeat() galima nurodyti reikšmę auto-fill, kuri užpildys mūsų konteinerį vienodais mums reikalingo pločio stulpeliais:

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

Pavyzdys

Labai patogu kartu su auto-fill nurodyti funkciją minmax, kuri nustato stulpelių pločio diapazoną nuo minimalios iki maksimalios reikšmės. Jei konteinerio plotis netelpa visiems stulpeliams, kai kurie iš jų persikels į naują eilutę, o eilutės stulpeliai tolygiai paskirstomi joje. Pakeiskime ankstesnį pavyzdį, jame nurodydami funkciją minmax. Kad pamatytumėte skirtingus stulpelių išdėstymo variantus, keiskite savo naršyklės puslapio plotį:

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

Pavyzdys

Dabar nurodykime savybę auto-fit, kurios skirtumas nuo auto-fill yra tas, kad ji pritaiko stulpelių skaičių prie prieinamo konteinerio pločio, išplečiant arba suspaudžiant juos:

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

Pavyzdys

Taip pat kartu su fr galima naudoti reikšmes %, kurios taip pat apibrėžia kurią konteinerio dalį užims stulpelis. Šiuo atveju pirmiausia bus apskaičiuojamas stulpelio dydis %, o likusi laisva erdvė bus padalinta į frakcijas:

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

Pavyzdys

Naudokime kartu savybes grid-template-columns ir 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;
}

Pavyzdys

Naudodami savybes grid-template-columns ir grid-template-rows sukurkime lentelę iš devynių langelių, išdėstytų trimis eilėmis. Be to, antroji ir trečioji eilės turės vienodą plotį, o kiekvienas stulpelis - skirtingą plotį:

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

Pavyzdys

Dabar lentelėje iš ankstesnio pavyzdžio padarykime viršutinę eilę dviejų frakcijų pločio, o pirmąjį stulpelį - pusės frakcijos:

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

Taip pat žiūrėkite

savybė grid-template-rows,
kuri nustato eilių kiekį ir plotį garde
savybė grid-auto-columns,
kuri nustato stulpelių kiekį ir plotį neišklaidžiamame garde