Grid-template-rows häsiýeti
grid-template-rows häsiýeti
grid ýa-da tor içindäki element tutjak
hatarlaryň sany we inini kesgitleýär.
Häsiýetiň bahasynda hatarlaryň inini
ölçeg birliklerinde
görkezýäris.
Häsiýet ata elementde görkezilýär we
ogul elementleriň hatarlarynyň inini kesgitleýär.
Häsiýetlerde piksel bahalary görkezilende
hatarlaryň ölçegleri takyk şol baha gabat gelýär.
auto sözüni görkezsek, hatarlar
elýeterli giňişligiň hemmesini doldurar.
fr (fraksiýa) birligini ulanylmagy
hemme giňişligiň deň böleklere bölünjekdigini aňladýar.
fr birliginiň artýan tarapy onuň dürli
kontainerlere ýa-da ekran çözümliligine laýyk gelmegi,
sebäbi fr diýen pikseldäki takyk ölçege baglylyk
etmän, ýöne elýeterli giňişligi görkezilen sança
fraksiýa bölýär.
Sintaksis
selektor {
grid-template-rows: hataryň ini;
}
Mysal
Grid-deki elementleriň hatarlary üçin ini bereliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Birinsi we üçünji hatara pikselde takyk ini bereliň, ikkinji hatar bolsa elýeterli giňişligi awtomatik doldursyn:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Indi bolsa grid-template-rows häsiýeti
bilen birinji we ikinji hatarlaryň kontaineriň bir bölegini,
üçünji hataryň bolsa üç bölegini tutmagyny edeliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
fr birliklerinde görkezilen bahalar
kesir görnüşinde bolup bilýär. Öňki mysaly
üýtgedip, ikinji we üçünji hatarlar üçin ini
kesir sanlarda görkezeliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Geliň grid-template-rows häsiýetinde
repeat() funksiýasyny ulanyp,
kontainere üç hataryň hem deň ini bolmalydygyny habar bereliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Indi öňki mysaly üýtgedip, üç sany deň hatara dördünji hatary goşup, onyň kontaineriň iki fraksiýasyny tutmagyny edeliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Ilkinji iki hataryň ini kontaineriň bir fraksiýasy, soňky iki hataryň ini bolsa iki fraksiýa edeliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Indi bolsa hatarlaryň inini repeat() funksiýasy
we serbest fr birlikleriniň kombinasiýasy bilen kesgitleýäli:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
repeat() funksiýasynda auto-fill bahasyny
ulanyp, kontaineriň hatarlaryny gerek inde deň hatarlar bilen
dolduryp bileris:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
auto-fill bilen bir hatarda minmax funksiýasyny
ulanyp, hatarlaryň ini üçin iň az we iň köp bahalaryň aralygyny
kesgitlemek aýratyn amatlydyr. Kontaineriň ini hemme hatarlary
sygdyrýan bolmasa, käbir hatarlar täze hatara geçer,
hatardaky hatarlar bolsa ol hatarda deň ýaýradylar. Öňki mysaly
üýtgedip, minmax funksiýasyny görkezeliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Indi auto-fit häsiýetini görkezeliň,
onuň auto-fill bilen tapawudy şonda,
ol hatarlaryň sanyny kontaineriň elýeterli ini boýunça
ýaýratmak bilen kiçeldýär ýa-da ulyldýar:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
fr bilen bir hatarda % bahalaryny hem ulanyp
bolýar, olar hem hataryň kontaineriň näçe göterimini tutjakdygyny
kesgitleýär. Bu ýagdaýda ilki bilen %-da hataryň ölçegi
hasaplanar, galan boş giňişlik bolsa fraksiýalara bölünýär:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Geliň grid-template-columns we
grid-template-rows häsiýetlerini bilelikde ulanyň:
<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;
}
:
Mysal
Geliň grid-template-columns we
grid-template-rows häsiýetleri bilen
dokuz ýaçkadan ybarat tablisa döredeliň,
üç hatarda ýerleşýän. Şeýle hem ikinji we üçünji hatarlar deň inli bolsun,
her sütün bolsa dürli inli bolsun:
<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;
}
:
Mysal
Indi öňki mysaldaky tablisanyň ýokarky hataryny iki fraksiýa ini, birinji sütüni bolsa ýarym fraksiýa ini edeliň:
<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;
}
:
Şeýle-de göz aňyňyza salyň
-
grid-template-columnshäsiýeti,
grid-deki sütünleriň sany we inini kesgitleýär -
grid-auto-rowshäsiýeti,
görkezilmedik grid-däki hatarlaryň sany we inini kesgitleýär
