CSS Grid vs Flexbox
உங்கள் CSS லேஅவுட்களுடன் (layouts) போராடுவதை நிறுத்துங்கள்.
Flexbox மூலம் சிதைந்த லேஅவுட்களைச் சரிசெய்ய நான் பல மணிநேரங்களைச் செலவிட்டிருக்கிறேன். ஒரு வரிசையில் (row) பொருட்களைச் சுற்ற (wrap) முயற்சிப்பேன், ஆனால் கடைசிப் பொருள் முழுத் திரையிலும் நீண்டுவிடும். அது பார்ப்பதற்குத் தவறாகத் தெரிந்தது. நான் மார்ஜின்கள் (margins) மற்றும் கூடுதல் தந்திரங்களைப் பயன்படுத்தினேன், ஆனால் எதுவும் வேலை செய்யவில்லை.
பிறகு நான் எனது சிந்தனையை CSS Grid நோக்கி மாற்றினேன்.
வித்தியாசம் எளிமையானது:
- Flexbox என்பது ஒரு பரிமாண (one-dimensional) லேஅவுட்களுக்கானது. ஒரு வரிசை அல்லது ஒரு நெடுவரிசைக்கு (column) மட்டும் இதைப் பயன்படுத்தவும்.
- CSS Grid என்பது இரு பரிமாண (two-dimensional) லேஅவுட்களுக்கானது. வரிசைகள் மற்றும் நெடுவரிசைகள் இரண்டையும் ஒரே நேரத்தில் கட்டுப்படுத்த வேண்டியிருக்கும் போது இதைப் பயன்படுத்தவும்.
Flexbox-ஐ சிறிய பணிகளுக்கான ஒரு கருவியாகவும், Grid-ஐ உங்கள் முழுப் பக்க அமைப்பிற்கான (page structure) ஒரு கருவியாகவும் கருதுங்கள்.
The Flexbox Trap: ஒரு கேலரிக்கு (gallery) Flexbox பயன்படுத்தும்போது, ஒவ்வொரு திரை அளவிற்கும் (screen size) பொருட்கள் சரியாக வரிசைப்படுத்தப்படாமல் போகலாம். உங்கள் வடிவமைப்பின் ஓட்டத்தைச் சிதைக்கும் "தனித்து நிற்கும்" (orphan) பொருட்கள் பெரும்பாலும் உருவாகும்.
The Grid Solution: Grid மூலம், ஒரே ஒரு வரி குறியீட்டில் (line of code) ரெஸ்பான்சிவ் (responsive) கேலரிகளை உருவாக்க முடியும்.
இதைப் பயன்படுத்தவும்:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
இது முடிந்தவரை அதிக 250px நெடுவரிசைகளைச் சேர்க்குமாறு உலாவியிடம் (browser) கூறுகிறது. உலாவியே உங்களுக்காகக் கணக்கீடுகளைச் செய்துவிடும். இனி யூகிக்கத் தேவையில்லை. வரிசைகள் சிதைந்து போவதும் இல்லை.
The Dashboard Example: ஒரு சைட்பார் (sidebar), முக்கிய உள்ளடக்கம் (main content) மற்றும் ஒரு ஃபுட்டர் (footer) கொண்ட டேஷ்போர்டை Flexbox மூலம் உருவாக்குவது கடினம். ஃபுட்டர் முழு அகலத்தையும் ஆக்கிரமிக்க, நீங்கள் பெரும்பாலும் நெஸ்டட் கண்டெய்னர்கள் (nested containers) மற்றும் குழப்பமான குறியீடுகளைப் பயன்படுத்த வேண்டியிருக்கும்.
Grid மூலம், நீங்கள் ஒருமுறை மட்டும் டிராக்ஸ்களை (tracks) வரையறுத்தால் போதும்:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
ஒரே ஒரு கட்டளை மூலம் ஃபுட்டர் முதல் நெடுவரிசை முதல் கடைசி நெடுவரிசை வரை நீளமாக இருக்கச் சொல்லலாம். உங்கள் குறியீடு சுத்தமாகவும் எளிதாகப் படிக்கக்கூடியதாகவும் மாறும்.
எனது அறிவுரை:
• ஹெடர்கள் (headers) அல்லது பட்டன்களில் (buttons) எளிமையான வரிசைப்படுத்துதலுக்கு Flexbox-ஐப் பயன்படுத்தவும்.
• முக்கியப் பக்க லேஅவுட்கள் மற்றும் சிக்கலான கேலரிகளுக்கு Grid-ஐப் பயன்படுத்தவும்.
• லேஅவுட் சிக்கலைச் சரிசெய்ய வேண்டும் என்பதற்காக மட்டும் கண்டெய்னர்களை நெஸ்டிங் (nesting) செய்வதைத் தவிர்க்கவும்.
• இடத்தைப் பகிர்ந்து கொள்ள fr யூனிட்டை எளிதாகப் பயன்படுத்தவும்.
இதை இன்றே முயற்சி செய்து பாருங்கள். Flexbox மூலம் நீங்கள் உருவாக்கிய பழைய காம்பொனென்ட்டை (component) எடுத்துக்கொள்ளுங்கள். அதை CSS Grid பயன்படுத்தி மீண்டும் எழுதுங்கள். உங்கள் குறியீடு சுருங்குவதையும், லேஅவுட்கள் வலிமையடைவதையும் நீங்கள் காண்பீர்கள்.