CSS Grid જનરેટર
તમારી કોલમ અને રો સેટ કરો, આઇટમ્સ ગોઠવવા માટે સેલ્સ પર ડ્રેગ કરો અને એક ક્લિકમાં ગ્રીડ CSS અને મેચિંગ HTML કૉપિ કરો.
તમારું ગ્રીડ સીધું તમારા બ્રાઉઝરમાં જ બને છે. તમે અહીં સેટ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
વારંવાર પૂછાતા પ્રશ્નો
હું ગ્રીડ પર આઇટમ્સ કેવી રીતે ગોઠવી શકું?
સેલ્સ (cells) પર ક્લિક કરીને ખેંચો (drag) જેથી એક લંબચોરસ બને — જ્યારે તમે છોડશો ત્યારે તે તે કોલમ અને રો ને આવરી લેતી એક આઇટમ બની જશે. તમે ડ્રો કરેલી દરેક આઇટમને CSS માં પોતાનો grid-column અને grid-row નિયમ અને HTML માં મેચિંગ div મળે છે. આઇટમ્સ એકબીજા પર ઓવરલેપ થઈ શકે છે, અને જે પછીથી ડ્રો કરવામાં આવી હોય તે ઉપર દેખાશે; આઇટમને દૂર કરવા માટે તેના પરના × નો ઉપયોગ કરો.
શું કોલમ અને રો અલગ-અલગ સાઇઝના હોઈ શકે?
હા. દરેક ટ્રેકનું પોતાનું સાઇઝ બોક્સ હોય છે, અને તમે ત્યાં કોઈપણ ગ્રીડ વેલ્યુ ટાઇપ કરી શકો છો — જેમ કે 1fr, 200px, auto, min-content અથવા minmax(120px, 1fr). સમાન સાઇઝ ધરાવતા ટ્રેક્સને repeat() માં કમ્બાઇન કરવામાં આવે છે જેથી આઉટપુટ ટૂંકું રહે. કોલમ ગેપ અને રો ગેપ અલગથી સેટ થાય છે, અને જ્યારે તેઓ સમાન હોય ત્યારે એક સિંગલ ગેપમાં બદલાઈ જાય છે.
જનરેટ કરેલા કોડનું મારે શું કરવું?
CSS અને HTML બંને કોડ સાથે કૉપિ કરો. HTML તમને કન્ટેનર અને દરેક આઇટમ માટે એક div આપે છે, અને CSS ગ્રીડ વ્યાખ્યાયિત કરે છે અને દરેક આઇટમનું સ્થાન નક્કી કરે છે. તમારા પ્રોજેક્ટમાં બંને પેસ્ટ કરો અને તમને બરાબર એવું જ લેઆઉટ મળશે જે તમે અહીં ડ્રો કર્યું છે.