Īpašība grid-template-columns
Īpašība grid-template-columns nosaka
kolonnu skaitu un platumu, kurus
elements aizņems gridā vai režģī.
Īpašība tiek norādīta vecākelementā
un nosaka pakārtoto elementu kolonnu platumu.
Īpašības vērtībā mēs norādām kolonnu platumu
jebkuros mērvienības
izmēriem.
Norādot īpašībās vērtības pikseļos,
kolonnu izmēri precīzi atbilst tiem.
Ja mēs norādām vārdu auto, tad kolonnas
aizpildīs visu pieejamo vietu. Vienības
fr (frakcija) izmantošana nozīmē,
ka visa vieta tiks sadalīta
vienādās daļās. Priekšrocība
fr ir tā pielāgojamība
dažādiem konteineriem vai ekrāna izšķirtspējai,
jo fr vienkārši sadala tās norādītajā
frakciju skaitā bez saistības ar precīzu izmēru pikseļos.
Sintakse
selektors {
grid-template-columns: kolonnas platums;
}
Piemērs
Norādīsim kolonnu platumu mūsu elementiem 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;
}
:
Piemērs
Norādīsim pirmajai un trešajai kolonnai fiksētu platumu pikseļos, bet otrā kolonna lai automātiski aizpilda pieejamo vietu:
<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;
}
:
Piemērs
Un tagad ar īpašības
grid-template-columns
palīdzību padarīsim tā, lai pirmā un otrā
kolonna aizņemtu vienu konteinera daļu,
bet trešā kolonna - trīs daļas:
<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;
}
:
Piemērs
Vērtības, kas norādītas fr vienībās
var būt daļskaitļi. Mainīsim
iepriekšējo piemēru, norādot
otrajai un trešajai kolonnai platumu
daļskaitļos:
<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;
}
:
Piemērs
Īpašībā grid-template-columns
norādīsim funkciju repeat(),
kas pateiks konteineram, ka visām
trim kolonnām jābūt vienādam platumam:
<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;
}
:
Piemērs
Un tagad mainīsim iepriekšējo piemēru tā, lai trim vienādām kolonnām pievienotos ceturtā, kas aizņems divas konteinera 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;
}
:
Piemērs
Norādīsim pirmajām divām kolonnām platumu vienā konteinera frakcijā, bet pēdējām divām kolonnām - divās frakcijās:
<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;
}
:
Piemērs
Un tagad iestatīsim kolonnu platumu
apvienojot vērtības, kas norādītas ar
funkcijas repeat() un brīvo vienību fr palīdzību:
<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;
}
:
Piemērs
Arī funkcijā repeat() var norādīt
vērtību auto-fill, kas aizpildīs
mūsu konteineru ar vienādām kolonnām vajadzīgajā platumā:
<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;
}
:
Piemērs
Ļoti ērti kopā ar auto-fill
norādīt funkciju minmax,
kas nosaka kolonnu platuma diapazonu
no minimālās līdz maksimālajai vērtībai.
Ja konteinera platums nevar ietvert visas
kolonnas, tad dažas no tām pārvietosies
uz jaunu rindu, kamēr kolonnas rindā
vienmērīgi sadalīsies tajā. Mainīsim
iepriekšējo piemēru, norādot tajā funkciju minmax.
Lai redzētu dažādus kolonnu izvietojuma variantus
mainiet sava pārlūkprogrammas loga platumu:
<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;
}
:
Piemērs
Tagad norādīsim īpašību auto-fit,
kas atšķiras no auto-fill ar to,
ka tas pielāgo kolonnu skaitu
pieejamajam konteinera platumam, paplašinot vai
saspiežot tās:
<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;
}
:
Piemērs
Arī līdzās fr var
izmantot vērtības %, kas arī nosaka
kādu konteinera daļu aizņems kolonna.
Šajā gadījumā vispirms tiks aprēķināts
kolonnas izmērs %, bet atlikusī brīvā vieta
tiks sadalīta frakcijās:
<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;
}
:
Piemērs
Izmantosim kopā īpašības
grid-template-columns un
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;
}
:
Piemērs
Ar īpašību
grid-template-columns un
grid-template-rows
palīdzību izveidosim tabulu no deviņām šūnām, kas izvietotas
trīs rindās. Turklāt otrajai un trešajai rindai būs vienāds platums,
bet katrai kolonnai - atšķirīgs platums:
<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;
}
:
Piemērs
Un tagad tabulā no iepriekšējā piemēra padarīsim augšējo rindu divu frakciju platumā, bet pirmo kolonnu - pusei frakcijas:
<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;
}
:
Skatiet arī
-
īpašība
grid-template-rows,
kas nosaka rindu skaitu un platumu gridā -
īpašība
grid-auto-columns,
kas nosaka kolonnu skaitu un platumu netiešajā gridā
