CSS Grid जनरेटर

इस टूल के बारे में

CSS Grid Generator column और row की संख्या, gaps, वैकल्पिक custom grid-template values और item alignment से grid layouts बनाता है, लाइव प्रीव्यू और कॉपी के लिए तैयार CSS के साथ।

इस्तेमाल कैसे करें

1. columns और rows की संख्या सेट करें।
2. column और row gaps एडजस्ट करें।
3. चाहें तो 200px 1fr 1fr जैसे custom templates डालें।
4. justify-items और align-items चुनें, फिर Copy CSS पर क्लिक करें।

जानने योग्य बातें

• fr unit ख़ाली जगह बाँटती है: 1fr 2fr में दूसरा column पहले से दोगुना चौड़ा होता है।
• repeat(3, 1fr) तीन बराबर columns का छोटा रूप है।
• column-gap और row-gap tracks के बीच के gutters सेट करते हैं।
• Grid two-dimensional है, जो rows और columns को एक साथ नियंत्रित करता है।
• repeat(auto-fit, minmax(200px, 1fr)) बिना media queries के responsive grid बनाता है।

पूरी तरह आपके ब्राउज़र में चलता है — आप जो भी डालते हैं, वह न अपलोड होता है न सेव।

अक्सर पूछे जाने वाले सवाल