වෙබ් අඩවි සැලසුම් කරන කාලයේ, දෙමානික (two‑dimensional) ලේඛන සැලසුම් කිරීමේ හැකියාවක් ලබා දෙන CSS Grid, ඉතිහාසයේ නව තලයක් බවට පත්ව තිබේ.
CSS Grid යනු, බ්රවුසරයට HTML අංගයන් රේඛා සහ තීරු දෙකේම ස්ථානගත කිරීමේ නියමයක් දෙයි. Flexbox එකක් එක්‑මානයක (one‑dimensional) සැලසුම් සඳහා පමණක් හොඳින් වැඩ කරන අතර, Grid එකේදී පේළි, තීරු, හා ඒවායේ අන්තර්ගතයන් එකවර පාලනය කළ හැකිය.
ඇයි Grid භාවිතා කරනවා? පැරණි ලේඛන සැලසුම් ක්රම (float, inline‑block) වලට වඩා, Grid එකේ කේත පරිමාණය කුඩා, අංග ස්ථානගත කිරීම නිරවද්ය, සහ වෙනස් තිර ප්රමාණයන්ට ස්වයංක්රීයව අනුකූල වෙයි. මෙය විශේෂයෙන් ප්රතිචාරශීලී (responsive) වෙබ් අඩවි නිර්මාණයට අතිශය ප්රයෝජනවත්.
උදාහරණයක් ලෙස, පහත කේතය තුළ .container අංගය display: grid ලෙස සකසා, grid-template-columns: repeat(3, 1fr) මඟින් තීරු 3ක් සෑදෙයි. gap: 20px මගින් අංග අතර අවකාශය නියම වේ. ඉන්පසු .box අංගයන්ට පසුබිම, පාඨ වර්ණ, පූර්ණකරණය යනාදිය සකස් කර, සරල, නවීන පේළි‑තීරු ග්රිඩ් එකක් ලැබේ.
මෙම ක්රමය භාවිතා කිරීමෙන්, සංවර්ධකයන්ට සංකීර්ණ පෝර්ට්ෆෝලියෝ, ඩැෂ්බෝඩ්, හෝ ඕනෑම ව්යාපෘතියක් ලේසිව, පිරිසිදු කේතයක් සමඟ නිර්මාණය කළ හැකිය. එමෙන්ම, අලුත් බ්රවුසර වල වැඩි පිරිසක් Grid අනුකූලව ඇති බැවින්, අන්තර්ජාල පරිශීලකයින්ට නිරන්තර අත්දැකීම් ලැබේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- ඉගැන්වීමේ වාසිය: දේශීය විශ්වවිද්යාල සහ පුහුණු පාඨමාලා වල CSS Grid ඇතුළත් කිරීමෙන්, නව පරපුරේ වෙබ් සංවර්ධකයින්ට නවතම තාක්ෂණික කුසලතා ලැබේ.
- ව්යාපාරික ප්රයෝජනය: ශ්රී ලාංකීය කුඩා හා මධ්ය පරිමාණ ව්යාපාරයන්ට, අඩු කේතයක් මත පදනම් වූ ප්රතිචාරශීලී අඩවි නිර්මාණය කිරීමේ හැකියාව ලැබේ, මෙය ගනුදෙනුකරුවන්ගේ අත්දැකීම් වර්ධනය කරයි.
- ඉදිරි තාක්ෂණික වර්ධනය: Grid සමඟ අන්තර්ජාලයෙහි UI/UX නිර්මාණය ඉතා සංකීර්ණව නොව, වේගවත්, පරිසර හිතකාමී වෙබ් යෙදුම් නිර්මාණයට මඟ පෙන්වයි.
අවසන් වශයෙන්, CSS Grid වෙබ් ලේඛන සැලසුම් ක්ෂේත්රයේ සැබෑ විප්ලවයක්. ඔබේ ඕනෑම ව්යාපෘතියකට Grid යෙදීමෙන්, පිරිසිදු, නවීන, සහ අනුකූල අඩවියක් නිර්මාණය කරගත හැකිය.
