Funksioni repeat në CSS Grid
Nëse keni disa kolona,
për të cilat caktohen dimensione të njëjta,
atëherë mund ta thjeshtoni shënimin duke përdorur
funksionin repeat.
Në parametrin e parë të këtij funksioni specifikohet
numri i kolonave, dhe në të dytin - gjerësia e tyre.
Le të shohim me shembuj,
si funksionon kjo.
Shembull
Le të themi se kemi tre kolona me të njëjtin madhësi:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Le ta thjeshtojmë shënimin duke përdorur repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Shembull
Le të themi se kemi tre kolona me të njëjtin madhësi, dhe e katërta me madhësi tjetër:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Le ta thjeshtojmë shënimin duke përdorur repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Shembull
Le të themi se tre kolonat e para kanë një madhësi, dhe tre kolonat e dyta kanë madhësi tjetër:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Le ta thjeshtojmë shënimin duke përdorur repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Shembull
Le të themi se tre kolonat e para kanë një madhësi, pastaj një kolonë tjetër, dhe pastaj tre kolona të tjera me madhësi tjetër:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Le ta thjeshtojmë shënimin duke përdorur repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Shembull
Thjeshtimi funksionon për çdo njësi madhesie. Le të themi për shembull se kemi tre kolona në piksel:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Le ta thjeshtojmë shënimin duke përdorur repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Detyra praktike
Krijoni 4 kolona me të njëjtin
madhësi duke përdorur repeat.
Krijoni 4 kolona me madhësi 100px,
dhe 3 kolona të tjera me madhësi 2fr.
Krijoni 2 kolona me madhësi 100px,
3 kolona të tjera me madhësi 200px,
pastaj një kolonë me madhësi 1fr,
dhe pastaj 2 kolona
me madhësi 10%.
