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

നിരകളും വരികളും വിടവുകളും ദൃശ്യപരമായി നിർവ്വചിക്കുക, തുടർന്ന് നിങ്ങളുടെ ലേഔട്ടിനായി CSS ഗ്രിഡ് ടെംപ്ലേറ്റ് കോഡ് പകർത്തുക.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

നിരകളും വരികളും വിടവുകളും ദൃശ്യപരമായി നിർവ്വചിക്കുക, തുടർന്ന് CSS ഗ്രിഡ് ടെംപ്ലേറ്റ് കോഡ് പകർത്തുക.
നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു
സൗജന്യമായി ഉപയോഗിക്കാം

എങ്ങനെ ഉപയോഗിക്കാം

നിരയുടെയും വരികളുടെയും എണ്ണം സജ്ജീകരിക്കുക.
ട്യൂൺ വിടവും ട്രാക്ക് വലുപ്പവും.
ഗ്രിഡ് CSS പകർത്തുക.

How this tool works

നിരയുടെയും വരികളുടെയും എണ്ണം സജ്ജീകരിക്കുക.
ട്യൂൺ വിടവും ട്രാക്ക് വലുപ്പവും.
ഗ്രിഡ് CSS പകർത്തുക.

Recommended settings

ആദ്യം ഡിഫോൾട്ട് ഓപ്ഷനുകൾ ഉപയോഗിക്കുക, തുടർന്ന് ആവശ്യമെങ്കിൽ ക്രമീകരിക്കുക

Supported formats

Text / on-page input

File size and limits

വളരെ സങ്കീർണ്ണമായ മൾട്ടി-ലെയർ പ്രിവ്യൂകൾ പഴയ ഫോണുകളിൽ മന്ദഗതിയിലായേക്കാം.

Privacy

നിറവും CSS ജനറേറ്ററുകളും പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു. പ്രിവ്യൂകളും പരിവർത്തനങ്ങളും ഒരിക്കലും നിങ്ങളുടെ ശൈലികൾ അപ്‌ലോഡ് ചെയ്യുന്നില്ല.

Common use cases

നിങ്ങൾക്ക് ആവശ്യമുള്ളപ്പോഴെല്ലാം CSS ഗ്രിഡ് ജനറേറ്റർ ഉപയോഗിക്കുക: നിരകളും വരികളും വിടവുകളും ദൃശ്യപരമായി നിർവചിക്കുക, തുടർന്ന് CSS ഗ്രിഡ് ടെംപ്ലേറ്റ് കോഡ് പകർത്തുക.

Troubleshooting

ഒട്ടിച്ചതിന് ശേഷം പ്രിവ്യൂ വ്യത്യസ്തമായി കാണപ്പെടുന്നു

നിങ്ങളുടെ പേജിൽ മത്സരിക്കുന്ന CSS പരിശോധിക്കുക (റീസെറ്റുകൾ, പാരമ്പര്യ നിറങ്ങൾ). ജനറേറ്റ് ചെയ്ത നിയമം ആദ്യം ഒരു ഒറ്റപ്പെട്ട സ്റ്റൈൽഷീറ്റിലേക്ക് പകർത്തുക.

പതിവ് ചോദ്യങ്ങൾ

ഇത് എൻ്റെ CSS അപ്‌ലോഡ് ചെയ്യുന്നുണ്ടോ?

നമ്പർ. ജനറേറ്ററുകളും കൺവെർട്ടറുകളും തത്സമയ പ്രിവ്യൂ ഉപയോഗിച്ച് നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു.

എനിക്ക് ഒരു അക്കൗണ്ട് ആവശ്യമുണ്ടോ?

ഇല്ല. ടൂൾ തുറക്കുക, നിയന്ത്രണങ്ങൾ മാറ്റുക, CSS പകർത്തുക.