CSS gridlerde repeat funksiýasy
Eger birnäçe sütüňiz bar bolsa
we olara deň ölçegler berilýän bolsa,
onda ýazuwy ýönekeýleşdirmek üçin
repeat funksiýasyny ulanyp bilersiňiz.
Bu funksiýanyň birinji parametrinde
sütünleriň sany görkezilýär, ikinjisinde bolsa
olaryň ini. Geliň mysallar üsti bilen
munuň nähili işleýändigine seredeliň.
Mysal
Bizde üç sany deň ölçegli sütün bar diýeliň:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
repeat arkaly ýazuwy ýönekeýleşdireliň:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Mysal
Bizde üç sany deň ölçegli sütün we dördünji sütün başga ölçegli bar diýeliň:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
repeat arkaly ýazuwy ýönekeýleşdireliň:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Mysal
Birindki üç sütün bir ölçegli, ikinjiki üç sütün bolsa başga ölçegli bar diýeliň:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
repeat arkaly ýazuwy ýönekeýleşdireliň:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Mysal
Birindki üç sütün bir ölçegli, soňra ýene bir sütün, soňra bolsa ýene üç sütün başga ölçegli bar diýeliň:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
repeat arkaly ýazuwy ýönekeýleşdireliň:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Mysal
Ýönekeýleşdirmek islendik ölçeg birligi üçin işleýär. Mysal üçin bizde üç piksel sütün bar diýeliň:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
repeat arkaly ýazuwy ýönekeýleşdireliň:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Amaly meseleler
repeat kömegi bilen 4 sany
deň ölçegli sütün ýasadyň.
4 sany 100px ölçegli sütün we
ýene 3 sany 2fr ölçegli sütün ýasadyň.
2 sany 100px ölçegli sütün,
ýene 3 sany 200px ölçegli sütün,
soňra 1fr ölçegli bir sütün,
we soňra 2 sany
10% ölçegli sütün ýasadyň.
