Grid-template-columns häsiýeti
grid-template-columns häsiýeti
grid ýa-da tor içindäki element tutjak
sütünleriň sanyny we giňligini kesgitleýär.
Häsiýet ata elementde görkezilýär we
soňky elementleriň sütün giňligini kesgitleýär.
Häsiýetiň bahasynda sütünleriň giňligini
istilýän ölçeg birliklerinde görkezýäris.
Häsiýetlerde pikselde görkezilen bahalar
berlen sütün ölçeglerine takyk laýyk gelýär.
auto sözünü görkezsek, sütünler
elýeterli giňligiň hemmesini doldurar.
fr (fraksiýa) birliginiň ulanylmagy,
hemme giňligiň deň böleklerine bölünjekdigini aňladýar.
fr birliginiň artykmaçlygy onuň dürli
kontainerlere ýa-da ekran çözgütlerine uýgun gelmegidir,
sebäbi fr olary pikselde takyk ölçeg baglanyşygy bolmazdan
görkezilen fraksiýa sanyna bölýär.
Sintaksis
selektor {
grid-template-columns: sütün giňligi;
}
Mysal
Griddäki elementleriňiz üçin sütün giňligini kesgitleýäris:
<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;
}
:
Mysal
Birinji we üçünji sütünlere pikselde belgilenen giňlik görkezeliň, ikinji sütün bolsa elýeterli giňligi awtomatik doldursyn:
<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;
}
:
Mysal
Indi bolsa grid-template-columns
häsiýetiniň kömegi bilen birinji we ikinji
sütünleriň kontaineriň bir bölegini, üçünji
sütüniň bolsa üç bölegini eýelemegini edeliň:
<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;
}
:
Mysal
fr birliklerinde görkezilen bahalar
ýarym kesir görnüşinde bolup biler.
Öňki mysaly üýtgedip, ikinji we üçünji
sütün üçin giňligi ýarym kesir sanlarda görkezeliň:
<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;
}
:
Mysal
grid-template-columns häsiýetinde
repeat() funksiýasyny görkezeliň,
bu kontainere üç sütüniň hemmeşelik giňlikde
bolmalydygyny habar berer:
<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;
}
:
Mysal
Indi öňki mysaly üýtgedeliň, şeýlelik bilen üç deň sütüne dördünji sütün goşulsyn we ol kontaineriň iki fraksiýasyny eýelesin:
<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;
}
:
Mysal
Birinji iki sütüne kontaineriň bir fraksiýa giňligini, soňky iki sütüne bolsa iki fraksiýa giňligini bereliň:
<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;
}
:
Mysal
Indi bolsa sütünleriň giňligini
repeat() funksiýasy we boş birlikler
fr bilen birikdirip görkezeliň:
<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;
}
:
Mysal
Şeýle hem repeat() funksiýasynda
auto-fill bahasyny görkezip bolar, bu
bizim kontainerimizi islenen giňlikde deň sütünler bilen doldurar:
<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;
}
:
Mysal
auto-fill bilen minmax
funksiýasyny görkezmek örän amatly,
bu sütünleriň giňlik aralygyny
iň pesden iň ýokary baha çenli kesgitleýär.
Eger kontaineriň giňligi hemme
sütünleri sygmazsa, olaryň käbiri
täze hatara geçer, şol wagty hatardaky sütünler
onda deň ýaýradylyp bolar. Öňki mysaly üýtgedeliň,
onda minmax funksiýasyny görkezeliň.
Sütünleriň ýerleşişiniň dürli görnüşlerini
görmek üçin brauzeriňiziň sahypa giňligini üýtgediň:
<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;
}
:
Mysal
Indi auto-fit häsiýetini görkezeliň,
onuň auto-fill häsiýetinden tapawudy,
sütün sanyny kontaineriň elýeterli giňligine
laýyk gelýär, olary giňeldýän ýa-da daraldýan:
<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;
}
:
Mysal
Şeýle hem fr bilen bir hatarda
% bahalaryny ulanmak bolup bilýär, olar hem sütüniň
kontaineriň haýsy bölegini eýeljekdigini kesgitleýär.
Bu ýagdaýda ilki bilen sütüniň ölçegi
% hasaplanar, galan boş giňlik bolsa
fraksiýalara bölüner:
<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;
}
:
Mysal
grid-template-columns we
grid-template-rows
häsiýetlerini bilelikde ulanýarys:
<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
grid-template-columns we
grid-template-rows
häsiýetleri bilen dokuz öýjükli tablisa döredeliň,
üç hatara ýerleşdirilen. Şeýle hem ikinji we üçünji hatarlar hemşe giňlikde bolsun,
her sütün bolsa dürli giňlikde 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 tablisada ýokarky hatary iki fraksiýa giňlikde, birinji sütüni bolsa ýarym fraksiýa giňlikde 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 hem garaşyň
-
grid-template-rowshäsiýeti,
bu griddäki hatarlaryň sanyny we giňligini kesgitleýär -
grid-auto-columnshäsiýeti,
bu aýdyň däl griddäki sütünleriň sanyny we giňligini kesgitleýär
