CSS ഗ്രിഡ് ജനറേറ്റർ

CSS ഗ്രിഡ് ലേഔട്ട് രൂപകൽപ്പന

CSS ഗ്രിഡ് ലേഔട്ട് എന്നത് വെബ് പേജുകളിൽ രണ്ട് ഡൈമൻഷനുകളിലായി (കോളങ്ങളും റോകളും) എലമെന്റുകൾ ക്രമീകരിക്കാൻ സഹായിക്കുന്ന ശക്തമായ ഒരു സംവിധാനമാണ്. ഈ ലേഔട്ട് ഘടന ലളിതമായി രൂപകൽപ്പന ചെയ്യാനും ആവശ്യമായ കോഡ് സ്വയം എഴുതാതെ തന്നെ ലഭ്യമാക്കാനും CSS ഗ്രിഡ് ജനറേറ്റർ സഹായിക്കുന്നു. ഈ ടൂളിലൂടെ കോളങ്ങളുടെയും റോകളുടെയും എണ്ണം നിശ്ചയിക്കാനും, അവയുടെ വലുപ്പവും അവ തമ്മിലുള്ള ഗ്യാപ്പും ക്രമീകരിക്കാനും സാധിക്കും. കൂടാതെ, ഗ്രിഡ് സെല്ലുകളിലൂടെ മൗസ് അമർത്തി വലിച്ചുകൊണ്ട് (drag) ഐറ്റങ്ങൾ സ്ഥാപിക്കാനും അവയ്ക്കുള്ള HTML, CSS കോഡുകൾ തൽസമയം നിർമ്മിക്കാനും ഈ ടൂൾ സഹായിക്കുന്നു.

ഇൻപുട്ടുകളും അവയുടെ പരിധികളും

ഗ്രിഡ് ലേഔട്ട് നിർമ്മിക്കുന്നതിനായി താഴെ പറയുന്ന ഇൻപുട്ടുകൾ ടൂളിൽ നൽകേണ്ടതുണ്ട്:

• കോളങ്ങൾ: 1 മുതൽ 12 വരെയുള്ള സംഖ്യകൾ നൽകാം.
• റോകൾ: 1 മുതൽ 12 വരെയുള്ള സംഖ്യകൾ നൽകാം.
• കോളം ഗ്യാപ്പ്: 0px മുതൽ 48px വരെയുള്ള പരിധിയിൽ ക്രമീകരിക്കാം.
• റോ ഗ്യാപ്പ്: 0px മുതൽ 48px വരെയുള്ള പരിധിയിൽ ക്രമീകരിക്കാം.
• കോളം വലുപ്പങ്ങൾ: 1fr, 200px, auto, min-content, അല്ലെങ്കിൽ minmax(120px, 1fr) പോലുള്ള സാധുവായ ഏത് CSS ഗ്രിഡ് മൂല്യവും നൽകാം.
• റോ വലുപ്പങ്ങൾ: കോളങ്ങളെപ്പോലെ തന്നെ 1fr, 200px, auto, min-content, അല്ലെങ്കിൽ minmax(120px, 1fr) തുടങ്ങിയ മൂല്യങ്ങൾ നൽകാവുന്നതാണ്.
• ഐറ്റങ്ങളുടെ സ്ഥാനം: ഗ്രിഡ് സെല്ലുകളിലൂടെ മൗസ് അമർത്തി വലിച്ച് ചതുരാകൃതിയിലുള്ള ഭാഗം അടയാളപ്പെടുത്തി ഐറ്റങ്ങൾ സ്ഥാപിക്കാം.

ഔട്ട്പുട്ട് കോഡുകൾ

രൂപകൽപ്പന പൂർത്തിയാകുമ്പോൾ ടൂൾ രണ്ട് തരത്തിലുള്ള ഔട്ട്പുട്ടുകൾ നൽകുന്നു:

1. CSS: ഗ്രിഡ് കണ്ടെയ്നറിനും അതിൽ സ്ഥാപിച്ചിട്ടുള്ള ഓരോ ഐറ്റത്തിനും ആവശ്യമായ CSS കോഡ്.
2. HTML: ഗ്രിഡ് കണ്ടെയ്നറും അതിനുള്ളിൽ സ്ഥാപിച്ചിട്ടുള്ള ഓരോ ഐറ്റത്തിനുമുള്ള div എലമെന്റുകളും അടങ്ങിയ HTML കോഡ്.

പ്രവർത്തന നിയമങ്ങളും പ്രത്യേകതകളും

• ഗ്രിഡ് സെല്ലുകളിലൂടെ അമർത്തി വലിച്ച് മൗസ് റിലീസ് ചെയ്യുമ്പോൾ, തിരഞ്ഞെടുക്കപ്പെട്ട കോളങ്ങളിലും റോകളിലും വ്യാപിച്ചുകിടക്കുന്ന ഒരു ചൈൽഡ് എലമെന്റ് നിർമ്മിക്കപ്പെടുന്നു.
• ഇങ്ങനെ വരയ്ക്കുന്ന ഓരോ ഐറ്റത്തിനും CSS-ൽ സ്വന്തമായി grid-column, grid-row റൂളുകളും HTML-ൽ അനുയോജ്യമായ ഒരു div-ഉം ലഭിക്കുന്നു.
• ഐറ്റങ്ങൾ പരസ്പരം ഓവർലാപ്പ് ചെയ്യാവുന്നതാണ്. പിന്നീട് വരയ്ക്കുന്ന ഐറ്റം ആദ്യം വരച്ചതിന് മുകളിലായിരിക്കും ഇരിക്കുക.
• ഒരു ഐറ്റം നീക്കം ചെയ്യാൻ അതിലുള്ള "×" ചിഹ്നത്തിൽ ക്ലിക്ക് ചെയ്താൽ മതിയാകും.
• ഓരോ കോളം അല്ലെങ്കിൽ റോ ട്രാക്കിനും സ്വന്തമായി വലുപ്പം നൽകാനുള്ള ബോക്സ് ഉണ്ട്. ഒരേ വലുപ്പമുള്ള ട്രാക്കുകൾ ഔട്ട്പുട്ട് CSS-ൽ repeat() എന്നതിലേക്ക് ചുരുങ്ങുന്നു.
• കോളം ഗ്യാപ്പും റോ ഗ്യാപ്പും വെവ്വേറെയാണ് സജ്ജീകരിക്കുന്നത്. എന്നാൽ ഇവ രണ്ടിന്റെയും മൂല്യങ്ങൾ തുല്യമാകുമ്പോൾ ഔട്ട്പുട്ട് CSS-ൽ ഇത് ഒരൊറ്റ gap പ്രോപ്പർട്ടിയായി ചുരുങ്ങുന്നു.
• ഈ ടൂളിൽ പരമാവധി 16 ഐറ്റങ്ങൾ വരെ മാത്രമേ പിന്തുണയ്ക്കൂ.
• ട്രാക്ക് വലുപ്പത്തിനായി not-a-grid-track പോലുള്ള അസാധുവായ മൂല്യങ്ങൾ നൽകിയാൽ ഇൻപുട്ട് ഫീൽഡ് അസാധുവായി അടയാളപ്പെടുത്തുമെങ്കിലും, ഔട്ട്പുട്ട് CSS-ൽ അവസാനമായി നൽകിയ സാധുവായ മൂല്യം നിലനിർത്തും.
• "ഐറ്റങ്ങൾ ഒഴിവാക്കുക" എന്ന ഓപ്ഷൻ ഉപയോഗിച്ചാൽ HTML കണ്ടെയ്നർ പൂർണ്ണമായും ശൂന്യമാവുകയും ഐറ്റങ്ങളുടെ എണ്ണം 0 ആകുകയും ചെയ്യും.
• "ഐറ്റം ചേർക്കുക" എന്ന ഓപ്ഷൻ ഒരു HTML ഐറ്റം നിർമ്മിക്കുന്നു.

ലേഔട്ട് പ്രീസെറ്റുകൾ

വേഗത്തിലുള്ള രൂപകൽപ്പനയ്ക്കായി ചില ലേഔട്ട് മാതൃകകൾ ടൂളിൽ ലഭ്യമാക്കിയിട്ടുണ്ട്:

• സൈഡ്ബാർ: പ്രധാന ഉള്ളടക്കത്തിനൊപ്പം വശങ്ങളിൽ സൈഡ്ബാർ നൽകാനുള്ള ലേഔട്ട്.
• ഹെഡറും ഫൂട്ടറും: മുകളിലും താഴെയുമായി ഹെഡറും ഫൂട്ടറും അടങ്ങുന്ന ലേഔട്ട്.
• ഗാലറി: ചിത്രങ്ങളും മറ്റും പ്രദർശിപ്പിക്കാൻ അനുയോജ്യമായ ലേഔട്ട്. ഗാലറി പ്രീസെറ്റ് തിരഞ്ഞെടുക്കുമ്പോൾ 3 കോളങ്ങളും, 2 റോകളും, 3 ഐറ്റങ്ങളും നിർമ്മിക്കപ്പെടുന്നു.
• ഡാഷ്‌ബോർഡ്: വിവരങ്ങളും ഗ്രാഫുകളും ക്രമീകരിക്കാൻ സഹായിക്കുന്ന ഡാഷ്‌ബോർഡ് ലേഔട്ട്.

ഡാറ്റാ പ്രോസസ്സിംഗും സ്വകാര്യതയും

നിങ്ങളുടെ ഗ്രിഡ് നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെയാണ് നിർമ്മിക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്നതൊന്നും BroBroGo-ലേക്ക് അപ്‌ലോഡ് ചെയ്യില്ല.

---

പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ (FAQ)

ഗ്രിഡിൽ ഞാൻ എങ്ങനെയാണ് ഐറ്റങ്ങൾ സ്ഥാപിക്കുക?

ഒരു ചതുരം അടയാളപ്പെടുത്താൻ സെല്ലുകളിലൂടെ അമർത്തി വലിക്കുക — നിങ്ങൾ വിടുമ്പോൾ അത് ആ കോളങ്ങളിലും റോകളിലും വ്യാപിച്ചുകിടക്കുന്ന ഒരു ചൈൽഡ് എലമെന്റായി മാറും. നിങ്ങൾ വരയ്ക്കുന്ന ഓരോ ഐറ്റത്തിനും CSS-ൽ സ്വന്തമായി grid-column, grid-row റൂളും HTML-ൽ അനുയോജ്യമായ ഒരു div-ഉം ലഭിക്കും. ഐറ്റങ്ങൾ പരസ്പരം ഓവർലാപ്പ് ചെയ്തേക്കാം, പിന്നീട് വരച്ചത് മുകളിൽ ഇരിക്കും; ഒരു ഐറ്റം നീക്കം ചെയ്യാൻ അതിലെ × ഉപയോഗിക്കുക.

കോളങ്ങൾക്കും റോകൾക്കും വ്യത്യസ്ത വലുപ്പങ്ങൾ നൽകാമോ?

അതെ. ഓരോ ട്രാക്കിനും സ്വന്തമായി വലുപ്പമുള്ള ബോക്സ് ഉണ്ട്, നിങ്ങൾക്ക് അവിടെ ഏത് ഗ്രിഡ് മൂല്യവും ടൈപ്പ് ചെയ്യാം — 1fr, 200px, auto, min-content അല്ലെങ്കിൽ minmax(120px, 1fr). ഒരേ വലുപ്പം പങ്കിടുന്ന ട്രാക്കുകൾ repeat() ലേക്ക് ചുരുങ്ങുന്നു, അതിനാൽ ഔട്ട്പുട്ട് ചെറുതായിരിക്കും. കോളം ഗ്യാപ്പും റോ ഗ്യാപ്പും വെവ്വേറെയാണ് സജ്ജീകരിച്ചിരിക്കുന്നത്, അവ പൊരുത്തപ്പെടുമ്പോൾ ഒരൊറ്റ ഗ്യാപ്പിലേക്ക് ചുരുങ്ങുന്നു.

സൃഷ്ടിച്ച കോഡ് ഞാൻ എന്താണ് ചെയ്യേണ്ടത്?

CSS-ഉം HTML-ഉം വശങ്ങളിലായി പകർപ്പ് ചെയ്യുക. HTML നിങ്ങൾക്ക് ഓരോ ഐറ്റത്തിനും ഓരോ div ഉള്ള കണ്ടെയ്നർ നൽകുന്നു, കൂടാതെ CSS ഗ്രിഡ് നിർവചിക്കുകയും ഓരോ ഐറ്റത്തെയും വിന്യസിക്കുകയും ചെയ്യുന്നു. ഇവ രണ്ടും നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് പേസ്റ്റ് ചെയ്യുക, ഇവിടെ നിങ്ങൾ വരച്ച അതേ ലേഔട്ട് നിങ്ങൾക്ക് ലഭിക്കും.