CSS Grid प्लेग्राउंड

CSS grid एक element को two-dimensional layout में बदल देता है। आप container पर display: grid set करते हैं, grid-template-columns और grid-template-rows से column और row tracks define करते हैं, और browser हर child को resulting cells में place करता है। उदाहरण के लिए, grid-template-columns: repeat(3, 1fr) तीन equal columns बनाता है, और children उनमें left-to-right, top-to-bottom flow करते हैं। पुराने float या flexbox layouts के विपरीत, grid एक साथ rows और columns lay out करता है, इसलिए आप एक container property से दोनों axes control करते हैं।

Container पर display: grid add करें, फिर उसके tracks describe करें। Minimum एक line है: display: grid; grid-template-columns: 1fr 1fr; — जो दो equal columns देता है। वहाँ से explicit rows के लिए grid-template-rows, spacing के लिए gap, और किसी child को cells में stretch करने के लिए grid-column: span 2 जैसे per-item rules add करें। grid shorthand property rows, columns और areas को एक declaration में combine कर सकती है, लेकिन ज़्यादातर developers grid-template-columns, gap और alignment अलग-अलग set करते हैं क्योंकि यह ज़्यादा clearly पढ़ता है। यह generator आपके लिए वो rules लिखता है।

ये हर column और row track का size define करते हैं। grid-template-columns: 200px 1fr 1fr एक fixed 200px पहला column और दो flexible columns बनाता है जो बाकी space share करते हैं। grid-template-rows: auto 1fr content-sized पहली row और एक दूसरी row set करता है जो remaining height fill करती है। list में हर value एक track है, और values की संख्या से grid में कितने explicit columns या rows हैं यह तय होता है। यह generator दोनों lists build करता है जैसे-जैसे आप tracks add और edit करते हैं, live preview real-time में update होता है।

fr 'fraction' unit है — यह leftover space split करता है, इसलिए repeat(3, 1fr) तीन equal width के columns बनाता है। repeat(n, value) shorthand है जो एक track pattern n बार repeat करता है, इसलिए repeat(4, 1fr) वही है जो 1fr 1fr 1fr 1fr है। minmax(min, max) एक ऐसा track set करता है जो min से कम नहीं सिकुड़ता या max से ज़्यादा नहीं बढ़ता; minmax(150px, 1fr) एक column को कम से कम 150px wide रखता है जबकि उसे expand करने देता है। इन्हें combine करें — repeat(auto-fit, minmax(150px, 1fr)) — एक ऐसे grid के लिए जो container width बदलने पर खुद columns add और remove करता है।

repeat() को auto-fit (या auto-fill) और minmax() के साथ use करें ताकि grid automatically reflow हो: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))। हर column कम से कम 200px wide रहता है और browser container के हिसाब से जितने fit हो सकते हैं उतने fit करता है, narrow screens पर fewer columns और wide screens पर ज़्यादा। इस generator को Responsive mode पर switch करें, minimum cell width set करें, और result copy करें। यह एक fluid card grid बनाने का सबसे simple तरीका है जो mobile से desktop तक बिना कोई media query लिखे adapt करता है।

grid-template-areas आपको regions को नाम देने और layout को ASCII art की तरह draw करने देता है। आप हर child को grid-area से एक नाम देते हैं, फिर grid को इस तरह map करते हैं: grid-template-areas: 'header header' 'sidebar main' 'footer footer'। किसी नाम को cells में repeat करने से वह area उन्हें span करता है, और dot (.) एक cell empty छोड़ता है। यह classic page shells — header, sidebar, main, footer — बनाने का सबसे readable तरीका है क्योंकि template layout जैसा दिखता है। यहाँ Areas tab template और आपके name किए हर region के लिए matching grid-area rules लिखता है।

2x2 grid के लिए, दो columns और दो rows set करें: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; और चार items place करें। 3-column grid के लिए, grid-template-columns: repeat(3, 1fr) use करें और items को जितनी rows चाहिए उतनी में flow करने दें। इस tool में आप बस column और row counts set करते हैं और preview तुरंत update होता है — कोई typing नहीं। Generator automatically repeat() shorthand handle करता है जब neighbouring tracks same size के हों।

12-column grid एक design convention है जिसे Bootstrap और Foundation ने popularize किया, जो page को twelve equal columns में divide करता है। Twelve इसलिए काम करता है क्योंकि यह cleanly halves, thirds, quarters और sixths में divide होता है। एक component कोई भी whole number of columns span कर सकता है: 6 half के लिए, 4 third के लिए, 3 quarter के लिए। CSS grid से आप इसे एक line में recreate करते हैं: grid-template-columns: repeat(12, 1fr), और children को size करने के लिए grid-column: span 4 use करते हैं। यहाँ columns को 12 set करें और बिना किसी Bootstrap dependency के plain CSS में classic framework grid पाएं।

Grid two-dimensional है — यह rows और columns दोनों एक साथ control करता है — जबकि flexbox one-dimensional है, items को एक single row या column के along lay out करता है। Grid तब use करें जब आप एक overall page या card layout बना रहे हों जिसमें aligned rows और columns हों (dashboards, galleries, page shells)। Flexbox तब use करें जब एक single strip of content हो जैसे navbar, toolbar या buttons की row। ये दोनों साथ अच्छा काम करते हैं: outer page structure के लिए grid, individual cells के अंदर flexbox।

Tailwind grid utilities ship करता है: तीन equal columns के लिए grid plus grid-cols-3 add करें, spacing के लिए gap-4, और children पर col-span-2 / row-span-2 जोड़ें ताकि वे span करें। grid-cols-3 repeat(3, minmax(0, 1fr)) में compile होता है। किसी भी custom चीज़ के लिए — जैसे responsive auto-fit track — arbitrary value use करें: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]। Output को Tailwind tab पर switch करें और यह generator आपके container और हर item के लिए exact utility classes लिखता है, JSX या HTML markup में paste करने के लिए तैयार।

Child पर grid-column और grid-row use करें। grid-column: span 2 एक item को दो columns wide बनाता है; grid-column: 1 / 3 उसे line 1 से line 3 तक place करता है (also दो columns)। यही vertically grid-row: span 2 से apply होता है। Tailwind में यह col-span-2 और row-span-2 है। इस playground में आप spanning item बनाने के लिए preview में cells के ऊपर drag कर सकते हैं, या item panel में exact start और span values type कर सकते हैं। CSS और Tailwind output दोनों जैसे-जैसे आप जाते हैं update होते हैं।

gap property tracks के बीच space add करती है: gap: 16px हर row और column के बीच 16px डालता है। आप axes अलग-अलग set कर सकते हैं gap: 24px 16px (row-gap फिर column-gap) से, या row-gap और column-gap directly use कर सकते हैं। Gap केवल cells के बीच space affect करता है — यह grid के outer edge के चारों ओर padding कभी नहीं add करता, जो confusion का common source है। यहाँ row-gap और column-gap controls use करें — uniform gap के लिए उन्हें link करें या हर axis को independently fine-tune करने के लिए unlink करें।

पूरी तरह free, कोई sign-up नहीं और कुछ install नहीं। Layoutit Grid एक solid starting point है लेकिन Tailwind output नहीं है और grid-area rules copy करने के लिए separate tab पर click करना पड़ता है। Sarah Drasner का CSS Grid Generator एक minimal educational tool है बिना item-level controls या shareable links के। UtiloKit Tailwind CSS output, named template areas, responsive auto-fit mode, shareable links, और interactive drag-to-span item editor — सब एक जगह add करता है। सब कुछ आपके browser में locally generate होता है इसलिए आपके layouts कभी upload नहीं होते।

हाँ। यह tool पूरी तरह responsive है और किसी भी modern mobile browser में काम करता है जिसमें iPhone पर Safari और Android पर Chrome शामिल हैं। चलते-फिरते grid layouts बनाएं, CSS या Tailwind output copy करें, और अपने project में paste करें। क्योंकि सब कुछ client-side run होता है, कोई upload नहीं, कोई account नहीं, और कोई इंतज़ार नहीं। page load होने के बाद यह offline भी काम करता है। Drag-to-span item editor touch-friendly है इसलिए आप mouse के बिना भी complex grid layouts बना सकते हैं।