CSS Grid എന്താണ്?
CSS Grid Layout ആധുനിക ബ്രൗസറുകളിൽ ഉൾനൽകിയ ഒരു ദ്വിമാന ലേഔട്ട് സിസ്റ്റം ആണ്. display: grid ഉപയോഗിച്ച് ഗ്രിഡ് കണ്ടൈനർ നിർവ്വചിക്കുക, പിന്നെ grid-template-columns ഉപയോഗിച്ച് കോളങ്ങൾ, grid-template-rows ഉപയോഗിച്ച് വരികൾ നിയന്ത്രിക്കുക. ഭിന്ന ഘടകങ്ങൾ (fr) ലഭ്യമായ ഇടം ആനുപാതികമായി വിതരണം ചെയ്യുന്നു. ചൈൽഡ് ഇനങ്ങൾ grid-column: span N, grid-row: span N ഉപയോഗിച്ച് ഒന്നിൽ കൂടുതൽ കോളം അല്ലെങ്കിൽ വരി ഉൾക്കൊള്ളാൻ കഴിയും.
CSS Grid ജനറേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം
-
നമ്പർ ഇൻപുട്ടുകൾ (ഓരോന്നിനും 1–12) ഉപയോഗിച്ച് കോളങ്ങളും വരികളും സജ്ജീകരിക്കുക.
-
വലുപ്പം നിയന്ത്രിക്കാൻ grid-template-columns, grid-template-rows ക്രമീകരിക്കുക (ഉദാ: 1fr 2fr, 200px auto).
-
സെല്ലുകൾക്കിടയിൽ ഇടവേള സജ്ജീകരിക്കുക (ഉദാ: 10px, 1rem).
-
തിരഞ്ഞെടുക്കാൻ പ്രിവ്യൂവിൽ ഏതെങ്കിലും സെൽ ക്ലിക്ക് ചെയ്യുക (ഓറഞ്ച് ആകുന്നു).
-
സെൽ സ്പാൻ പാനലിൽ col-span, row-span സജ്ജീകരിക്കുക, പിന്നെ പ്രയോഗിക്കുക ക്ലിക്ക് ചെയ്യുക. സ്പാൻ സെല്ലുകൾ പച്ചയാകുന്നു.
-
ഔട്ട്പുട്ട് ഫോർമാറ്റ് മാറ്റാൻ CSS അല്ലെങ്കിൽ HTML ടാബ് ക്ലിക്ക് ചെയ്യുക, പിന്നെ ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്തുക.
-
പുതിയ 3×3 ഗ്രിഡ് ഉപയോഗിച്ച് വീണ്ടും ആരംഭിക്കാൻ എല്ലാം റീസെറ്റ് ചെയ്യുക ക്ലിക്ക് ചെയ്യുക.