CSS ഗ്രിഡ് ജനറേറ്റർ
നിങ്ങളുടെ കോളങ്ങളും റോകളും സജ്ജമാക്കുക, ഐറ്റങ്ങൾ സ്ഥാപിക്കാൻ സെല്ലുകളിലൂടെ വലിക്കുക, ഒറ്റ ക്ലിക്കിൽ അനുയോജ്യമായ HTML-നൊപ്പം ഗ്രിഡ് CSS പകർപ്പ് ചെയ്യുക.
നിങ്ങളുടെ ഗ്രിഡ് നിങ്ങളുടെ ബ്രൗസറിൽ തന്നെയാണ് നിർമ്മിക്കുന്നത്. നിങ്ങൾ ഇവിടെ സജ്ജീകരിക്കുന്നതൊന്നും BroBroGo-ലേക്ക് അപ്ലോഡ് ചെയ്യില്ല.
പതിവ് ചോദ്യങ്ങൾ
ഗ്രിഡിൽ ഞാൻ എങ്ങനെയാണ് ഐറ്റങ്ങൾ സ്ഥാപിക്കുക?
ഒരു ചതുരം അടയാളപ്പെടുത്താൻ സെല്ലുകളിലൂടെ അമർത്തി വലിക്കുക — നിങ്ങൾ വിടുമ്പോൾ അത് ആ കോളങ്ങളിലും റോകളിലും വ്യാപിച്ചുകിടക്കുന്ന ഒരു ചൈൽഡ് എലമെന്റായി മാറും. നിങ്ങൾ വരയ്ക്കുന്ന ഓരോ ഐറ്റത്തിനും CSS-ൽ സ്വന്തമായി grid-column, grid-row റൂളും HTML-ൽ അനുയോജ്യമായ ഒരു div-ഉം ലഭിക്കും. ഐറ്റങ്ങൾ പരസ്പരം ഓവർലാപ്പ് ചെയ്തേക്കാം, പിന്നീട് വരച്ചത് മുകളിൽ ഇരിക്കും; ഒരു ഐറ്റം നീക്കം ചെയ്യാൻ അതിലെ × ഉപയോഗിക്കുക.
കോളങ്ങൾക്കും റോകൾക്കും വ്യത്യസ്ത വലുപ്പങ്ങൾ നൽകാമോ?
അതെ. ഓരോ ട്രാക്കിനും സ്വന്തമായി വലുപ്പമുള്ള ബോക്സ് ഉണ്ട്, നിങ്ങൾക്ക് അവിടെ ഏത് ഗ്രിഡ് മൂല്യവും ടൈപ്പ് ചെയ്യാം — 1fr, 200px, auto, min-content അല്ലെങ്കിൽ minmax(120px, 1fr). ഒരേ വലുപ്പം പങ്കിടുന്ന ട്രാക്കുകൾ repeat() ലേക്ക് ചുരുങ്ങുന്നു, അതിനാൽ ഔട്ട്പുട്ട് ചെറുതായിരിക്കും. കോളം ഗ്യാപ്പും റോ ഗ്യാപ്പും വെവ്വേറെയാണ് സജ്ജീകരിച്ചിരിക്കുന്നത്, അവ പൊരുത്തപ്പെടുമ്പോൾ ഒരൊറ്റ ഗ്യാപ്പിലേക്ക് ചുരുങ്ങുന്നു.
സൃഷ്ടിച്ച കോഡ് ഞാൻ എന്താണ് ചെയ്യേണ്ടത്?
CSS-ഉം HTML-ഉം വശങ്ങളിലായി പകർപ്പ് ചെയ്യുക. HTML നിങ്ങൾക്ക് ഓരോ ഐറ്റത്തിനും ഓരോ div ഉള്ള കണ്ടെയ്നർ നൽകുന്നു, കൂടാതെ CSS ഗ്രിഡ് നിർവചിക്കുകയും ഓരോ ഐറ്റത്തെയും വിന്യസിക്കുകയും ചെയ്യുന്നു. ഇവ രണ്ടും നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് പേസ്റ്റ് ചെയ്യുക, ഇവിടെ നിങ്ങൾ വരച്ച അതേ ലേഔട്ട് നിങ്ങൾക്ക് ലഭിക്കും.