grid-template-areas ක්රියාකාරීත්වය
grid-template-areas ක්රියාකාරීත්වය
ග්රිඩ් තුළ අංග ස්ථානගත කිරීම නියම කරයි. මුලින්ම, සෑම
දරු අංගයකටම grid-area
ක්රියාකාරීත්වය භාවිතයෙන් නමක් පවරන්න.
ඉන්පසු, මව් අංගය තුළ අපි
grid-template-areas ක්රියාකාරීත්වය
සඳහන් කරමු,
එහිදී අපි දරු අංගවල නම් ග්රිඩ් තුළ ඒවා
ස්ථානගත කිරීමට අවශ්ය අනුපිළිවෙලින් ලැයිස්තුගත කරමු.
වාක්ය රචනය
තේරුම්ගන්නා {
grid-template-areas: දරු අංගවල නම්;
}
නිදර්ශනය
අපි ග්රිඩ් තුළ අපගේ අංග ස්ථානගත කිරීම නියම කරමු:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'second first third';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
නිදර්ශනය
දැන් අපි සමහර අංගවල නම් වෙනුවට
තිත '.' පෙන්වමු. ක්රියාත්මක කරන ලද කේතයේ
ප්රතිඵලයෙන් පෙනෙන පරිදි
මෙම අවස්ථාවේ දී සැලැස්ම තුළ
හිස් කොටසක් ස්ථානගත වේ:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#elem1 {
grid-area: first;
}
#elem2 {
grid-area: second;
}
#elem3 {
grid-area: third;
}
#parent {
display: grid;
grid-template-areas: 'first . second third';
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
මෙයද බලන්න
-
grid-areaක්රියාකාරීත්වය,
ග්රිඩ් තුළ අංගයක නම නියම කරයි
