CSS ග්රිඩ් වල repeat ශ්රිතය
ඔබට එකම ප්රමාණය පැවරු බහු තීරු තිබේ නම්,
එම වාර්තාව සරල කළ හැකිය,
repeat ශ්රිතය භාවිතා කිරීමෙන්.
මෙම ශ්රිතයේ පළමු පරාමිතියේ දක්වා ඇත්තේ
තීරු ගණන වන අතර දෙවන පරාමිතියේ - ඒවායේ පළල.
උදාහරණ භාවිතයෙන් බලමු,
මෙය කෙසේ ක්රියා කරයිද කියා.
උදාහරණය
අපට එකම ප්රමාණයේ තීරු තුනක් ඇතැයි සිතමු:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
repeat භාවිතයෙන් වාර්තාව සරල කරමු:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
උදාහරණය
අපට එකම ප්රමාණයේ තීරු තුනක් ඇතැයි සිතමු, නමුත් සිව්වන තීරුව වෙනස් ප්රමාණයකින් යුක්තය:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
repeat භාවිතයෙන් වාර්තාව සරල කරමු:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
උදාහරණය
අපට පළමු තීරු තුන එකම ප්රමාණයේ, නමුත් දෙවන තීරු තුන වෙනස් ප්රමාණයේ ඇතැයි සිතමු:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
repeat භාවිතයෙන් වාර්තාව සරල කරමු:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
උදාහරණය
අපට පළමු තීරු තුන එකම ප්රමාණයේ, ඊට පසු තවත් එක් තීරුවක්, ඊට පසු තවත් තීරු තුනක් වෙනස් ප්රමාණයේ ඇතැයි සිතමු:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
repeat භාවිතයෙන් වාර්තාව සරල කරමු:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
උදාහරණය
සරල කිරීමේ ක්රියාවලිය ඕනෑම ප්රමාණ ඒකක සඳහා වැඩ කරයි. උදාහරණයක් වශයෙන් අපට පික්සල වලින් තීරු තුනක් ඇතැයි සිතමු:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
repeat භාවිතයෙන් වාර්තාව සරල කරමු:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
ප්රායෝගික කාර්යයන්
repeat භාවිතයෙන් 4 එකම
ප්රමාණයේ තීරු සාදන්න.
4 ප්රමාණයේ තීරු 100px වලින් සාදන්න,
තව 3 තීරු ප්රමාණය 2fr වලින් සාදන්න.
2 ප්රමාණයේ තීරු 100px වලින් සාදන්න,
තව 3 තීරු ප්රමාණය 200px වලින් සාදන්න,
ඊට පසුව එක් තීරුවක් ප්රමාණය 1fr වලින්,
ඊට පසුව 2 තීරු
ප්රමාණය 10% වලින් සාදන්න.
