சில ஆண்டுகளுக்கு முன்பு, நான் ஒரு டேஷ்போர்டை உருவாக்கத் தொடங்கினேன். மிகவும் சிக்கலானதும் இல்லை—ஒரு நிலையான சைட்பார், ஒரு முக்கிய உள்ளடக்கப் பகுதி மற்றும் ஒரு அடிக்குறிப்பு மட்டுமே.

சில ஆண்டுகளுக்கு முன்பு, நான் ஒரு டேஷ்போர்டை (dashboard) உருவாக்க அமர்ந்தேன். மிகவும் ஆடம்பரமாக இல்லை—ஒரு நிலையான சைட்பார் (sidebar), ஒரு முக்கிய உள்ளடக்கப் பகுதி (main content area) மற்றும் ஒரு ஃபுட்டர் (footer) மட்டுமே. Flexbox தான் சரியான தேர்வாகத் தோன்றியது, ஆரம்பத்தில் அது சரியாகவே செயல்பட்டது. பின்னர், முக்கியப் பகுதியில் ஒரு வரிசை கார்டுகளை (cards)ச் சேர்த்தேன். முழு லேஅவுட்டும் (layout) நிலைதடுமாறியது. அடுத்த மூன்று மணிநேரம் முழுவதும் flex-grow விகிதங்கள் மற்றும் நெஸ்டட் (nested) சதவீத அகலங்களுடன் போராடினேன்; எவ்வளவு பேடிங் (padding) குறைத்தாலும் கன்டெய்னர்கள் வரிசையாக அமைய மறுப்பதைக் கண்டுகொண்டேன். அந்தப் பக்கம் சரிந்து விழவிருக்கும் ஒரு கோபுரம் போலத் தோன்றியது.

அந்தக் கடினமான அனுபவம் நவீன CSS லேஅவுட் பற்றிய மிக முக்கியமான ஒரு விஷயத்தைக் கற்றுக்கொடுத்தது: Flexbox மற்றும் Grid ஆகியவை எதிரிகள் அல்ல. அவை வெவ்வேறு பணிகளுக்கான கருவிகள், தவறான கருவியைத் தேர்ந்தெடுப்பதால்தான் பெரும்பாலான லேஅவுட்கள் தோல்வியடைகின்றன.

வித்தியாசம் பரிமாணத்தில் உள்ளது

Flexbox-ஐ ஒரு நடைபாதை போலக் கருதுங்கள். பொருட்கள் ஒரு திசையில், அதாவது ஒரு வரிசையாகவோ (row) அல்லது ஒரு நெடுவரிசையாகவோ (column) நகரும். இது ஒரு பரிமாணப் பகிர்வுக்காக (one-dimensional distribution) உருவாக்கப்பட்டது. பிரவுசர் உள்ளடக்கத்தைப் பார்த்துவிட்டு, அந்த ஒற்றை அச்ச along (axis) எவ்வாறு நீட்ட வேண்டும், சுருக்க வேண்டும் அல்லது சீரமைக்க வேண்டும் என்பதைத் தீர்மானிக்கிறது. உள்ளடக்கமே லேஅவுட்டைத் தீர்மானிக்க வேண்டிய சூழ்நிலைகளுக்கு Flexbox மிகவும் பொருத்தமானது. ஒரு நேவிகேஷன் பார் (navigation bar), படிவக் புலங்களின் அடுக்கு (stack of form fields), அல்லது சமமான இடைவெளியைத் தேவைப்படும் டேக்ஸ் (tags) ஆகியவற்றின் தொகுப்பு ஆகியவை ஒரு flex கன்டெய்னரில் இயல்பாக அமையும், ஏனெனில் அவை ஒரே தர்க்கத்தைப் பகிர்ந்து கொள்கின்றன.

மறுபுறம், Grid என்பது ஒரு தரை வரைபடம் (floor plan) போன்றது. இது முற்றிலும் இரு பரிமாணமானது (two-dimensional), வரிசைகளையும் நெடுவரிசைகளையும் ஒரே நேரத்தில் கையாளும். நீங்கள் முதலில் கட்டமைப்பை வரையறுக்கிறீர்கள், பின்னர் அதற்குள் பொருட்களை வைக்கிறீர்கள். இது ஒட்டுமொத்த பக்கக் கட்டமைப்பிற்கு (page architecture)—அதாவது செங்குத்து மற்றும் கிடைமட்ட நிலைகளை (vertical and horizontal positioning) ஒன்றாகக் கட்டுப்படுத்த வேண்டிய இடங்களுக்கு—மிகவும் சிறந்தது. நெஸ்டட் Flexbox கன்டெய்னர்கள் மூலம் ஒரு சிக்கலான இரு பரிமாண வடிவமைப்பைத் திணிக்க முயலும்போது, நீங்கள் அதிகப்படியான மார்க்அப் (markup), பலவீனமான ரேப்பர்கள் (wrappers) மற்றும் ஒரு கூடுதல் உறுப்பைச் சேர்த்தவுடன் உடைந்துவிடும் சிக்கலான கணக்கீடுகளுடன் முடிவடைவீர்கள்.

Flexbox இன்னும் தனது முக்கியத்துவத்தைத் தக்கவைத்துக் கொண்டுள்ளது

ஒவ்வொரு flex கன்டெய்னரையும் Grid மூலம் மாற்றத் துடிக்க வேண்டாம். தனிப்பட்ட கூறுகள் (individual components) உள்ளே, Flexbox பெரும்பாலும் சுத்தமாகவும் எளிமையாகவும் இருக்கும். உங்களிடம் இரண்டு பட்டன்கள் கொண்ட ஒரு கார்டு ஃபுட்டர் (card footer) இருந்து, ஒன்றைத் இடதுபுறமும் மற்றொன்றைத் வலதுபுறமும் சீரமைக்க விரும்பினால், justify-content: space-between நீங்கள் நினைத்ததைச் சரியாகச் செய்யும். தெரியாத உயரமுள்ள ஒரு பட்டனுக்குள் ஒரு ஐகானை (icon) செங்குத்தாக மையப்படுத்த வேண்டுமென்றால், align-items: center தான் எளிமையான வழி. மாறுபடும் உள்ளடக்கங்கள்—உதாரணமாக வெவ்வேறு பெயர் நீளம் கொண்ட பயனர் பேட்ஜ்களின் (user badges) வரிசை—Flexbox-க்குள் வசதியாக அமையும், ஏனெனில் இது உள்ளடக்கத்திற்கு முன்னுரிமை அளிக்கிறது (content-first). கன்டெய்னர் தான் உள்ளடக்கத்திற்கு ஏற்பத் தன்னை மாற்றிக்கொள்ளும்.

Grid என்பது கன்டெய்னர்-முதலில் (container-first) செயல்படும் முறை. எத்தனை டிராக்ஸ் (tracks) உள்ளன மற்றும் அவை எவ்வளவு பெரியதாக இருக்க வேண்டும் என்று நீங்கள் பிரவுசருக்குச் சொல்கிறீர்கள், பின்னர் அந்த செல்கள் (cells) உள்ளே பொருட்களைப் போடுகிறீர்கள். உங்கள் லேஅவுட் என்பது ஒரே வரிசையில் உள்ள உறுப்புகள் இடத்தைப் பகிர்ந்து கொள்வது மட்டுமே என்றால், Grid தேவையற்ற சிக்கல்களைச் சேர்க்கும்.

பக்க லேஅவுட் (Page Layout) Grid-க்கு உரியது

இங்குதான் Grid தனது ஆதிக்கத்தைச் செலுத்துகிறது. எனது டேஷ்போர்டு பயங்கரமான அனுபவம் உங்களுக்கு நினைவிருக்கலாம்? அதன் கட்டமைப்பு ஆரம்பத்திலிருந்தே இப்படி இருந்திருக்க வேண்டும்:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

என்ன நடக்கிறது என்று பாருங்கள். .page கன்டெய்னர் மூன்று வரிசைகளையும் (rows) இரண்டு நெடுவரிசைகளையும் (columns) உருவாக்குகிறது. auto காரணமாக முதல் வரிசை ஹெடரில் (header) உள்ள உள்ளடக்கத்திற்கு ஏற்பத் தன்னைத் தயார்படுத்திக் கொள்கிறது. நடு வரிசை 1fr மூலம் மீதமுள்ள அனைத்து இடத்தையும் எடுத்துக் கொள்கிறது. ஃபுட்டர் (footer) இறுதி வரிசையில் அமைகிறது, அது அதன் சொந்த உள்ளடக்கத்திற்கு ஏற்ப அளவு கொள்ளும். அதே நேரத்தில், சைட்பார் (sidebar) 200 பிக்சல் அகலத்திற்குப் பூட்டப்படுகிறது, மற்றும் முக்கியப் பகுதி (main area) மீதமுள்ள இடத்தை நிரப்புகிறது.

அமைவிடம் குறித்த தர்க்கம் (placement logic) தான் உண்மையான நிம்மதி. ஹெடர் நெடுவரிசை கோடு 1 முதல் -1 வரை நீள்கிறது, அதாவது நீங்கள் பின்னாளில் எத்தனை நெடுவரிசைகளைச் சேர்த்தாலும் அது இரண்டு நெடுவரிசைகளிலும் பரவி இருக்கும். சைட்பார் மற்றும் முக்கிய உள்ளடக்கம் வரிசை 2-ஐப் பகிர்ந்து கொள்கின்றன, ஆனால் தனித்தனி நெடுவரிசைகளில் அமைகின்றன. ஃபுட்டர் வரிசை 3-ல் முழு அகலத்திற்குத் திரும்புகிறது. உள் உறுப்புகளில் (children) நீங்கள் சதவீதக் கணக்கீடுகளைச் செய்யத் தேவையில்லை. உயரத்திற்காகப் போராடும் நெஸ்டட் ரேப்பர்கள் தேவையில்லை. சைட்பார் அகலத்தை ஒரே இடத்தில் மாற்றினால் போதும், முக்கியப் பகுதி தானாகவே சரிசெய்யப்படும். முழு லேஅவுட்டும் ஒரு ஒற்றை அமைப்பாக இயங்குகிறது.

grid-template-areas மூலம் வாசிப்புத்திறன் (Readability)

இன்னும் கூடுதல் தெளிவிற்காக, உங்கள் பிரிவுகளுக்குப் பெயரிடலாம். வரிசை எண்களை நிர்வகிப்பதற்குப் பதிலாக, நீங்கள் ஒரு காட்சி வரைபடத்தை (visual map) எழுதுகிறீர்கள்:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

இப்போது உங்கள் ஸ்டைல்ஷீட் (stylesheet) ஒரு வயர்ஃபிரேம் (wireframe) போலத் தெரியும். எதிர்காலத்தில் ஒரு குறிப்பிட்ட பிரேக்பாயிண்டில் (breakpoint) சைட்பார் வலதுபுறம் தோன்ற வேண்டுமென்றால், டெம்ப்ளேட் ஸ்ட்ரிங்கில் (template string) இரண்டு வார்த்தைகளை மட்டும் மாற்றினால் போதும். நெஸ்டட் flex கன்டெய்னர்களின் அடுக்குக்குள் இத்தகைய கட்டமைக்கப்பட்ட வாசிப்புத்திறனைப் பெறுவது சாத்தியமற்றது.

இரண்டு கடினமான பாடங்கள்

Grid என்பது மந்திரம் அல்ல. உங்கள் லேஅவுட்டை விரைவாகச் சிதைக்கக்கூடிய இரண்டு தவறுகள் உள்ளன.

முதலாவதாக, அலகு பயன்பாட்டில் உள்ள கவனக்குறைவு. நீங்கள் grid-template-columns: 1fr 1fr 1fr என்று வரையறுத்தாலும், உங்கள் வடிவமைப்பிற்கு இரண்டு நெடுவரிசைகள் மட்டுமே தேவைப்பட்டால், அந்த மூன்றாவது track அப்படியே இருக்கும். அது காலியாக இருந்து நீங்கள் எதிர்பார்க்காத ஒரு இடைவெளியை உருவாக்கலாம், அல்லது உங்கள் உண்மையான உள்ளடக்கத்தை வடிவமைப்பைச் சிதைக்கும் வகையில் சுருக்கிக் கொள்ளச் செய்யலாம். திட்டமிட்டுச் செயல்படுங்கள். உங்களுக்கு இரண்டு நெடுவரிசைகள் தேவைப்படும்போது, repeat(2, 1fr) என்று எழுதுங்கள்.