CSS Grid લેઆઉટની સમજૂતી અને તેનું મહત્વ
CSS Grid લેઆઉટ એ વેબ ડિઝાઇન માટે અત્યંત શક્તિશાળી દ્વિ-પરિમાણીય (two-dimensional) સિસ્ટમ છે. તે વેબ પેજ પર રો અને કોલમ બંનેને એકસાથે નિયંત્રિત કરવાની સુવિધા આપે છે. આ સિસ્ટમની મદદથી જટિલ વેબ લેઆઉટને ખૂબ જ સરળતાથી અને વ્યવસ્થિત રીતે ગોઠવી શકાય છે.
જ્યારે તમારે કોઈ વેબ પેજ પર અલગ-અલગ સેક્શન જેવા કે હેડર, ફૂટર, સાઇડબાર અને મુખ્ય કન્ટેન્ટ એરિયા ગોઠવવાના હોય, ત્યારે CSS Grid સૌથી વધુ ઉપયોગી સાબિત થાય છે. આ ટૂલ તમને કોડ લખ્યા વિના વિઝ્યુઅલ રીતે ગ્રીડ ડિઝાઇન કરવાની અને તેનો સીધો CSS અને HTML કોડ મેળવવાની સુવિધા આપે છે.
ગ્રીડ ટ્રેક અને સાઇઝિંગ: grid-template-columns અને grid-template-rows
ગ્રીડ લેઆઉટ બનાવવા માટે સૌથી પહેલા કોલમ અને રો ની સંખ્યા તેમજ તેમની સાઇઝ નક્કી કરવી પડે છે. આ ટૂલમાં તમે નીચે મુજબના ઇનપુટ્સ સેટ કરી શકો છો:
- કોલમ્સ: 1 થી 12 ની વચ્ચેની સંખ્યા.
- રોઝ (Rows): 1 થી 12 ની વચ્ચેની સંખ્યા.
- કોલમ સાઇઝ અને રો સાઇઝ: દરેક ટ્રેક (કોલમ અથવા રો) માટે તમે સ્વતંત્ર રીતે સાઇઝ નક્કી કરી શકો છો. અહીં તમે કોઈપણ માન્ય CSS ગ્રીડ વેલ્યુ ટાઇપ કરી શકો છો, જેમ કે
1fr,200px,auto,min-content, અથવાminmax(120px, 1fr).
જો તમે કોઈ ટ્રેકની સાઇઝમાં not-a-grid-track જેવી અમાન્ય વેલ્યુ દાખલ કરશો, તો તે ઇનપુટ ફીલ્ડ અમાન્ય તરીકે માર્ક થશે, પરંતુ આઉટપુટ CSS માં છેલ્લી માન્ય વેલ્યુ જળવાઈ રહેશે.
fr યુનિટ અને repeat() નો ઉપયોગ
CSS Grid માં fr (fractional) એ એક ખાસ યુનિટ છે, જે ગ્રીડ કન્ટેનરમાં ઉપલબ્ધ ખાલી જગ્યાને પ્રમાણસર વહેંચવા માટે વપરાય છે. ઉદાહરણ તરીકે, જો ત્રણ કોલમની સાઇઝ 1fr રાખવામાં આવે, તો ત્રણેય કોલમ સરખા ભાગે વહેંચાઈ જશે.
જ્યારે ગ્રીડમાં એક સરખી સાઇઝના મલ્ટિપલ ટ્રેક્સ હોય, ત્યારે આ ટૂલ આઉટપુટ CSS ને ટૂંકું અને વ્યવસ્થિત રાખવા માટે આપમેળે repeat() ફંક્શનનો ઉપયોગ કરે છે. ઉદાહરણ તરીકે, ત્રણ અલગ-અલગ 1fr લખવાને બદલે તે CSS માં repeat(3, 1fr) જનરેટ કરે છે.
ગ્રીડ ગેપ અને આઇટમ્સનું પ્લેસમેન્ટ
ગ્રીડની કોલમ અને રો વચ્ચેની ખાલી જગ્યાને ગેપ કહેવામાં આવે છે. આ ટૂલમાં તમે બંને ગેપ સ્વતંત્ર રીતે સેટ કરી શકો છો:
- કોલમ ગેપ: 0 થી 48px ની વચ્ચેની સંખ્યા.
- રો ગેપ: 0 થી 48px ની વચ્ચેની સંખ્યા.
જ્યારે કોલમ ગેપ અને રો ગેપ બંનેની કિંમત સમાન રાખવામાં આવે છે, ત્યારે આઉટપુટ CSS માં તે અલગ-અલગ પ્રોપર્ટીઝને બદલે એક સિંગલ gap પ્રોપર્ટીમાં કમ્બાઇન થઈ જાય છે.
આઇટમ્સ ગોઠવવાની રીત
ગ્રીડ પર આઇટમ્સ ગોઠવવા માટે તમારે સેલ્સ પર માઉસથી ડ્રેગ કરવાનું રહેશે.
- જ્યારે તમે સેલ્સ પર ક્લિક કરીને લંબચોરસ એરિયા બનાવવા માટે ડ્રેગ કરશો અને માઉસ છોડશો, ત્યારે તે કોલમ અને રો ને આવરી લેતી એક આઇટમ બની જશે.
- દરેક ડ્રો કરેલી આઇટમને CSS માં પોતાનો
grid-columnઅનેgrid-rowનિયમ મળે છે અને HTML માં તેને અનુરૂપdivએલિમેન્ટ જનરેટ થાય છે. - આ ટૂલ મહત્તમ 16 આઇટમ્સ સપોર્ટ કરે છે.
- આઇટમ્સ એકબીજા પર ઓવરલેપ પણ થઈ શકે છે, જેમાં જે આઇટમ પછીથી ડ્રો કરવામાં આવી હશે તે ઉપરના લેયર પર દેખાશે.
- કોઈપણ આઇટમને દૂર કરવા માટે તેના પર આપેલા "×" બટન પર ક્લિક કરી શકાય છે.
લેઆઉટ પ્રીસેટ્સ અને રિસ્પોન્સિવ ડિઝાઇન
ઝડપી પ્રોટોટાઇપિંગ માટે આ ટૂલમાં કેટલાક લોકપ્રિય લેઆઉટ પ્રીસેટ્સ આપવામાં આવ્યા છે:
| પ્રીસેટ નામ | વિગત |
|---|---|
| સાઇડબાર (Sidebar) | મુખ્ય કન્ટેન્ટ એરિયા સાથે ડાબી કે જમણી બાજુએ સાઇડબાર લેઆઉટ બનાવે છે. |
| હેડર અને ફૂટર | ટોચ પર હેડર, વચ્ચે મુખ્ય કન્ટેન્ટ અને તળિયે ફૂટર ધરાવતું લેઆઉટ સેટ કરે છે. |
| ગેલેરી (Gallery) | આ પ્રીસેટ પસંદ કરવાથી આપમેળે 3 કોલમ, 2 રો અને 3 આઇટમ્સ જનરેટ થાય છે. |
| ડેશબોર્ડ (Dashboard) | એડમિન પેનલ કે ડેટા વિઝ્યુલાઇઝેશન માટેનું મલ્ટિ-ગ્રીડ લેઆઉટ તૈયાર કરે છે. |
CSS Grid નો ઉપયોગ કરીને બનાવેલા લેઆઉટ મૂળભૂત રીતે રિસ્પોન્સિવ ડિઝાઇનના સિદ્ધાંતોને સપોર્ટ કરે છે. minmax() અને auto જેવી વેલ્યુઝનો ઉપયોગ કરીને સ્ક્રીનની સાઇઝ બદલાય તે મુજબ આપમેળે એડજસ્ટ થતું લેઆઉટ બનાવી શકાય છે.
ડેટા પ્રોસેસિંગ અને પ્રાઇવસી
તમારું ગ્રીડ સીધું તમારા બ્રાઉઝરમાં જ બને છે. તમે અહીં સેટ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી. બધી જ પ્રક્રિયા સ્થાનિક રીતે તમારા બ્રાઉઝરની અંદર જ થાય છે, જેથી તમારા ડેટાની પ્રાઇવસી જળવાઈ રહે છે.
વારંવાર પૂછાતા પ્રશ્નો (FAQ)
હું ગ્રીડ પર આઇટમ્સ કેવી રીતે ગોઠવી શકું?
સેલ્સ (cells) પર ક્લિક કરીને ખેંચો (drag) જેથી એક લંબચોરસ બને — જ્યારે તમે છોડશો ત્યારે તે તે કોલમ અને રો ને આવરી લેતી એક આઇટમ બની જશે. તમે ડ્રો કરેલી દરેક આઇટમને CSS માં પોતાનો grid-column અને grid-row નિયમ અને HTML માં મેચિંગ div મળે છે. આઇટમ્સ એકબીજા પર ઓવરલેપ થઈ શકે છે, અને જે પછીથી ડ્રો કરવામાં આવી હોય તે ઉપર દેખાશે; આઇટમને દૂર કરવા માટે તેના પરના × નો ઉપયોગ કરો.
શું કોલમ અને રો અલગ-અલગ સાઇઝના હોઈ શકે?
હા. દરેક ટ્રેકનું પોતાનું સાઇઝ બોક્સ હોય છે, અને તમે ત્યાં કોઈપણ ગ્રીડ વેલ્યુ ટાઇપ કરી શકો છો — જેમ કે 1fr, 200px, auto, min-content અથવા minmax(120px, 1fr). સમાન સાઇઝ ધરાવતા ટ્રેક્સને repeat() માં કમ્બાઇન કરવામાં આવે છે જેથી આઉટપુટ ટૂંકું રહે. કોલમ ગેપ અને રો ગેપ અલગથી સેટ થાય છે, અને જ્યારે તેઓ સમાન હોય ત્યારે એક સિંગલ ગેપમાં બદલાઈ જાય છે.
જનરેટ કરેલા કોડનું મારે શું કરવું?
CSS અને HTML બંને કોડ સાથે કૉપિ કરો. HTML તમને કન્ટેનર અને દરેક આઇટમ માટે એક div આપે છે, અને CSS ગ્રીડ વ્યાખ્યાયિત કરે છે અને દરેક આઇટમનું સ્થાન નક્કી કરે છે. તમારા પ્રોજેક્ટમાં બંને પેસ્ટ કરો અને તમને બરાબર એવું જ લેઆઉટ મળશે જે તમે અહીં ડ્રો કર્યું છે.
શું આ ટૂલનો ઉપયોગ કરવા માટે મારો ડેટા સર્વર પર અપલોડ થાય છે?
ના, તમારું ગ્રીડ સીધું તમારા બ્રાઉઝરમાં જ બને છે. તમે અહીં સેટ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
"બધી આઇટમ્સ સાફ કરો" બટન દબાવવાથી શું થશે?
આ બટન પર ક્લિક કરવાથી ગ્રીડ પરથી તમામ પ્લેસ કરેલી આઇટમ્સ દૂર થઈ જશે, જેનાથી HTML કન્ટેનર ખાલી થઈ જશે અને આઇટમ્સની સંખ્યા 0 થઈ જશે.