ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-21, Tuesday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

CSS Grid සමඟ සරල කෝපි ගැලරිය නිර්මාණය – නව වෙබ් ලේඛන තාක්ෂණය

CSS Grid සමඟ සරල කෝපි ගැලරිය නිර්මාණය – නව වෙබ් ලේඛන තාක්ෂණය

ඔබත් වෙබ් අඩවි සැලසුම් කරන්නේ නම්, නවතම CSS Grid තාක්ෂණය අත්හදා බැලීමට අවස්ථාව ලැබුණාද? ගස් ගස් මහතාගේ නව ලිපියෙන්, සරල කෝපි ගැලරියක් නිර්මාණය කරමින් Grid භාවිතය පැහැදිලි කරයි.

මෙම කුඩා ව්‍යාපෘතියේදී, display: grid යොදා ගෙන කොටස් වෙන් කර, grid-template-columns මගින් තීරුවල ගණන සහ ප්‍රමාණය නියම කරන ලදී. gap ගුණාංගය භාවිතයෙන් කොටස් අතර හිස් ඉඩ සකස් කර, පිටුපස අඩු කේතයක් සමඟ පිරිසිදු, ප්‍රතිචාරශීලී සැලසුමක් ලබා ගත හැකි විය.

මෙම අත්හදා බැලීමේදී ඉගෙන ගත් ප්‍රධාන කරුණු:

  • grid container එකක් display: grid සමඟ නිර්මාණය කිරීම.
  • තීරු ගණන සහ ප්‍රමාණය grid-template-columns මඟින් නියම කිරීම.
  • කොටස් අතර හිස් ඉඩ gap මඟින් පාලනය කිරීම.
  • Grid භාවිතයෙන් ලේඛන සැලසුම් පැහැදිලි, නඩත්තු කිරීමට පහසු කර ගැනීම.

ඉතා සරල ව්‍යාපෘතියක් වුවත්, මෙවැනි පුහුණු අභ්‍යාසයන් මඟින් නව CSS ලේඛන තාක්ෂණය පිළිබඳ විශ්වාසය වැඩි වෙයි. අනාගත ව්‍යාපෘතිවලදී Flexbox, පාරම්පරික float වැනි පැරණි ක්‍රමවලට පසු Grid භාවිතයෙන් වේගවත්, සංවිධානය කළ හැකි පරිසරයක් ගොඩනඟා ගත හැක.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ බොහෝ තරුණ සංවර්ධකයින් සහ විශ්වවිද්‍යාල සිසුන්, වෙබ් අඩවි නිර්මාණයට අලුත් පද්ධති අවශ්‍ය වේ. CSS Grid ඉගෙනීම ඔවුන්ට ජාත්‍යන්තර තත්ත්වයේ responsive design නිර්මාණය කිරීමට, තැරැව්කාරක සමාගම් හෝ ස්ථානික ව්‍යාපාර සඳහා නවීන වෙබ් අඩවි සැපයීමට හැකියාව දේ. එමෙන්ම, Grid භාවිතයෙන් කේතය කුඩා කර, පරිපාලන කාලය අඩු කර, ව්‍යාපාරික වියදම් ඉතිරි කරයි.

අවසන් වශයෙන්, CSS Grid සමඟ අත්හදා බැලීම තරුණ සංවර්ධකයින්ගේ තාක්ෂණික පදනම ශක්තිමත් කර, ශ්‍රී ලංකාවේ තාක්ෂණික ආර්ථිකයට නව නව නිර්මාණයක් ගෙන එනවා.

💡 ඔබත් CSS Grid සමඟ ඔබේ අලංකාර වෙබ් අඩවි නිර්මාණය කර බලන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#CSS Grid #Web Design #Responsive #Frontend #Learning