𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
നിങ്ങളുടെ CSS ലേഔട്ടുകൾക്കായി ഇനി കഷ്ടപ്പെടേണ്ടതില്ല.
Flexbox ഉപയോഗിച്ച് തകരാറിലായ ലേഔട്ടുകൾ ശരിയാക്കാൻ ഞാൻ മണിക്കൂറുകൾ ചിലവഴിക്കാറുണ്ടായിരുന്നു. ഐറ്റങ്ങൾ ഒരു വരിയിൽ (row) ക്രമീകരിക്കാൻ ഞാൻ ശ്രമിക്കുമായിരുന്നു, പക്ഷേ അവസാനത്തെ ഐറ്റം മുഴുവൻ സ്ക്രീനിലൂടെയും നീണ്ടുപോകുമായിരുന്നു. അത് കാണാൻ ഭംഗിയില്ലായിരുന്നു. ഞാൻ മാർജിനുകളും മറ്റ് പല വഴികളും പരീക്ഷിച്ചു നോക്കി, പക്ഷേ ഒന്നും ഫലിച്ചില്ല.
പിന്നീട് ഞാൻ CSS Grid ഉപയോഗിക്കാൻ തീരുമാനിച്ചു.
വ്യത്യാസം ലളിതമാണ്:
- Flexbox എന്നത് വൺ-ഡൈമൻഷണൽ (one-dimensional) ലേഔട്ടുകൾക്ക് വേണ്ടിയുള്ളതാണ്. ഒരു വരിയ്ക്കോ (row) അല്ലെങ്കിൽ ഒരു കോളത്തിനോ (column) വേണ്ടി ഇത് ഉപയോഗിക്കാം.
- CSS Grid എന്നത് ടു-ഡൈമൻഷണൽ (two-dimensional) ലേഔട്ടുകൾക്ക് വേണ്ടിയുള്ളതാണ്. ഒരേസമയം വരികളും കോളങ്ങളും നിയന്ത്രിക്കേണ്ടി വരുമ്പോൾ ഇത് ഉപയോഗിക്കുക.
ചെറിയ ജോലികൾക്കായി Flexbox ഒരു ടൂൾ ആയി കാണുക. എന്നാൽ നിങ്ങളുടെ മുഴുവൻ പേജ് സ്ട്രക്ചറിനും Grid ഒരു ടൂൾ ആയി കാണുക.
The Flexbox Trap: ഒരു ഗാലറിക്ക് Flexbox ഉപയോഗിക്കുമ്പോൾ, എല്ലാ സ്ക്രീൻ സൈസുകളിലും ഐറ്റങ്ങൾ കൃത്യമായി ക്രമീകരിക്കപ്പെട്ടില്ലെന്ന് വരാം. പലപ്പോഴും ഡിസൈനിന്റെ താളം തെറ്റിക്കുന്ന രീതിയിൽ ഒറ്റപ്പെട്ട (orphan) ഐറ്റങ്ങൾ ഉണ്ടാകാൻ ഇത് കാരണമാകും.
The Grid Solution: Grid ഉപയോഗിച്ച്, ഒരു വരി കോഡിലൂടെ നിങ്ങൾക്ക് റെസ്പോൺസീവ് (responsive) ഗാലറികൾ നിർമ്മിക്കാം.
ഇത് ഉപയോഗിക്കുക:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
ഇത് ബ്രൗസറിനോട് പരമാവധി 250px കോളങ്ങൾ ഉൾക്കൊള്ളാൻ നിർദ്ദേശിക്കുന്നു. ബ്രൗസർ തന്നെ ഇതിന്റെ കണക്കുകൂട്ടലുകൾ നടത്തുന്നു. ഇനി ഊഹിച്ചു നടക്കേണ്ടതില്ല, വരികൾ തെറ്റാനും സാധ്യതയില്ല.
The Dashboard Example: ഒരു സൈഡ്ബാർ, മെയിൻ കണ്ടന്റ്, ഫൂട്ടർ എന്നിവയുള്ള ഒരു ഡാഷ്ബോർഡ് Flexbox ഉപയോഗിച്ച് നിർമ്മിക്കുന്നത് പ്രയാസകരമാണ്. ഫൂട്ടർ മുഴുവൻ വീതിയിലും വരാൻ പലപ്പോഴും നെസ്റ്റഡ് കണ്ടെയ്നറുകളും (nested containers) സങ്കീർണ്ണമായ കോഡുകളും ആവശ്യമായി വരും.
Grid ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരിക്കൽ മാത്രം ട്രാക്കുകൾ നിർവചിച്ചാൽ മതി:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
ഒരു കമാൻഡ് ഉപയോഗിച്ച് ഫൂട്ടറിനെ ആദ്യത്തെ കോളം മുതൽ അവസാനത്തെ കോളം വരെ നീളാൻ നിർദ്ദേശിക്കാൻ സാധിക്കും. നിങ്ങളുടെ കോഡ് വൃത്തിയുള്ളതും വായിക്കാൻ എളുപ്പമുള്ളതുമായി മാറും.
My advice:
• ഹെഡറുകളിലോ ബട്ടണുകളിലോ ഉള്ള ലളിതമായ അലൈൻമെന്റുകൾക്കായി Flexbox ഉപയോഗിക്കുക.
• പ്രധാന പേജ് ലേഔട്ടുകൾക്കും സങ്കീർണ്ണമായ ഗാലറികൾക്കും Grid ഉപയോഗിക്കുക.
• ലേഔട്ട് പ്രശ്നങ്ങൾ പരിഹരിക്കാൻ വേണ്ടി മാത്രം കണ്ടെയ്നറുകൾ നെസ്റ്റ് ചെയ്യുന്നത് ഒഴിവാക്കുക.
• സ്പേസ് എളുപ്പത്തിൽ വിഭജിക്കാൻ fr യൂണിറ്റ് ഉപയോഗിക്കുക.
ഇത് ഇന്ന് തന്നെ പരീക്ഷിച്ചു നോക്കൂ. Flexbox ഉപയോഗിച്ച് നിങ്ങൾ നിർമ്മിച്ച പഴയ ഒരു കോമ്പോണന്റ് എടുക്കുക. അത് CSS Grid ഉപയോഗിച്ച് വീണ്ടും എഴുതുക. നിങ്ങളുടെ കോഡ് കുറയുന്നതും ലേഔട്ടുകൾ കൂടുതൽ കരുത്തുറ്റതാകുന്നതും നിങ്ങൾക്ക് കാണാൻ കഴിയും.