कोड, डेटा और QR टूल

CSS Grid बिल्डर

समान column और row की संख्या तथा उनके बीच का gap तय करें। CSS कॉपी करने से पहले layout देखें।

ब्राउज़र में ही कामखाता बनाने की ज़रूरत नहींगोपनीयता विवरण ↗

CSS Grid बिल्डर

Live grid preview

Preview और CSS अपडेट करने के लिए grid मान बदलें।

उपयोग कैसे करें

उपयोग कैसे करें

  1. 1–12 column और row तथा 0–64 pixel gap चुनें।
  2. Live grid preview देखें।
  3. बना हुआ CSS अपनी stylesheet में कॉपी करें।

आम layout का live preview

Column, row या pixel gap बदलते ही preview अपडेट होता है। हर row-column स्थान पर क्रमांक वाला cell दिखता है।

स्पष्ट सीमाओं वाला कॉपी करने योग्य CSS

Output समान minmax(0, 1fr) column और कम-से-कम 64 px ऊँचे row उपयोग करता है। यह named grid area, असमान track आकार, breakpoint या अलग-अलग grid-item स्थान नहीं बनाता।

Browser में बनता है

Preview और CSS इसी page में स्थानीय रूप से बनते हैं। कुछ भी server को नहीं भेजा जाता।

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

आप यह भी जानना चाहेंगे

क्या हर column की चौड़ाई अलग कर सकता हूँ?

नहीं। सभी column समान fractional width लेते हैं। अलग track आकार के लिए बने CSS को संपादित करें।

क्या grid area को नाम दे सकता हूँ?

नहीं। यह सीमित संस्करण केवल समान row, column और gap तय करता है।

Gap की इकाई क्या है?

0–64 के बीच पूर्णांक CSS pixel।