ഒരു റെസ്‌പോൺസീവ് CSS ഗ്രിഡ് ലേഔട്ട് എങ്ങനെ സൃഷ്ടിക്കാം. എന്തുകൊണ്ട് CSS ഗ്രിഡ് ബൂട്ട്സ്ട്രാപ്പ് ചട്ടക്കൂടിനേക്കാൾ മികച്ചതാണ്
രചയിതാവിൽ നിന്ന്: CSS ഗ്രിഡ് ലേഔട്ടിൻ്റെ പരമ്പര ആശയത്തിൽ നിന്നുള്ള ലേഖനം. മുമ്പത്തെ പാഠങ്ങളിൽ, ഞങ്ങൾ ഗ്രിഡ് വാക്യഘടന പഠിച്ചു, ഒരു പേജിൽ ഘടകങ്ങൾ ക്രമീകരിക്കാനുള്ള നിരവധി മാർഗങ്ങൾ പഠിച്ചു, ചില പഴയ ശീലങ്ങളോട് വിട പറഞ്ഞു. ഈ ട്യൂട്ടോറിയലിൽ, പ്രതികരണശേഷിയുള്ള ഒരു ലേഔട്ട് സൃഷ്ടിക്കുന്നതിന് ഞങ്ങളുടെ എല്ലാ അറിവുകളും ഞങ്ങൾ പ്രാവർത്തികമാക്കും.
മാധ്യമങ്ങളുടെ ചോദ്യങ്ങൾ
മുമ്പത്തെ പാഠത്തിൽ നിന്നുള്ള ഡെമോ എടുക്കാം.
പേജിൽ രണ്ട് ഗ്രിഡുകൾ അടങ്ങിയിരിക്കുന്നു: പ്രധാന ഗ്രിഡും ഒരെണ്ണം മൂലകങ്ങളിൽ ഒന്നിൽ കൂടുകൂട്ടിയതും. മീഡിയ അന്വേഷണങ്ങൾ ഉപയോഗിച്ച് നമുക്ക് നമ്മുടെ മെഷുകൾ നിയന്ത്രിക്കാനാകും. മറ്റൊരു സ്‌ക്രീൻ വീതിക്ക് അനുയോജ്യമായ രീതിയിൽ നമുക്ക് ലേഔട്ട് പൂർണ്ണമായും പുനർനിർമ്മിക്കാൻ കഴിയുമെന്നാണ് ഇതിനർത്ഥം.
ആദ്യ ഗ്രിഡിൻ്റെ പ്രഖ്യാപനം പകർത്തിക്കൊണ്ട് ഞങ്ങൾ ആരംഭിക്കും. മൊബൈൽ ഫസ്റ്റ് ടെക്‌നിക് ഉപയോഗിച്ച് നമുക്ക് ഡ്യൂപ്ലിക്കേറ്റ് ഒരു മീഡിയ അന്വേഷണത്തിലേക്ക് പൊതിയാം. ഞാൻ ഏകപക്ഷീയമായി 500px പരിവർത്തന പോയിൻ്റായി എടുത്തു.
ഇപ്പോൾ ഞങ്ങൾ ആദ്യ പരസ്യത്തിൽ ഞങ്ങളുടെ ഗ്രിഡ് മാറ്റി എല്ലാം ഒരു കോളത്തിൽ ഇടും. ഗ്രിഡ്-ടെംപ്ലേറ്റ്-നിരകൾ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു കോളം സജ്ജമാക്കി. ഗ്രിഡ്-ടെംപ്ലേറ്റ്-റോ പ്രോപ്പർട്ടി ഉപയോഗിച്ചാണ് ഞങ്ങളുടെ നാല് വരികൾ സജ്ജീകരിച്ചിരിക്കുന്നതെന്ന് പരിശോധിക്കുകയും ഗ്രിഡ്-ടെംപ്ലേറ്റ്-ഏരിയാസ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് ലേഔട്ടുമായി പൊരുത്തപ്പെടുകയും ചെയ്യുന്നു:
grid - ടെംപ്ലേറ്റ് - വരികൾ: 80px ഓട്ടോ ഓട്ടോ 80px;
ഗ്രിഡ് - വിടവ്: 10px;
ഗ്രിഡ് - ടെംപ്ലേറ്റ് - ഏരിയകൾ : "തലക്കെട്ട്"
"പ്രധാന"
"സൈഡ്ബാർ"
"അടിക്കുറിപ്പ്" ;
ചെറിയ സ്‌ക്രീനുകളിൽ ഫിറ്റ് ചെയ്യാൻ, ഞങ്ങൾ ഗ്രിഡ്-ഗാപ്പ് ഡിഫോൾട്ടായി 10px ആയി സജ്ജീകരിക്കുന്നു. ഇതാണ് ഞങ്ങൾക്ക് ലഭിച്ചത്. ഞങ്ങൾ മാറുന്നതും നിങ്ങൾ ശ്രദ്ധിക്കണം പാഡിംഗ് പ്രോപ്പർട്ടികൾമീഡിയ അന്വേഷണങ്ങൾ ഉപയോഗിച്ച് .grid-1 div ഘടകങ്ങളിലെ ഫോണ്ട്-സൈസ്.
ഞങ്ങളുടെ നെസ്റ്റഡ് ഗ്രിഡ്
മുകളിലുള്ള കോഡ് ഞങ്ങളുടെ പ്രധാന ലേഔട്ടിൽ മാറ്റം വരുത്തുന്നു. എന്നിരുന്നാലും, ഏത് സ്‌ക്രീനിലും അതിൻ്റെ രണ്ട് നിരകൾ ഒഴിവാക്കാൻ ശാഠ്യത്തോടെ വിസമ്മതിക്കുന്ന ഒരു നെസ്റ്റഡ് ഗ്രിഡ് ഞങ്ങളുടെ പക്കലുണ്ട്. ഇത് പരിഹരിക്കാൻ, ഞങ്ങൾ അതേ കാര്യം തന്നെ ചെയ്യും, എന്നാൽ ഉള്ളടക്കം-ആദ്യ രീതി ഉപയോഗിച്ച് മറ്റൊരു പരിവർത്തന പോയിൻ്റ് എടുക്കുക:
ഞങ്ങൾ ഓട്ടോഫിൽ ഡെമോ വീണ്ടും ചെയ്യുകയും കോളത്തിൻ്റെ വീതി minmax (9em, 1fr) ആക്കി മാറ്റുകയും ചെയ്യുകയാണെങ്കിൽ, ഗ്രിഡ് കഴിയുന്നത്ര 9em വീതിയുള്ള ട്രാക്കുകൾ ഘടിപ്പിക്കാൻ ശ്രമിക്കും, തുടർന്ന് മുഴുവൻ കണ്ടെയ്‌നറും നിറയുന്നത് വരെ അവയെ 1fr ആയി വികസിപ്പിക്കും:
പോരായ്മ: ഒരു റീബൂട്ടിന് ശേഷം മാത്രമേ ഗ്രിഡ് ട്രാക്കുകൾ വീണ്ടും കണക്കാക്കൂ, വിൻഡോയുടെ വീതി മാറുമ്പോൾ അല്ല. നിങ്ങളുടെ ബ്രൗസർ വിൻഡോ ചുരുക്കി പേജ് പുതുക്കാൻ ശ്രമിക്കുക. മൂല്യങ്ങൾ മാറ്റുന്നതിന്, നിങ്ങൾക്ക് മീഡിയ അന്വേഷണങ്ങൾ ബന്ധിപ്പിക്കാൻ കഴിയും, എന്നാൽ ബ്രൗസർ വിൻഡോയുടെ വീതി മാറ്റുന്നതിൽ അവ നന്നായി പ്രവർത്തിക്കില്ല.
ഉപസംഹാരം
മുകളിൽ പറഞ്ഞവയെല്ലാം ഒരു പട്ടികയിൽ സംഗ്രഹിക്കാം:
വ്യത്യസ്ത സാഹചര്യങ്ങൾക്കായി ഗ്രിഡ്-ടെംപ്ലേറ്റ്-ഏരിയാസ് പ്രോപ്പർട്ടി (മറ്റുള്ളവ) മാറ്റി ഗ്രിഡ് പൂർണ്ണമായും പുനർനിർമ്മിക്കാൻ മീഡിയ അന്വേഷണങ്ങൾ ഞങ്ങളെ അനുവദിക്കുന്നു.
ഒരു മെഷ് കണ്ടെയ്നർ നിറയ്ക്കാൻ നല്ലതാണ് കീവേഡ്സ്വയം പൂരിപ്പിക്കൽ
minmax() ഫംഗ്‌ഷൻ സ്വയമേവ പൂർത്തീകരിക്കുന്നതിനുള്ള ഒരു മികച്ച കൂട്ടിച്ചേർക്കലാണ്, പക്ഷേ ഇത് ഞങ്ങൾക്ക് യഥാർത്ഥ പൊരുത്തപ്പെടുത്തൽ നൽകുന്നില്ല.
ഇപ്പോൾ നിങ്ങൾ മെഷുകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ തയ്യാറാണ്! കൂടുതൽ CSS ഗ്രിഡ് ലേഖനങ്ങൾ, ഹാൻഡ്-ഓൺ വ്യായാമങ്ങൾ, സാധാരണ ഗ്രിഡ് പ്രശ്നങ്ങൾക്കുള്ള പരിഹാരങ്ങൾ എന്നിവയ്ക്കായി കാത്തിരിക്കുക.
പ്രത്യേകിച്ച് സൈറ്റ് ഉപയോക്താക്കൾക്ക്, 960 ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുന്നതിനെക്കുറിച്ചുള്ള ഒരു പ്രായോഗിക പാഠം ഞങ്ങൾ നൽകുന്നു. ലേഔട്ടിനായി ഞങ്ങൾക്ക് ഒരു ഡിസൈൻ നൽകിയിട്ടുണ്ടെന്ന് സങ്കൽപ്പിക്കുക. ആദ്യം, ഞങ്ങൾ സൈറ്റ് ഘടന നടപ്പിലാക്കുന്നതിനുള്ള ഒരു പദ്ധതിയുടെ രൂപരേഖ തയ്യാറാക്കണം, അതിനുശേഷം മാത്രമേ നേരിട്ട് കോഡിലേക്ക് പോകൂ. ഈ ലേഖനം പഠിച്ച ശേഷം, നിങ്ങൾക്ക് ഏതെങ്കിലും ക്ലാസിക് ലേഔട്ട് കൈകാര്യം ചെയ്യാൻ കഴിയും എത്രയും പെട്ടെന്ന്കൂടാതെ വർഷങ്ങളോളം സ്വാഭാവിക മുടിയുടെ നിറവും (നരച്ച മുടി ഇല്ലാതെ). അതിനാൽ ഞങ്ങളുടെ ഡിസൈൻ ഇതാ:
1. ഒരു മെഷ് ഉണ്ടാക്കുക
നിങ്ങൾക്ക് ഇതിനകം അറിയാവുന്നതുപോലെ, 960 ഗ്രിഡ് സിസ്റ്റം ക്ലാസുകളുടെ മുഴുവൻ ശ്രേണിയും ഉപയോഗിക്കുന്നു കൂടാതെ നിരവധി വേരിയൻ്റുകളിൽ ലഭ്യമാണ് (12 നിരയും 16 നിര പതിപ്പുകളും). പ്രധാന കണ്ടെയ്നർ, നിരകളുടെ എണ്ണം പരിഗണിക്കാതെ, എല്ലായ്പ്പോഴും 960px വീതിയായിരിക്കും. ഈ രൂപകൽപ്പനയ്ക്കായി ഞങ്ങൾ 12 കോളം സിസ്റ്റം തിരഞ്ഞെടുക്കും. 960 ഗ്രിഡ് സിസ്റ്റത്തിലെ ഓരോ ബ്ലോക്കിനും 0 10px എന്ന ബാഹ്യ മാർജിൻ ഉണ്ട്. ഇത് ഞങ്ങൾക്ക് 20px ആനുപാതികമായ പാഡിംഗ് ഉറപ്പ് നൽകുന്നു. 960px വലുപ്പത്തിൽ ആശയക്കുഴപ്പമുള്ളവർക്ക്, ഈ ഡയഗ്രം നോക്കാൻ ഞാൻ നിങ്ങളെ ഉപദേശിക്കുന്നു. ഈ വലിപ്പംഭൂരിഭാഗം മോണിറ്റർ റെസല്യൂഷനുകൾക്കും അനുയോജ്യമാണ്. അതിനാൽ, ഈ വീതിയുടെ ബ്ലോക്കുകൾ സൃഷ്ടിക്കാനുള്ള കഴിവ് ഞങ്ങൾക്ക് ഉണ്ട്:
140px
220px
300px
380px
460px
540px
620px
700px
780px
860px
940px
ഓരോ വലുപ്പത്തിനും അതിൻ്റേതായ ക്ലാസ് ഉണ്ട്, അതിൻ്റെ പേര് grid_X സ്കീമിനെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്, ഇവിടെ X എന്നത് നിരകളുടെ എണ്ണമാണ്. നിങ്ങൾക്ക് 960px ബ്ലോക്ക് ആവശ്യമുണ്ടെങ്കിൽ, നിങ്ങൾ grid_12 ക്ലാസ് തിരഞ്ഞെടുക്കണം. 960 ഗ്രിഡ് സിസ്റ്റം സജീവമാക്കുന്നതിന്, നിങ്ങൾ പാരൻ്റ് കണ്ടെയ്നർ ക്ലാസ് കണ്ടെയ്നർ_12 അല്ലെങ്കിൽ കണ്ടെയ്നർ 16 ആയി സജ്ജീകരിക്കേണ്ടതുണ്ട്. 3 ബ്ലോക്കുകൾ അടങ്ങുന്ന ഒരു പേജിൻ്റെ ഒരു ചെറിയ ഉദാഹരണം ചുവടെയുണ്ട്. ആദ്യത്തേതിൻ്റെ വീതി 960px-ൻ്റെ വീതിക്ക് തുല്യമാണ്, ശേഷിക്കുന്ന 2 എണ്ണം പകുതിയോളം വലുതാണ്:
നിങ്ങൾ ഗ്രിഡ്_എക്സ് ക്ലാസ് ഉപയോഗിച്ച് ബ്ലോക്കുകൾ ഉപയോഗിച്ച് ഒരു വരി പൂരിപ്പിക്കുമ്പോൾ, അവ മൊത്തത്തിൽ 12-ൽ കൂടുതൽ ചേർക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുക. ഉദാഹരണത്തിന്, നമുക്കുള്ളത് പോലെ - രണ്ട് ബ്ലോക്കുകൾ grid_6 + grid_6 = 12. കുറവ് സാധ്യമാണ്: 6, 4 , 2, മുതലായവ ഡി. ഇപ്പോൾ ഞങ്ങൾ അടിസ്ഥാന തത്വങ്ങൾ മറികടന്നു, നമുക്ക് പ്രായോഗിക വ്യായാമം ആരംഭിക്കാം:
2. ഒരു മോക്ക്-അപ്പ് സൃഷ്ടിക്കുക
നമുക്ക് എന്താണ് ചെയ്യേണ്ടത് എന്നതിൻ്റെ ഒരു ഡയഗ്രം നിർമ്മിക്കാൻ ശ്രമിക്കാം. ഒന്നാമതായി, ഞങ്ങൾക്ക് 960px ൻ്റെ 2 ബ്ലോക്കുകൾ ആവശ്യമാണ്. ഒന്ന് ലോഗോയ്ക്കും മറ്റൊന്ന് നാവിഗേഷനും. അടുത്തതായി 2 ബ്ലോക്കുകൾ (ഒരു വരിയിൽ), ഒരു പോസ്റ്ററിനും വെബ്‌സൈറ്റ് അവതരണത്തിനും, ഒരു സെപ്പറേറ്റർ ബ്ലോക്ക് (മുഴുവൻ വീതി), 4 നിരകൾ (ഒരു വരിയിൽ), വീണ്ടും ഒരു സെപ്പറേറ്റർ ബ്ലോക്കും ഒരു അടിക്കുറിപ്പും. ഇതുപോലുള്ള ഒന്ന്:
ചിത്രം കണ്ടതിന് ശേഷം ഞങ്ങൾക്ക് എന്ത് ക്ലാസുകളാണ് വേണ്ടതെന്ന് നിങ്ങൾക്ക് ഇതിനകം അറിയാമെന്ന് ഞാൻ കരുതുന്നു. അവ സ്വയം പരീക്ഷിച്ചുനോക്കൂ, തുടർന്ന് നിങ്ങൾ ശരിയായി ചിന്തിക്കുന്നുണ്ടോ എന്നറിയാൻ ചുവടെയുള്ള കോഡ് നോക്കുക:
ഓരോ വരിയുടെയും അവസാനം നമ്മൾ തിരുകേണ്ടതുണ്ടെന്ന് ഓർമ്മിക്കുക
എല്ലാ ബ്രൗസറുകളിലും സാധാരണ പ്രദർശനത്തിനായി. ഹെഡ് സെക്ഷനിൽ നിങ്ങളുടെ പേജിൽ 960 ഗ്രിഡ് CSS ഉൾപ്പെടുത്താനും മറക്കരുത്.
അതിനാൽ, അസ്ഥികൂടം തയ്യാറാണ്, അതിനാൽ അലങ്കാരം ആരംഭിക്കാൻ സമയമായി. ഉയരം സജ്ജമാക്കുക ഒപ്പം പശ്ചാത്തല നിറംബ്ലോക്ക് സെപ്പറേറ്ററുകൾ. മെനു ബ്ലോക്കിൻ്റെ ഉയരം മെനുവിനെ തന്നെ ആശ്രയിച്ചിരിക്കും. നിങ്ങളുടെ ലോഗോ ചേർക്കാനും മറക്കരുത്:
ഞങ്ങൾക്ക് ഇപ്പോൾ വിവരങ്ങളിൽ താൽപ്പര്യമില്ല, അതിനാൽ നിങ്ങൾക്ക് ഇവിടെ നിന്ന് സെൻട്രൽ കോളങ്ങളിൽ ഉള്ളടക്കം ചേർക്കാം ഈ പേജ്. നിങ്ങൾ ആരംഭിക്കുന്നതിന് മുമ്പ് മുകളിലെ ഭാഗം, താഴെ ഒന്ന് ശ്രദ്ധിക്കാം. ഞങ്ങളുടെ രൂപകൽപ്പനയിൽ, അടിക്കുറിപ്പ് പശ്ചാത്തലം നിറമുള്ളതാണ് ചാരനിറം. ഓൺ ആ നിമിഷത്തിൽഞങ്ങൾക്ക് ഇത് നടപ്പിലാക്കാൻ കഴിയില്ല, കാരണം നിങ്ങൾ ഓർക്കുകയാണെങ്കിൽ, ബ്ലോക്കുകൾക്കിടയിൽ ചില ഇൻഡൻ്റേഷൻ ഉണ്ട്, അത് ഈ പ്രദേശത്ത് പൂർണ്ണമായും പെയിൻ്റ് ചെയ്യാൻ ഞങ്ങളെ അനുവദിക്കില്ല. ഈ പ്രശ്നം പരിഹരിക്കാൻ, അടിക്കുറിപ്പുമായി ബന്ധപ്പെട്ട 3 ബ്ലോക്കുകൾ id = അടിക്കുറിപ്പുള്ള പ്രത്യേക ബ്ലോക്കുകളിലേക്ക് മാറ്റാം. ഒരു വിശദാംശം കൂടി: ഞങ്ങൾ ക്ലാസുകൾക്കുള്ളിൽ ക്ലാസുകൾ ഉപയോഗിക്കുമ്പോൾ, ആൽഫ മൂല്യങ്ങൾ സജ്ജീകരിക്കുന്നത് നല്ലതാണ് (ഏത് ബ്ലോക്കാണ് ആദ്യത്തേതും ഒമേഗ - അവസാനത്തേതും എന്ന് സൂചിപ്പിക്കാൻ):
ഡിവ്#ഫൂട്ടർ (പശ്ചാത്തല നിറം: #e5e5e6;)
തികഞ്ഞത്! ഞങ്ങളുടെ അടിക്കുറിപ്പിന് ഇപ്പോൾ ഒരു പശ്ചാത്തല നിറമുണ്ട്. അതിലേക്ക് കുറച്ച് വാചകം ചേർക്കുക, നമുക്ക് നാവിഗേഷൻ ബ്ലോക്കിലേക്ക് പോകാം. എല്ലാ നിയമങ്ങളും അനുസരിച്ച് ആധുനിക തത്വങ്ങൾലേഔട്ട്, നാവിഗേഷൻ ആണ് അസംഖ്യം പട്ടിക. ഇനിപ്പറയുന്ന കോഡും ശൈലിയും ചേർക്കുക:
ലേഖനങ്ങൾ
വിഷയങ്ങൾ
കുറിച്ച്
എഡിറ്റർമാർ
ബന്ധപ്പെടുക
Div#navbar ul (ലിസ്റ്റ്-സ്റ്റൈൽ: ഒന്നുമില്ല; ഡിസ്പ്ലേ: ബ്ലോക്ക്; മാർജിൻ: 0 10px; ) div#navbar ul li (ഫ്ലോട്ട്: ഇടത്; മാർജിൻ: 0 1.5em; ഫോണ്ട്: ബോൾഡ് 1എം ഏരിയൽ; )
അടിപൊളി! എല്ലാം നമുക്ക് നന്നായി പോകുന്നു. സൈറ്റിൻ്റെ പോസ്റ്ററും അവതരണവും ഉള്ള ഒരു ബ്ലോക്ക് മാത്രമാണ് അവശേഷിക്കുന്നത്, എന്നാൽ ഞങ്ങൾ അവ നടപ്പിലാക്കാൻ തുടങ്ങുന്നതിനുമുമ്പ്, പൊതുവെ CSS ചട്ടക്കൂടുകളെക്കുറിച്ച് കുറച്ച് വാക്കുകൾ പറയാൻ ഞാൻ ആഗ്രഹിക്കുന്നു.
3. CSS ചട്ടക്കൂടുകൾ നിങ്ങളുടെ എല്ലാ പ്രശ്നങ്ങളും പരിഹരിക്കില്ല
ഒരു CSS ചട്ടക്കൂട് ഉപയോഗിച്ച് നിങ്ങളുടെ ഡിസൈൻ തയ്യാറാക്കാൻ തുടങ്ങുന്നതിനുമുമ്പ്, ഈ സിസ്റ്റങ്ങളുടെ ചില പോരായ്മകൾ നിങ്ങൾ കണക്കിലെടുക്കണം. ഈ ലേഖനം വായിക്കുമ്പോൾ, ഒരു പേജ് നിർമ്മിക്കുന്നതിനുള്ള നിയമങ്ങൾ വളരെ കർശനമാണെന്ന് നിങ്ങൾക്ക് ശ്രദ്ധിക്കാൻ കഴിയില്ല. എല്ലാത്തിനും അതിൻ്റേതായ ഉണ്ട് നിശ്ചിത വലിപ്പം. ഒരു ബ്ലോക്കിൻ്റെ വീതി മാറ്റുമ്പോൾ മറ്റുള്ളവ മാറ്റേണ്ടി വരും. എന്തായാലും എന്തെങ്കിലും ത്യാഗം ചെയ്യണം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് 1000px ഡിസൈൻ ഉണ്ടെങ്കിൽ നിങ്ങൾ എന്തുചെയ്യും, കൂടാതെ 960px പരമാവധി വീതി സൃഷ്ടിക്കാൻ 960 ഗ്രിഡ് നിങ്ങളെ അനുവദിക്കുന്നു... നിങ്ങൾക്ക് 1000px വേണം! ഒരു വലിയ കോഡ് മാറ്റമില്ലാതെ, ഇത് നടപ്പിലാക്കുക അസാധ്യമാണ്. ഉദാഹരണത്തിന്, ക്ലയൻ്റ് ഒരു വിശാലമായ സൈറ്റ് ആഗ്രഹിച്ചു അല്ലെങ്കിൽ ഡിസൈനർ നിങ്ങളുടെ നടപ്പാക്കലിനോട് വിയോജിക്കുന്നു. സ്പീക്കറുകളുടെ ഉയരം സംബന്ധിച്ച് മറ്റൊരു പ്രശ്നമുണ്ട്. മൂന്ന് നിരകൾക്ക് ഒരേ പശ്ചാത്തല വർണ്ണമുണ്ടെങ്കിൽ (നമ്മുടെ അടിക്കുറിപ്പ് പോലെ), ഈ നിരകൾക്ക് ഒരേ ഉയരം ഉണ്ടായിരിക്കേണ്ടത് ആവശ്യമാണ്. മറ്റൊരു പ്രധാന പോരായ്മ: ഉപയോഗം അധിക പാഡിംഗ്ഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നത് മുഴുവൻ ലേഔട്ടിൻ്റെയും നാശത്തിലേക്ക് നയിക്കുന്നു. ആവശ്യമുള്ളത് ചേർക്കാനും ഒന്നും നശിപ്പിക്കാതിരിക്കാനും, ചേർത്ത അളവുകൾക്ക് നിങ്ങൾ നഷ്ടപരിഹാരം നൽകേണ്ടതുണ്ട്. എങ്ങനെയെന്ന് ഇപ്പോൾ ഞാൻ കാണിച്ചുതരാം. നമുക്ക് മുകളിലെ ഭാഗം പൂർത്തിയാക്കാൻ തുടങ്ങാം.
4. മുകളിലെ വിഭാഗം
ആദ്യം, കോളം ഉയരത്തിൽ പ്രശ്നം പരിഹരിക്കാം - അത് ശരിയാക്കുക. അടുത്തതായി, ഒന്നിലും മറ്റേ ബ്ലോക്കിലും ശൂന്യമായ ഡിവികൾ സൃഷ്ടിക്കാം. അവയിൽ ഒരു ഡ്രോയിംഗ് അടങ്ങിയിരിക്കും അല്ലെങ്കിൽ ടെക്സ്റ്റ് വിവരങ്ങൾ. ഞങ്ങൾ ആന്തരിക പാഡിംഗുകൾ സജ്ജീകരിക്കില്ല കാരണം... ഗ്രിഡ് വീതിയുടെ അനുപാതം നിങ്ങൾക്ക് അസ്വസ്ഥമാക്കാം. p ടാഗുകൾക്കായി നമുക്ക് ഒരു ചെറിയ ബാഹ്യ ഇൻഡൻ്റ് സൃഷ്ടിക്കാം, അതുവഴി ടെക്സ്റ്റ് മനോഹരമായി കാണപ്പെടും.
IN ഈ സാഹചര്യത്തിൽശൈലിക്ക് ഒരു ഐഡിയെക്കാൾ ഒരു ക്ലാസ് സൃഷ്ടിക്കുന്നതാണ് നല്ലത്, കാരണം ഞങ്ങൾ ഇത് നിരവധി ബ്ലോക്കുകളിൽ പ്രയോഗിക്കേണ്ടതുണ്ട്. ആവശ്യമെങ്കിൽ, 2 എണ്ണത്തിൽ ഉയരം മാറ്റാനും ഇത് ഞങ്ങളെ അനുവദിക്കും. ഞങ്ങളുടെ ക്ലാസുകൾ ഇങ്ങനെയാണ്:
Div.topSection div (ബോർഡർ: സോളിഡ് 10px #e5e5e6; ഉയരം: 280px; ) div.topSection div p (മാർജിൻ: 10px; )
അടിപൊളി! നമുക്ക് എന്താണ് ലഭിച്ചതെന്ന് നോക്കാം:
പൂരിപ്പിക്കാൻ തയ്യാറാണോ? തുടർന്ന് ഇടത് ബ്ലോക്കിലേക്ക് കുറച്ച് വാചകം ചേർക്കുക, എന്നാൽ ഉയരം കവിയാതിരിക്കാൻ അത് അമിതമാക്കരുത്. വാസ്തവത്തിൽ, യഥാർത്ഥ പ്രോജക്റ്റുകളിൽ, ഡിസൈനർ ഇതെല്ലാം കണക്കാക്കണം (ബ്ലോക്ക് വലുപ്പം തൃപ്തിപ്പെടുത്തുന്ന പ്രതീകങ്ങളുടെ എണ്ണം); നിങ്ങൾ ഒരു ചിത്രം ശരിയായ ബ്ലോക്കിലേക്ക് തിരുകുന്നതിനുമുമ്പ്, നിങ്ങൾ ഇതിനകം അങ്ങനെ ചെയ്തിട്ടില്ലെങ്കിൽ, അതിൻ്റെ അളവുകൾ നിങ്ങൾ തീരുമാനിക്കേണ്ടതുണ്ട്. ഡിസൈൻ വികസനത്തിൻ്റെ തുടക്കത്തിലോ ഫയർബഗ് വഴിയോ ഇത് ചെയ്യാൻ കഴിയും. പരിശോധിക്കുക ക്ലിക്ക് ചെയ്യുക. നമുക്ക് ആവശ്യമുള്ള ഡിവിയിൽ ക്ലിക്ക് ചെയ്യുക. ലേഔട്ട് ടാബ് തിരഞ്ഞെടുക്കുക. ഇതിനുശേഷം നിങ്ങൾക്ക് ആവശ്യമായ എല്ലാ വിവരങ്ങളും നിങ്ങൾ കാണും. ഇനിപ്പറയുന്ന ചിത്രം നിങ്ങളെ സഹായിക്കും:
സ്ക്രീൻഷോട്ടിൽ, പോസ്റ്റർ 360x280 അളക്കുന്നു. ഒരു ചിത്രം കണ്ടെത്തി അതിനെ സ്റ്റൈൽ ചെയ്യുക:
Img#പോസ്റ്റർ (വീതി: 360px; ഉയരം: 280px; )
അത്രയേയുള്ളൂ! ടെംപ്ലേറ്റ് തയ്യാറാണ്. ഇപ്പോൾ അവശേഷിക്കുന്നത് യഥാർത്ഥ ഉള്ളടക്കം കൊണ്ട് പൂരിപ്പിച്ച് ഓൺലൈനിൽ പോസ്റ്റുചെയ്യുക എന്നതാണ്:
5. നിങ്ങളുടെ ഓപ്ഷനുകൾ അറിയുക
ഇപ്പോൾ എല്ലാം തയ്യാറാണ്, നമുക്ക് സംഗ്രഹിക്കാം. 960 ഗ്രിഡ് 15 മിനിറ്റിനുള്ളിൽ ഒരു ടെംപ്ലേറ്റ് റിവറ്റ് ചെയ്യാൻ ഞങ്ങളെ അനുവദിച്ചു. അടിപൊളിയാണോ? അതെ! ഞങ്ങൾ ഇത് IE6, IE7 എന്നിവയിൽ പരീക്ഷിച്ചിട്ടുണ്ടോ? ഇല്ല! നമുക്ക് വേണോ? ഇല്ല. ഇതൊരു തുടക്കം മാത്രമാണ്! ഇനി എന്ത് ചെയ്യണം? ഇപ്പോൾ നിങ്ങൾ അത് ഉപഭോക്താവിനെ കാണിക്കുകയും പ്രതികരണം കാണുകയും വേണം. അവൻ ഇതിൽ സംതൃപ്തനാണെങ്കിൽ, നമുക്ക് പരിശോധന ആരംഭിക്കാം, ഇല്ലെങ്കിൽ, ഉപഭോക്താവ് കൂടുതൽ സങ്കീർണ്ണമായ എന്തെങ്കിലും ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ആദ്യം മുതൽ അവൻ തന്നെ എല്ലാം എഴുതേണ്ടിവരും. ഞാൻ അത് വീണ്ടും ആവർത്തിക്കും. CSS ചട്ടക്കൂടുകൾ എല്ലാ പ്രശ്നങ്ങളും പരിഹരിക്കുന്നില്ല. ഇതൊക്കെയാണെങ്കിലും, ആയിരക്കണക്കിന് ഡെവലപ്പർമാർ അവ ഒരു സാധാരണ വെബ് ഡെവലപ്‌മെൻ്റ് ടൂളായി ഉപയോഗിക്കുന്നു, കാരണം ഏതൊരു ഉപകരണത്തെയും പോലെ, CSS ചട്ടക്കൂടുകൾക്ക് വിശാലമായ ആപ്ലിക്കേഷനായി അവരുടേതായ ഫീൽഡ് ഉണ്ട്. ഏത് സാഹചര്യത്തിലും, ഡിസൈൻ അഭ്യർത്ഥനകൾ വളരെ നിർദ്ദിഷ്ടമല്ലെങ്കിൽ (80% കേസുകൾ), 960 ഗ്രിഡ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് ധാരാളം സമയം ലാഭിക്കാം - സമയം പണമാണ്!
എല്ലാവർക്കും ഹായ്! ഇന്ന് നമ്മൾ സംസാരിക്കും എന്താണ് ഗ്രിഡ് സിസ്റ്റങ്ങൾ?അല്ലെങ്കിൽ വെറുതെ അഡാപ്റ്റീവ് ലേഔട്ടിൽ ഫ്ലെക്സിബിൾ ഗ്രിഡുകൾ.
ആദ്യം അത് എന്താണെന്ന് നിർവചിക്കാം ഗ്രിഡ് സിസ്റ്റം.
ഗ്രിഡ് സിസ്റ്റം- വരികളുടെയും നിരകളുടെയും ഒരു സിസ്റ്റം ഉപയോഗിച്ച് പേജ് ലേഔട്ട് നിയന്ത്രിക്കാൻ ഉപയോക്താവിനെ അനുവദിക്കുന്ന ക്ലാസ് അടിസ്ഥാന ശൈലികളുടെ ഒരു ശേഖരം.
നമുക്ക് ഒരു ബ്ലോഗ് പേജ് ഉണ്ടെന്ന് സങ്കൽപ്പിക്കുക. ഇത് 2 നിരകളായി തിരിച്ചിരിക്കുന്നു: പ്രധാന ഭാഗം ഇടതുവശത്തും സൈഡ്ബാർ വലതുവശത്തും. അത്തരമൊരു പേജിനായി ഒരു ഫ്ലെക്സിബിൾ ഗ്രിഡ് സൃഷ്ടിക്കാൻ ശ്രമിക്കാം.
ശരി, ആദ്യം നമ്മൾ അടിസ്ഥാനപരമായി എന്തെങ്കിലും ചെയ്യണം, പക്ഷേ ... htmlഅടയാളപ്പെടുത്തലുകൾ
ഇവിടെ നമുക്ക് മുഴുവൻ പേജും ഉൾക്കൊള്ളുന്ന ഒരു ബ്ലോക്ക് ഉണ്ട്, അതിൽ ഒരു ബ്ലോഗ് ഉള്ള ഒരു ബ്ലോക്ക് അടങ്ങിയിരിക്കുന്നു, അതിൽ 2 ബ്ലോക്കുകൾ അടങ്ങിയിരിക്കുന്നു: പേജിൻ്റെ പ്രധാന ഭാഗവും സൈഡ്ബാറും.
അതിനാൽ ഞങ്ങളുടെ മുഴുവൻ പേജും വലുപ്പമായിരിക്കും 960px. മുഴുവൻ ഗ്രിഡും 12 നിരകളായി തിരിച്ചിരിക്കുന്നു 69px. ഓരോന്നും. ബ്ലോഗ് ഭാഗം വിശാലമായിരിക്കും 900px. പേജിൻ്റെ പ്രധാന ഭാഗം ആയിരിക്കും 566px, സൈഡ്ബാർ - 331px.
ഇതാണ് അവസാനം നമുക്ക് ലഭിക്കുന്നത്
#പേജ് ( മാർജിൻ: 36px ഓട്ടോ; വീതി: 960px;
}
ബ്ലോഗ് ( മാർജിൻ: 0 ഓട്ടോ 53px; വീതി: 900px;
}
Blog.main ( ഫ്ലോട്ട്: ഇടത്; വീതി: 566px;
}
ബ്ലോഗ് .സൈഡ്ബാർ ( ഫ്ലോട്ട്: വലത്; വീതി: 331px;
}
എല്ലാം ശരിയാകും, പക്ഷേ, നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഇതെല്ലാം സ്റ്റാറ്റിക് ആണ്, പിക്സലുകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു. പേജ് ഏത് സ്‌ക്രീനിൽ കാണുന്നു എന്നതിനെ ആശ്രയിച്ച് ഞങ്ങളുടെ ഗ്രിഡിൻ്റെ വലുപ്പം മാറ്റണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, അതിനാൽ, ഞങ്ങൾ എല്ലാം സജ്ജീകരിക്കേണ്ടതുണ്ട്. ശതമാനം. നമുക്ക് ഇത് ചെയ്യാം.
ഇതിന് ഫോണ്ടുകളുടെ അതേ ഫോർമുലയുണ്ട്
ലക്ഷ്യം / സന്ദർഭം = ഫലം
നമുക്ക് മുഴുവൻ പേജിൻ്റെയും ഒരു ബ്ലോക്ക് പിക്സലിൽ നിന്ന് ശതമാനത്തിലേക്ക് പരിവർത്തനം ചെയ്യാം.
#പേജ് ( മാർജിൻ: 36px ഓട്ടോ; വീതി: 90%;
}
90%
തിരഞ്ഞെടുത്തതിനാൽ ഈ സാഹചര്യത്തിൽ നമുക്ക് അരികുകളിൽ ഇൻഡൻ്റുകളും ഉണ്ടാകും 5%
. എന്നിരുന്നാലും, നിങ്ങൾക്ക് മറ്റൊരു മൂല്യം തിരഞ്ഞെടുക്കാം.
ഞങ്ങൾ ഫോർമുല ഉപയോഗിക്കുന്നു: 900 / 960 = 0.9357
നമുക്ക് ഫലം ഗുണിക്കാം 100
പലിശ ലഭിക്കാൻ, ഞങ്ങൾ അത് ഞങ്ങളുടെ രജിസ്റ്റർ ചെയ്യും css.
ബ്ലോഗ് ( മാർജിൻ: 0 ഓട്ടോ 53px; വീതി: 93.75%;
}
കോളങ്ങളിലും ഇതേ കാര്യം ചെയ്യേണ്ടതുണ്ട്, പക്ഷേ സന്ദർഭം മാറിയത് ശ്രദ്ധിക്കുക. കാരണം നിരകൾ ഒരു ക്ലാസുള്ള ഒരു ബ്ലോക്കിനുള്ളിലാണ് .ബ്ലോഗ്, അപ്പോൾ അതായിരിക്കും സന്ദർഭം. നമുക്ക് കണക്ക് ചെയ്യാം.
566 ÷ 900 = .628888889
331 ÷ 900 = .367777778
ഞങ്ങൾ എല്ലാം ശതമാനങ്ങളാക്കി മാറ്റി സ്റ്റൈൽ ഷീറ്റിൽ എഴുതുന്നു.
Blog.main ( ഫ്ലോട്ട്: ഇടത്; വീതി: 62.8888889%;
}
ബ്ലോഗ് .സൈഡ്ബാർ ( ഫ്ലോട്ട്: വലത്; വീതി: 36.7777778%;
}
അത്രയേയുള്ളൂ! ഇപ്പോൾ ഞങ്ങൾക്ക് ഒരു ഫ്ലെക്സിബിൾ ഗ്രിഡ് ഉണ്ട്, അത് ലേഔട്ടിനായി ഉപയോഗിക്കാം.
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, എല്ലാം വളരെ ലളിതമാണ്. കാമ്പിൽ വഴക്കമുള്ള മെഷ്, ഒരു ഫ്ലെക്സിബിൾ ഫോണ്ട് പോലെ, അതേ സൂത്രവാക്യം ഇപ്പോഴും ഉണ്ട്, അത് ഓർക്കുമ്പോൾ, നിങ്ങൾക്ക് എളുപ്പത്തിൽ പ്രതികരിക്കുന്ന വെബ്സൈറ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും.
കുറിപ്പ്!നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഞങ്ങൾ വളരെ മികച്ചതാണ് നീണ്ട മൂല്യങ്ങൾശതമാനം. ചിലർ അവരെ വളയാൻ ഉപദേശിച്ചേക്കാം, എന്നാൽ നിങ്ങൾ ഇത് ഒരിക്കലും ചെയ്യരുത്! ഓർക്കുക!
എനിക്ക് അത്രയേയുള്ളൂ, നിങ്ങളുടെ ശ്രദ്ധയ്ക്കും വിജയകരമായ അഡാപ്റ്റീവ് ലേഔട്ടിനും നന്ദി!
ബൂട്ട്സ്ട്രാപ്പ് പോലുള്ള മൂന്നാം കക്ഷി ചട്ടക്കൂടുകൾ അവലംബിക്കാതെ തന്നെ ഉയർന്ന നിലവാരമുള്ള റെസ്‌പോൺസീവ് മാർക്ക്അപ്പ് സൃഷ്ടിക്കാൻ CSS ഗ്രിഡ് നിങ്ങളെ എങ്ങനെ അനുവദിക്കുന്നുവെന്ന് ഞങ്ങൾ നിങ്ങളോട് പറയും.
ചട്ടക്കൂടുകളേക്കാൾ നേറ്റീവ് ഗ്രിഡ് നിരവധി ഗുണങ്ങൾ വാഗ്ദാനം ചെയ്യുന്നു, പ്രത്യേകിച്ചും അവയിൽ ഏറ്റവും ജനപ്രിയമായ ബൂട്ട്സ്ട്രാപ്പുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ. വസ്തുതയ്ക്ക് നന്ദി ആധുനിക CSS JavaScript ആവശ്യമില്ലാതെ സങ്കീർണ്ണമായ മാർക്ക്അപ്പ് സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, കോഡ് വൃത്തിയുള്ളതും പരിപാലിക്കാൻ എളുപ്പവുമാണ്.
മാർക്ക്അപ്പ് ലളിതമാക്കാം
CSS ഗ്രിഡ് ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് മാറ്റിസ്ഥാപിക്കുന്നത് ഗുണം ചെയ്യും HTML കൂടുതൽ വൃത്തിയുള്ളതാണ്. ഉദാഹരണമായി, ഞങ്ങൾ ലേഔട്ട് ചെയ്യേണ്ട പേജിൻ്റെ ഒരു ചെറിയ ഭാഗം പരിഗണിക്കുക, അത് ഇതുപോലെ കാണപ്പെടുന്നു:
ബൂട്ട്സ്ട്രാപ്പ്
ആദ്യം, ബൂട്ട്സ്ട്രാപ്പിലെ ഈ പേജിൻ്റെ ഉദാഹരണ കോഡ് നോക്കാം.
ശ്രദ്ധിക്കേണ്ട ചില കാര്യങ്ങളുണ്ട്:
- ഓരോ വരിയും സ്വന്തം ഡിവിയിൽ സ്ഥിതിചെയ്യണം. - മാർക്ക്അപ്പ് (col-xs-2) സൃഷ്ടിക്കാൻ നിങ്ങൾ ക്ലാസ് പേരുകൾ ഉപയോഗിക്കണം. — ടെംപ്ലേറ്റ് വളരുകയും കൂടുതൽ സങ്കീർണ്ണമാവുകയും ചെയ്യുമ്പോൾ, HTML കോഡിൻ്റെ കാര്യത്തിലും ഇതുതന്നെ സംഭവിക്കും.
നമ്മൾ പ്രതികരണശേഷിയെക്കുറിച്ച് സംസാരിക്കുകയാണെങ്കിൽ, മാർക്ക്അപ്പ് കൂടുതൽ മോശമായി കാണപ്പെടും:
CSS ഗ്രിഡ്
ശുദ്ധമായ CSS-ലെ മാർക്ക്അപ്പിൻ്റെ അതേ ഉദാഹരണം നോക്കാം:
ഈ മാർക്ക്അപ്പ് വായിക്കാൻ വളരെ എളുപ്പമാണ്. ക്ലാസുകളുടെ അലങ്കോലങ്ങൾ ഇല്ലാതായി, ഡിവികളുടെ എണ്ണം കുറഞ്ഞു.
തീർച്ചയായും, പേജുമായി ബന്ധിപ്പിച്ചിരിക്കുന്ന ബൂട്ട്‌സ്‌ട്രാപ്പുമായുള്ള ഉദാഹരണത്തിൽ നിന്ന് വ്യത്യസ്തമായി, ഇവിടെ നിങ്ങൾ ശൈലികൾ സ്വയം വിവരിക്കേണ്ടതുണ്ട്:
കൂടുതൽ വഴക്കം
പൊരുത്തപ്പെടുത്താൻ നമുക്ക് പ്രവർത്തിക്കാം. ഉദാഹരണത്തിന്, ഇതിൽ നിന്ന് മെനു നീക്കം ചെയ്യാം മുകളിലെ നിരവേണ്ടി മൊബൈൽ സ്ക്രീനുകൾ. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, നമുക്ക് ഇത് മാറ്റാം:
CSS ഗ്രിഡ്
CSS ഗ്രിഡ് പുനർനിർമ്മിക്കുന്നത് വളരെ എളുപ്പമാണ്. നിങ്ങൾ ചെയ്യേണ്ടത് ഒരു മീഡിയ അന്വേഷണം ചേർക്കുകയും പേജ് ഘടകങ്ങൾക്ക് എന്ത് സംഭവിക്കണമെന്ന് വിവരിക്കുകയും ചെയ്യുക.
ഈ രീതിയിൽ, പേജ് പുനർരൂപകൽപ്പന ചെയ്യാൻ നിങ്ങൾ HTML തുറക്കേണ്ടതില്ല.
ബൂട്ട്സ്ട്രാപ്പ്
ഒരു ഡവലപ്പർക്ക് ബൂട്ട്സ്ട്രാപ്പ് ടെംപ്ലേറ്റിൽ എന്തെങ്കിലും മാറ്റം വരുത്തണമെങ്കിൽ, അവൻ HTML തന്നെ മാറ്റി തുടങ്ങണം. വാസ്തവത്തിൽ, നിങ്ങൾ മെനു നീക്കേണ്ടതുണ്ട്, അങ്ങനെ അത് HEADER-ന് മുകളിലാണ്.
ഈ സാഹചര്യത്തിൽ, മീഡിയ അന്വേഷണത്തിലെ ശൈലികളുടെ സ്വഭാവം മാറ്റുന്നത് പ്രവർത്തിക്കില്ല. ഇത് പരിഹരിക്കാൻ നിങ്ങൾ JavaScript അവലംബിക്കേണ്ടതുണ്ട്.
ഇനി 12 കോളം പരിധി
ഇതൊരു ഗുരുതരമായ പരിമിതിയാണെന്നല്ല, ചില സന്ദർഭങ്ങളിൽ ഇത് അസൌകര്യം ഉണ്ടാക്കുന്നു. മുതൽ ബൂട്ട്സ്ട്രാപ്പ് ഗ്രിഡ്അടിസ്ഥാനപരമായി 12 നിരകളായി തിരിച്ചിരിക്കുന്നു, വിഭജനത്തിൽ പ്രശ്നങ്ങൾ ഉണ്ടാകാം, ഉദാഹരണത്തിന്, 5, 7 അല്ലെങ്കിൽ 9 നിരകളായി.
CSS ഗ്രിഡ് നിങ്ങൾക്ക് ആവശ്യമുള്ളത്രയും നിരകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
ഗ്രിഡ്-ടെംപ്ലേറ്റ്-നിരകളുടെ പ്രോപ്പർട്ടി മൂല്യം സജ്ജീകരിച്ചാണ് ഇത് ചെയ്യുന്നത്:
വഴിയിൽ, ഇത് ഫ്ലെക്സ്ബോക്സ് ഉപയോഗിക്കുന്നു, ഇത് CSS വഴി മാർക്ക്അപ്പ് നിയന്ത്രിക്കുന്നത് എളുപ്പമാക്കുന്നു, എന്നാൽ ഇപ്പോൾ അത് ബീറ്റയ്ക്ക് പുറത്തായിട്ടില്ല.
ബ്രൗസർ പിന്തുണ
ഇത് എഴുതുമ്പോൾ, 75% ബ്രൗസറുകളും CSS ഗ്രിഡിനെ പിന്തുണയ്ക്കുന്നു.
ഇപ്പോൾ CSS ഗ്രിഡ് ഉപയോഗിക്കാൻ തുടങ്ങുന്നതിൽ നിന്ന് പല ഡവലപ്പർമാരെയും തടയാൻ ഒന്നുമില്ല, പക്ഷേ, നിർഭാഗ്യവശാൽ, എല്ലാ പ്രോജക്റ്റുകളും ഈ ലേഔട്ട് രീതി ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ തയ്യാറല്ല. എന്നിരുന്നാലും, ലിങ്ക്ഡ്ഇനിൽ നിന്നുള്ള മോർട്ടൻ റാൻഡ്-എറിക്‌സെൻ, മോസില്ലയിൽ നിന്നുള്ള ജെൻ സിമ്മൺസ് എന്നിവരെപ്പോലുള്ള നിരവധി അറിയപ്പെടുന്ന ഡവലപ്പർമാർ, പേജുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഈ സമീപനം ഭാവിയാണെന്ന് ബോധ്യപ്പെട്ടിട്ടുണ്ട്: ദൃശ്യ പ്രാതിനിധ്യം JavaScript ലോജിക്കിൽ നിന്ന് വേർപെടുത്തുകയും അതിൽ നിന്ന് സ്വതന്ത്രമായി പൊരുത്തപ്പെടുകയും വേണം.
ഡാനി മാർക്കോവ്
രൂപകൽപ്പന വളരെ ലളിതമാണ് - അതിൽ മധ്യഭാഗത്ത് വിന്യസിച്ചിരിക്കുന്ന ഒരു കണ്ടെയ്നർ അടങ്ങിയിരിക്കുന്നു, അതിനുള്ളിൽ ഞങ്ങൾക്ക് ഒരു തലക്കെട്ടുണ്ട്, ഒരു പ്രധാന വിഭാഗം, സൈഡ്ബാർഒരു നിലവറയും. CSS ഉം HTML ഉം കഴിയുന്നത്ര വൃത്തിയായി സൂക്ഷിക്കുമ്പോൾ നമ്മൾ പ്രവർത്തിപ്പിക്കേണ്ട പ്രധാന "ടെസ്റ്റുകൾ" ഇതാ:
ലേഔട്ടിൻ്റെ നാല് പ്രധാന ഭാഗങ്ങൾ സ്ഥാപിക്കുക.
പേജ് പ്രതികരണാത്മകമാക്കുക (സൈഡ്ബാർ ചെറിയ സ്‌ക്രീനുകളിലെ പ്രധാന ഉള്ളടക്കത്തിന് താഴെയാണ്).
തലക്കെട്ട് ഉള്ളടക്കം വിന്യസിക്കുക - ഇടത് നാവിഗേഷൻ, വലത് ബട്ടൺ.
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, താരതമ്യത്തിനായി, ഞങ്ങൾ എല്ലാം കഴിയുന്നത്ര ലളിതമാക്കി. ആദ്യ ടെസ്റ്റിൽ നിന്ന് തുടങ്ങാം.
ടെസ്റ്റ് 1: പേജ് വിഭാഗങ്ങൾ ലേഔട്ട് ചെയ്യുന്നു
ഫ്ലെക്സ്ബോക്സ് പരിഹാരം
ഡിസ്പ്ലേ ചേർക്കുക: കണ്ടെയ്നറിലേക്ക് ഫ്ലെക്സ് ചെയ്ത് ദിശ സജ്ജമാക്കുക കുട്ടികളുടെ ഘടകങ്ങൾലംബമായി. ഇത് എല്ലാ വിഭാഗങ്ങളെയും പരസ്പരം കീഴിലാക്കുന്നു.
ഇപ്പോൾ പ്രധാന വിഭാഗവും സൈഡ്ബാറും പരസ്പരം അടുത്ത് സ്ഥിതിചെയ്യുന്നുണ്ടെന്ന് ഉറപ്പാക്കേണ്ടതുണ്ട്. ഫ്ലെക്സ് കണ്ടെയ്നറുകൾ സാധാരണയായി ഏകപക്ഷീയമായതിനാൽ, ഞങ്ങൾ ചേർക്കേണ്ടതുണ്ട് അധിക ഘടകം.
തുടർന്ന് ഞങ്ങൾ ഈ ഘടകത്തിൻ്റെ ഡിസ്പ്ലേ സജ്ജമാക്കുന്നു: ഫ്ലെക്സും ഫ്ലെക്സ്-ദിശയും വിപരീത ദിശയിലേക്ക്.
പ്രധാന വിഭാഗത്തിൻ്റെയും സൈഡ്‌ബാറിൻ്റെയും അളവുകൾ സജ്ജമാക്കുക എന്നതാണ് അവസാന ഘട്ടം. പ്രധാന ഉള്ളടക്കം സൈഡ്‌ബാറിൻ്റെ വീതിയുടെ മൂന്നിരട്ടി ആയിരിക്കണം, അത് ഫ്ലെക്സോ ശതമാനമോ ഉപയോഗിച്ച് ചെയ്യാൻ എളുപ്പമാണ്.
നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, Flexbox എല്ലാം നന്നായി ചെയ്തു, എന്നാൽ ഞങ്ങൾക്ക് ധാരാളം CSS പ്രോപ്പർട്ടികൾ കൂടാതെ ഒരു അധിക HTML ഘടകവും ആവശ്യമാണ്. CSS ഗ്രിഡ് എങ്ങനെ പ്രവർത്തിക്കുമെന്ന് നോക്കാം.
CSS ഗ്രിഡ് പരിഹാരം
CSS ഗ്രിഡ് ഉപയോഗിക്കുന്നതിന് നിരവധി ഓപ്ഷനുകൾ ഉണ്ട്, എന്നാൽ ഞങ്ങളുടെ ആവശ്യങ്ങൾക്ക് ഏറ്റവും അനുയോജ്യമായ ഗ്രിഡ്-ടെംപ്ലേറ്റ്-ഏരിയാസ് സിൻ്റാക്സ് ഞങ്ങൾ ഉപയോഗിക്കും.
ആദ്യം ഞങ്ങൾ നാല് ഗ്രിഡ് ഏരിയകൾ നിർവചിക്കും, പേജിൻ്റെ ഓരോ വിഭാഗത്തിനും ഒന്ന്:
ഇപ്പോൾ നമുക്ക് ഞങ്ങളുടെ മെഷ് സജ്ജീകരിക്കാനും ഓരോ ഏരിയയുടെയും സ്ഥാനം നിർവചിക്കാനും കഴിയും. കോഡ് ആദ്യം വളരെ സങ്കീർണ്ണമായി തോന്നിയേക്കാം, എന്നാൽ നിങ്ങൾ ഗ്രിഡ് സിസ്റ്റവുമായി പരിചയപ്പെടുമ്പോൾ, അത് മനസ്സിലാക്കാൻ എളുപ്പമാകും.
കണ്ടെയ്നർ ( ഡിസ്പ്ലേ: ഗ്രിഡ്; /* ഞങ്ങളുടെ ഗ്രിഡിൻ്റെ നിരകളുടെ വലുപ്പവും എണ്ണവും നിർവചിക്കുക. fr യൂണിറ്റ് Flexbox പോലെ പ്രവർത്തിക്കുന്നു: നിരകൾ അവയുടെ മൂല്യങ്ങൾക്കനുസരിച്ച് നിരയിൽ ലഭ്യമായ ഇടം വിഭജിക്കുന്നു. ഞങ്ങൾക്ക് രണ്ട് നിരകൾ ഉണ്ടാകും - ആദ്യത്തേത് രണ്ടാമത്തേതിൻ്റെ മൂന്ന് മടങ്ങ് വലിപ്പം */ ഗ്രിഡ്-ടെംപ്ലേറ്റ് - കോളങ്ങൾ: 3fr 1fr /* ഗ്രിഡിലെ സ്ഥലങ്ങളിലേക്ക് ലിങ്ക് ചെയ്യുക, രണ്ടാമത്തെ വരി പ്രധാന വിഭാഗത്തിനും ഇടയിലുമാണ് സൈഡ്ബാർ */ ഗ്രിഡ്-ടെംപ്ലേറ്റ് ഏരിയകൾ: "ഹെഡർ ഹെഡർ" മെയിൻ സൈഡ്ബാർ" "ഫൂട്ടർ ഫൂട്ടർ"; /* ഗ്രിഡ് സെല്ലുകൾ തമ്മിലുള്ള അകലം 60 പിക്സലുകൾ ആയിരിക്കും */ ഗ്രിഡ്-ഗാപ്പ്: 60px; )
അത്രയേയുള്ളൂ! ഞങ്ങളുടെ ലേഔട്ട് ഇപ്പോൾ മുകളിലുള്ള ഘടനയെ പിന്തുടരും, ഞങ്ങൾ അത് സജ്ജീകരിച്ചിരിക്കുന്നു, അതിനാൽ ഞങ്ങൾക്ക് മാർജിനോ പാഡിംഗോ കൈകാര്യം ചെയ്യേണ്ടതില്ല.
ടെസ്റ്റ് 2. പേജ് റെസ്‌പോൺസീവ് ആക്കുന്നു
ഫ്ലെക്സ്ബോക്സ് പരിഹാരം
ഈ ഘട്ടം മുമ്പത്തേതുമായി കർശനമായി ബന്ധപ്പെട്ടിരിക്കുന്നു. ഒരു ഫ്ലെക്സ്ബോക്സ് പരിഹാരത്തിനായി, ഞങ്ങൾ ഫ്ലെക്സ്-ദിശ മാറ്റുകയും മാർജിൻ ക്രമീകരിക്കുകയും വേണം.
ഞങ്ങളുടെ പേജ് വളരെ ലളിതമാണ്, അതിനാൽ മീഡിയ അന്വേഷണത്തിൽ വളരെയധികം ജോലികൾ ഇല്ല, എന്നാൽ കൂടുതൽ സങ്കീർണ്ണമായ ലേഔട്ടിന് വളരെയധികം പുനർനിർമ്മാണം ആവശ്യമാണ്.
CSS ഗ്രിഡ് പരിഹാരം
ഞങ്ങൾ ഇതിനകം ഗ്രിഡ് ഏരിയകൾ നിർവചിച്ചിട്ടുള്ളതിനാൽ, മീഡിയ അന്വേഷണത്തിൽ അവയുടെ ക്രമം പുനർനിർവചിക്കേണ്ടതുണ്ട്. അതേ സ്പീക്കർ സെറ്റപ്പ് നമുക്ക് ഉപയോഗിക്കാം.
നാവിഗേഷൻ ലിസ്റ്റും ബട്ടണും ഇപ്പോൾ ശരിയായി വിന്യസിച്ചിരിക്കുന്നു. സാധനങ്ങൾ ഉള്ളിൽ വയ്ക്കുന്നത് മാത്രമാണ് അവശേഷിക്കുന്നത്
തലക്കെട്ട് nav (പ്രദർശനം: ഫ്ലെക്സ്; വിന്യസിക്കുക-ഇനങ്ങൾ: അടിസ്ഥാനരേഖ; )
രണ്ട് വരികൾ മാത്രം! ഒട്ടും മോശമല്ല. CSS ഗ്രിഡ് ഇത് എങ്ങനെ കൈകാര്യം ചെയ്യുന്നുവെന്ന് നോക്കാം.
CSS ഗ്രിഡ് പരിഹാരം
നാവിഗേഷനും ബട്ടണും വേർതിരിക്കുന്നതിന്, ഞങ്ങൾ ഡിസ്പ്ലേ: ഗ്രിഡ് ഹെഡറിലേക്ക് ചേർക്കുകയും രണ്ട് നിര ഗ്രിഡ് സജ്ജീകരിക്കുകയും വേണം. നമുക്കും രണ്ടെണ്ണം വേണ്ടിവരും അധിക വരികൾഎല്ലാം ഉചിതമായ അതിരുകൾക്കുള്ളിൽ സ്ഥാപിക്കാൻ CSS-ൽ.
നാവിഗേഷനിലെ സിംഗിൾ ലൈൻ ലിങ്കുകളെ സംബന്ധിച്ച്, CSS ഗ്രിഡ് ഉപയോഗിച്ച് ഇത് ശരിയായി ചെയ്യാൻ ഞങ്ങൾക്ക് കഴിഞ്ഞില്ല. ഞങ്ങളുടെ ഏറ്റവും മികച്ച ശ്രമം ഇങ്ങനെയാണ്:
ലേഔട്ടിൻ്റെ ഈ ഭാഗം CSS ഗ്രിഡ് നന്നായി കൈകാര്യം ചെയ്യുന്നില്ല എന്നത് വ്യക്തമാണ്, എന്നാൽ അതിൽ അതിശയിക്കാനില്ല - കണ്ടെയ്‌നറുകളുടെ വിന്യാസത്തിലാണ് ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്, അവയ്ക്കുള്ളിലെ ഉള്ളടക്കമല്ല. ഈ സംവിധാനം ഫിനിഷിംഗ് ടച്ചുകൾ ഇടാനുള്ളതല്ല.
നിഗമനങ്ങൾ
നിങ്ങൾ മുഴുവൻ ലേഖനവും വായിച്ചാൽ (അത് വലിയ ജോലി!), നിഗമനങ്ങൾ നിങ്ങളെ ആശ്ചര്യപ്പെടുത്തരുത്. യഥാർത്ഥത്തിൽ ഇല്ല മെച്ചപ്പെട്ട സംവിധാനം- ഫ്ലെക്സ്ബോക്സും സിഎസ്എസ് ഗ്രിഡും അവരുടേതായ രീതിയിൽ നല്ലതാണ്, അവ ഒരുമിച്ച് ഉപയോഗിക്കേണ്ടതാണ്, അല്ലാതെ പരസ്പരം ബദലായിട്ടല്ല.
ഈ ലേഖനത്തിൻ്റെ നിഗമനങ്ങളിൽ നേരിട്ട് എത്തിയ നിങ്ങളിൽ (വിഷമിക്കേണ്ട, ഞങ്ങളും അത് ചെയ്യും), താരതമ്യത്തിൻ്റെ ഒരു ദ്രുത സംഗ്രഹം ഇതാ:
ഒരു വലിയ ചിത്രം സൃഷ്ടിക്കുന്നതിന് CSS ഗ്രിഡ് മികച്ചതാണ്. ഈ സിസ്റ്റം പേജ് ലേഔട്ട് കൈകാര്യം ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു കൂടാതെ ക്രമരഹിതവും അസമമായതുമായ ഡിസൈനുകൾ കൈകാര്യം ചെയ്യാൻ പോലും കഴിയും.
ഘടകങ്ങളിൽ ഉള്ളടക്കം വിന്യസിക്കുന്നതിന് Flexbox മികച്ചതാണ്. ചെറിയ ഡിസൈൻ വിശദാംശങ്ങൾ സ്ഥാപിക്കാൻ ഈ സിസ്റ്റം ഉപയോഗിക്കുക.
2D ലേഔട്ടുകൾക്ക് (വരികളും നിരകളും) CSS ഗ്രിഡ് ഉപയോഗിക്കുക.
ഫ്ലെക്സ്ബോക്സ് ഒരു ഡയമൻഷനിൽ മാത്രം (വരികൾ അല്ലെങ്കിൽ നിരകൾ) മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു.
CSS ഗ്രിഡ് അല്ലെങ്കിൽ Flexbox മാത്രം ഉപയോഗിക്കുന്നതിന് ഒരു കാരണവുമില്ല. അവ പഠിച്ച് ഒരുമിച്ച് ഉപയോഗിക്കുക.
