CSS ગ્રિડ ટ્રેક ફંક્શન્સ: રિસ્પોન્સિવ ડિઝાઇન માટે ડાયનેમિક લેઆઉટ સાઇઝિંગ

CSS ગ્રિડે વેબ લેઆઉટમાં ક્રાંતિ લાવી છે, જે અજોડ નિયંત્રણ અને લવચીકતા પ્રદાન કરે છે. તેની શક્તિના કેન્દ્રમાં ટ્રેક ફંક્શન્સ છે, જે ગ્રિડની અંદર પંક્તિઓ અને કૉલમ્સનું કદ વ્યાખ્યાયિત કરે છે. રિસ્પોન્સિવ અને ડાયનેમિક લેઆઉટ બનાવવા માટે આ ફંક્શન્સને સમજવું અને તેમાં નિપુણતા મેળવવી મહત્વપૂર્ણ છે જે વિવિધ સ્ક્રીન સાઇઝ અને કન્ટેન્ટની જરૂરિયાતોને સરળતાથી અનુકૂળ થાય છે.

CSS ગ્રિડ ટ્રેક ફંક્શન્સ શું છે?

ટ્રેક ફંક્શન્સનો ઉપયોગ ગ્રિડ ટ્રેક્સ (પંક્તિઓ અને કૉલમ્સ) ના કદને સ્પષ્ટ કરવા માટે થાય છે. તે ટ્રેક્સ વચ્ચે જગ્યા કેવી રીતે વહેંચવામાં આવે છે તે વ્યાખ્યાયિત કરવાની રીત પ્રદાન કરે છે, જે નિશ્ચિત અને લવચીક બંને કદ માટે પરવાનગી આપે છે. સૌથી વધુ ઉપયોગમાં લેવાતા ટ્રેક ફંક્શન્સ છે:

• fr (ફ્રેક્શનલ યુનિટ): ગ્રિડ કન્ટેનરમાં ઉપલબ્ધ જગ્યાના અપૂર્ણાંકનું પ્રતિનિધિત્વ કરે છે.
• minmax(min, max): લઘુત્તમ અને મહત્તમ મૂલ્ય વચ્ચે કદની શ્રેણી વ્યાખ્યાયિત કરે છે.
• auto: ટ્રેકનું કદ તેની અંદરના કન્ટેન્ટ દ્વારા નક્કી થાય છે.
• fit-content(length): ટ્રેકનું કદ તેના કન્ટેન્ટને ફિટ કરવા માટે અનુકૂળ થાય છે, પરંતુ ઉલ્લેખિત લંબાઈથી ક્યારેય વધતું નથી.

fr યુનિટ: ઉપલબ્ધ જગ્યાનું વિતરણ

fr યુનિટ એ કદાચ ટ્રેક ફંક્શન્સમાં સૌથી શક્તિશાળી અને લવચીક છે. તે તમને ગ્રિડ કન્ટેનરમાં ઉપલબ્ધ જગ્યાને ગ્રિડ ટ્રેક્સ વચ્ચે પ્રમાણસર વિભાજિત કરવાની મંજૂરી આપે છે. fr યુનિટ અન્ય ટ્રેક્સનું કદ નક્કી થયા પછી બાકી રહેલી ખાલી જગ્યાના અપૂર્ણાંકનું પ્રતિનિધિત્વ કરે છે.

મૂળભૂત ઉપયોગ

નીચે આપેલ CSSનો વિચાર કરો:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

આ ત્રણ કૉલમવાળી ગ્રિડ બનાવે છે. પ્રથમ અને ત્રીજી કૉલમ દરેક ઉપલબ્ધ જગ્યાનો 1/4 ભાગ લે છે, જ્યારે બીજી કૉલમ ઉપલબ્ધ જગ્યાનો 2/4 (અથવા 1/2) ભાગ લે છે. જો ગ્રિડ કન્ટેનર 600px પહોળું હોય અને કોઈ નિશ્ચિત-કદની કૉલમ ન હોય, તો પ્રથમ અને ત્રીજી કૉલમ દરેક 150px પહોળી હશે, અને બીજી કૉલમ 300px પહોળી હશે.

fr ને નિશ્ચિત-કદના ટ્રેક્સ સાથે મિશ્રિત કરવું

fr ની સાચી શક્તિ ત્યારે સામે આવે છે જ્યારે તેને નિશ્ચિત-કદના ટ્રેક્સ (દા.ત., pixels, ems, rems) સાથે જોડવામાં આવે છે. નિશ્ચિત-કદના ટ્રેક્સનું કદ પહેલા નક્કી થાય છે, અને પછી બાકીની જગ્યા fr યુનિટ્સ વચ્ચે વહેંચવામાં આવે છે.

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, પ્રથમ કૉલમ 200px પર નિશ્ચિત છે. જો ગ્રિડ કન્ટેનર 600px પહોળું હોય, તો બાકીના 400px બીજા અને ત્રીજા કૉલમ વચ્ચે વહેંચવામાં આવશે. બીજી કૉલમને બાકીની જગ્યાનો 1/3 ભાગ (આશરે 133.33px) મળશે, અને ત્રીજી કૉલમને 2/3 (આશરે 266.67px) મળશે.

ઉદાહરણ: એક ગ્લોબલ નેવિગેશન બાર

એક ગ્લોબલ નેવિગેશન બારની કલ્પના કરો જેમાં ડાબી બાજુએ નિશ્ચિત-પહોળાઈનો લોગો, મધ્યમાં મોટાભાગની જગ્યા લેતો સર્ચ બાર અને જમણી બાજુએ નિશ્ચિત-પહોળાઈના યુઝર એકાઉન્ટ આઇકોન્સનો સમૂહ હોય.

            .nav-container {
  display: grid;
  grid-template-columns: 150px 1fr 100px; /* Logo, Search, Account Icons */
}

.nav-logo {
  /* Logo styling */
}

.nav-search {
  /* Search bar styling */
}

.nav-account {
  /* Account icon styling */
}

            

              
                Copy
              
            
          

અહીં, લોગો કૉલમ 150px પહોળી છે, એકાઉન્ટ આઇકોન કૉલમ 100px પહોળી છે, અને સર્ચ બાર કૉલમ બાકીની જગ્યા ભરવા માટે વિસ્તરે છે. આ સુનિશ્ચિત કરે છે કે સર્ચ બાર વિવિધ સ્ક્રીન સાઇઝને અનુકૂળ થાય છે જ્યારે લોગો અને એકાઉન્ટ આઇકોન્સ માટે નિશ્ચિત કદ જાળવી રાખે છે.

minmax() ફંક્શન: કદની શ્રેણી વ્યાખ્યાયિત કરવી

minmax() ફંક્શન તમને ગ્રિડ ટ્રેક માટે લઘુત્તમ અને મહત્તમ કદ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે. આ ઓવરફ્લો અથવા વધુ પડતા ખેંચાણને ટાળતી વખતે વિવિધ કન્ટેન્ટ લંબાઈને અનુકૂળ થતા રિસ્પોન્સિવ લેઆઉટ બનાવવા માટે અત્યંત ઉપયોગી છે.

મૂળભૂત ઉપયોગ

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, પ્રથમ કૉલમ ઓછામાં ઓછી 100px પહોળી અને વધુમાં વધુ 300px પહોળી હશે. જો પ્રથમ કૉલમની અંદરના કન્ટેન્ટને 100px થી વધુની જરૂર હોય, તો કૉલમ 300px સુધી પહોંચે ત્યાં સુધી વિસ્તરશે. તે પછી, તે વધશે નહીં અને કન્ટેન્ટ ઓવરફ્લો થઈ શકે છે. બીજી કૉલમ બાકીની જગ્યા લેશે.

minmax() ને auto સાથે જોડવું

એક સામાન્ય ઉપયોગ એ છે કે minmax() ને auto સાથે જોડવું જેથી ટ્રેક તેના કન્ટેન્ટના આધારે વધી શકે, પરંતુ માત્ર એક ચોક્કસ મર્યાદા સુધી.

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
}

            

              
                Copy
              
            
          

આ કિસ્સામાં, પ્રથમ કૉલમ ઓછામાં ઓછી 100px પહોળી હશે. જો કન્ટેન્ટ 100px કરતાં પહોળું હોય, તો કૉલમ તેને સમાવવા માટે વિસ્તરશે. જોકે, કૉલમ માત્ર કન્ટેન્ટને ફિટ કરવા માટે જરૂરી હોય તેટલી જ વિસ્તરશે. જો કન્ટેન્ટ 100px કરતાં ઓછું હોય, તો કૉલમ 100px પહોળી હશે. બીજી કૉલમ ફરીથી બાકીની જગ્યા લેશે.

ઉદાહરણ: એક પ્રોડક્ટ કાર્ડ ગ્રિડ

પ્રોડક્ટ કાર્ડ્સની ગ્રિડનો વિચાર કરો જ્યાં તમે ઇચ્છો છો કે દરેક કાર્ડની લઘુત્તમ પહોળાઈ હોય પરંતુ તેમને ઉપલબ્ધ જગ્યા ભરવા માટે વિસ્તૃત કરવાની મંજૂરી હોય, એક ચોક્કસ મહત્તમ મર્યાદા સુધી. આ એક ઈ-કોમર્સ વેબસાઇટ માટે ઉપયોગી થઈ શકે છે જેમાં વિવિધ દેશોના યુઝર્સ હોય જ્યાં પ્રોડક્ટના ટાઇટલની લંબાઈ અલગ-અલગ હોઈ શકે છે.

            .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.product-card {
  /* Product card styling */
}

            

              
                Copy
              
            
          

અહીં, repeat(auto-fit, minmax(200px, 1fr)) શક્ય તેટલી કૉલમ બનાવે છે, દરેકની લઘુત્તમ પહોળાઈ 200px હોય છે. 1fr મહત્તમ મર્યાદા કૉલમ્સને વિસ્તૃત કરવા અને ઉપલબ્ધ જગ્યા ભરવાની મંજૂરી આપે છે. grid-gap કાર્ડ્સ વચ્ચે જગ્યા ઉમેરે છે. જેમ જેમ સ્ક્રીનનું કદ બદલાય છે, તેમ તેમ કૉલમની સંખ્યા ઉપલબ્ધ જગ્યામાં ફિટ થવા માટે આપમેળે ગોઠવાશે, જે વિવિધ પૃષ્ઠભૂમિ અને ઉપકરણોના વપરાશકર્તાઓ માટે રિસ્પોન્સિવ લેઆઉટ સુનિશ્ચિત કરે છે.

auto કીવર્ડ: કન્ટેન્ટ-આધારિત સાઇઝિંગ

auto કીવર્ડ ગ્રિડને તેની અંદરના કન્ટેન્ટના આધારે ટ્રેકનું કદ નક્કી કરવા સૂચના આપે છે. આ ત્યારે ઉપયોગી છે જ્યારે તમે ઇચ્છો છો કે ટ્રેક તેના કન્ટેન્ટને સમાવવા માટે પૂરતો મોટો હોય, સ્પષ્ટપણે કદ સ્પષ્ટ કર્યા વિના.

મૂળભૂત ઉપયોગ

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, પ્રથમ કૉલમનું કદ તેના કન્ટેન્ટને ફિટ કરવા માટે નક્કી કરવામાં આવશે. બીજી કૉલમ બાકીની જગ્યા લેશે.

ઉદાહરણ: એક સાઇડબાર લેઆઉટ

ડાબી બાજુએ સાઇડબાર અને જમણી બાજુએ મુખ્ય કન્ટેન્ટ વિસ્તાર સાથેના લેઆઉટનો વિચાર કરો. સાઇડબાર તેના કન્ટેન્ટને ફિટ કરવા માટે પૂરતી પહોળી હોવી જોઈએ (દા.ત., નેવિગેશન લિંક્સની સૂચિ), જ્યારે મુખ્ય કન્ટેન્ટ વિસ્તાર બાકીની જગ્યા લેવો જોઈએ.

            .layout-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.sidebar {
  /* Sidebar styling */
}

.main-content {
  /* Main content styling */
}

            

              
                Copy
              
            
          

auto કીવર્ડ સુનિશ્ચિત કરે છે કે સાઇડબાર તેના કન્ટેન્ટની પહોળાઈને અનુકૂળ થાય છે. જો કન્ટેન્ટ ટૂંકું હોય, તો સાઇડબાર સાંકડી હશે. જો કન્ટેન્ટ લાંબું હોય, તો સાઇડબાર પહોળી હશે. આ એક લવચીક અને રિસ્પોન્સિવ સાઇડબાર લેઆઉટ બનાવે છે જે નેવિગેશન મેનુમાં સંભવિતપણે વિવિધ ભાષાની લંબાઈ ધરાવતા વૈશ્વિક પ્રેક્ષકોને લક્ષ્યાંકિત વેબ એપ્લિકેશનો માટે યોગ્ય છે.

fit-content() ફંક્શન: નિયંત્રિત કન્ટેન્ટ-આધારિત સાઇઝિંગ

fit-content() ફંક્શન auto જેવું જ છે, પરંતુ તે તમને ટ્રેક માટે મહત્તમ કદ સ્પષ્ટ કરવાની મંજૂરી આપે છે. ટ્રેક તેના કન્ટેન્ટને ફિટ કરવા માટે કદમાં ગોઠવાશે, પરંતુ તે ઉલ્લેખિત લંબાઈથી ક્યારેય વધશે નહીં.

મૂળભૂત ઉપયોગ

            .grid-container {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, પ્રથમ કૉલમ તેના કન્ટેન્ટને ફિટ કરવા માટે કદમાં ગોઠવાશે, પરંતુ તે ક્યારેય 300px કરતાં પહોળી નહીં હોય. જો કન્ટેન્ટને 300px થી વધુની જરૂર હોય, તો કૉલમ 300px પહોળી હશે, અને CSS overflow અને word-wrap ગુણધર્મોના આધારે કન્ટેન્ટ ઓવરફ્લો અથવા રેપ થઈ શકે છે.

ઉદાહરણ: એક બટન ગ્રુપ

બટનોના જૂથની કલ્પના કરો કે જેને તમે એક પંક્તિમાં પ્રદર્શિત કરવા માંગો છો. તમે ઇચ્છો છો કે બટનો તેમના કન્ટેન્ટને ફિટ કરવા માટે કદમાં ગોઠવાય, પરંતુ તમે નથી ઇચ્છતા કે તે ખૂબ પહોળા થઈ જાય અને વધુ જગ્યા રોકે.

            .button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(150px));
  grid-gap: 10px;
}

.button {
  /* Button styling */
}

            

              
                Copy
              
            
          

અહીં, દરેક બટન કૉલમ બટનના ટેક્સ્ટને ફિટ કરવા માટે કદમાં ગોઠવાશે, પરંતુ તે ક્યારેય 150px કરતાં પહોળી નહીં હોય. જો ટેક્સ્ટ 150px કરતાં લાંબું હોય, તો બટન ટેક્સ્ટને રેપ કરશે. આ એક બટન ગ્રુપ બનાવે છે જે સુસંગત દ્રશ્ય દેખાવ જાળવી રાખતી વખતે વિવિધ બટન ટેક્સ્ટ લંબાઈને અનુકૂળ થાય છે.

જટિલ લેઆઉટ માટે ટ્રેક ફંક્શન્સનું સંયોજન

CSS ગ્રિડ ટ્રેક ફંક્શન્સની સાચી શક્તિ તેમને જટિલ અને રિસ્પોન્સિવ લેઆઉટ બનાવવા માટે સંયોજિત કરવાથી આવે છે. અહીં કેટલાક ઉદાહરણો છે:

ઉદાહરણ 1: લવચીક મધ્ય કૉલમ સાથેનું ત્રણ-કૉલમ લેઆઉટ

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
}

            

              
                Copy
              
            
          

આ એક ત્રણ-કૉલમ લેઆઉટ બનાવે છે જ્યાં પ્રથમ કૉલમ 200px પહોળી છે, બીજી કૉલમ બાકીની જગ્યા લે છે, અને ત્રીજી કૉલમ 150px પહોળી છે.

ઉદાહરણ 2: લઘુત્તમ સાઇડબાર પહોળાઈ સાથેનું લેઆઉટ

            .grid-container {
  display: grid;
  grid-template-columns: minmax(250px, auto) 1fr;
}

            

              
                Copy
              
            
          

આ એક બે-કૉલમ લેઆઉટ બનાવે છે જ્યાં પ્રથમ કૉલમ (સાઇડબાર) ની લઘુત્તમ પહોળાઈ 250px છે અને તેના કન્ટેન્ટને ફિટ કરવા માટે વિસ્તરે છે, જ્યારે બીજી કૉલમ બાકીની જગ્યા લે છે.

ઉદાહરણ 3: ડાયનેમિક કન્ટેન્ટ સાથે સમાન ઊંચાઈની કૉલમ

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto); /* ensure all rows are at least 100px high */
}

            

              
                Copy
              
            
          

આ ત્રણ સમાન-પહોળાઈની કૉલમ બનાવે છે. grid-auto-rows: minmax(100px, auto) નો ઉપયોગ સુનિશ્ચિત કરે છે કે બધી પંક્તિઓ ઓછામાં ઓછી 100px ઊંચી હોય, અને દરેક ગ્રિડ આઇટમની અંદરના કન્ટેન્ટને સમાવવા માટે તેમની ઊંચાઈ આપમેળે ગોઠવશે, જે સમગ્ર ગ્રિડમાં દ્રશ્ય સુસંગતતા જાળવી રાખે છે.

CSS ગ્રિડ ટ્રેક ફંક્શન્સનો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

• લવચીક કદ માટે fr નો ઉપયોગ કરો: fr યુનિટ ગ્રિડ ટ્રેક્સ વચ્ચે ઉપલબ્ધ જગ્યાને પ્રમાણસર વિતરિત કરવા માટે આદર્શ છે.
• કદની શ્રેણી માટે minmax() નો ઉપયોગ કરો: minmax() ફંક્શન તમને ટ્રેક માટે લઘુત્તમ અને મહત્તમ કદ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે, જે સુનિશ્ચિત કરે છે કે તે ઓવરફ્લો થયા વિના અથવા વધુ પડતા ખેંચાયા વિના વિવિધ કન્ટેન્ટ લંબાઈને અનુકૂળ બને છે.
• કન્ટેન્ટ-આધારિત સાઇઝિંગ માટે auto નો ઉપયોગ કરો: auto કીવર્ડ ત્યારે ઉપયોગી છે જ્યારે તમે ઇચ્છો છો કે ટ્રેક તેના કન્ટેન્ટને સમાવવા માટે પૂરતો મોટો હોય.
• નિયંત્રિત કન્ટેન્ટ-આધારિત સાઇઝિંગ માટે fit-content() નો ઉપયોગ કરો: fit-content() ફંક્શન તમને એવા ટ્રેક માટે મહત્તમ કદ સ્પષ્ટ કરવાની મંજૂરી આપે છે જે તેના કન્ટેન્ટને ફિટ કરવા માટે કદમાં ગોઠવાયેલ હોય.
• જટિલ લેઆઉટ માટે ટ્રેક ફંક્શન્સને જોડો: CSS ગ્રિડ ટ્રેક ફંક્શન્સની સાચી શક્તિ તેમને જટિલ અને રિસ્પોન્સિવ લેઆઉટ બનાવવા માટે સંયોજિત કરવાથી આવે છે.
• ઍક્સેસિબિલિટી પરની અસરને ધ્યાનમાં લો: ખાતરી કરો કે તમારા લેઆઉટ વિકલાંગ વપરાશકર્તાઓ માટે સુલભ છે. સિમેન્ટિક HTML નો ઉપયોગ કરો અને છબીઓ અને અન્ય બિન-ટેક્સ્ટ તત્વો માટે વૈકલ્પિક કન્ટેન્ટ પ્રદાન કરો.
• વિવિધ ઉપકરણો અને બ્રાઉઝર્સ પર પરીક્ષણ કરો: તમારા લેઆઉટને વિવિધ ઉપકરણો અને બ્રાઉઝર્સ પર સંપૂર્ણ રીતે પરીક્ષણ કરો જેથી ખાતરી થાય કે તે યોગ્ય રીતે રેન્ડર થાય છે અને રિસ્પોન્સિવ છે.

નિષ્કર્ષ

CSS ગ્રિડ ટ્રેક ફંક્શન્સ ડાયનેમિક અને રિસ્પોન્સિવ લેઆઉટ બનાવવા માટે આવશ્યક છે જે વિવિધ સ્ક્રીન સાઇઝ અને કન્ટેન્ટની જરૂરિયાતોને અનુકૂળ થાય છે. fr યુનિટ, minmax() ફંક્શન, auto કીવર્ડ, અને fit-content() ફંક્શનમાં નિપુણતા મેળવીને, તમે લવચીક અને શક્તિશાળી લેઆઉટ બનાવી શકો છો જે તમામ ઉપકરણો પર એક શ્રેષ્ઠ વપરાશકર્તા અનુભવ પ્રદાન કરે છે. આ તકનીકોને અપનાવવાથી તમને વધુ મજબૂત, અનુકૂલનશીલ અને વૈશ્વિક સ્તરે સુલભ વેબ એપ્લિકેશનો બનાવવાની શક્તિ મળે છે.