CSS ગ્રિડ મેશનરી: Pinterest-શૈલીના લેઆઉટ અમલીકરણમાં એક ઊંડો અભ્યાસ

વર્ષોથી, 'મેશનરી' લેઆઉટ — જે Pinterest દ્વારા લોકપ્રિય બન્યું છે — આધુનિક વેબ ડિઝાઇનનો એક મુખ્ય ભાગ રહ્યું છે. તેની વિશિષ્ટ 'વૉટરફોલ' ઇફેક્ટ, જેમાં વિવિધ ઊંચાઈની આઇટમ્સ દિવાલની ઇંટોની જેમ એકબીજા સાથે ચુસ્તપણે ગોઠવાય છે, તે સૌંદર્યલક્ષી રીતે આનંદદાયક અને કન્ટેન્ટ પ્રદર્શિત કરવા માટે અત્યંત કાર્યક્ષમ છે. જોકે, આ દેખીતી રીતે સરળ લેઆઉટને મજબૂત, રિસ્પોન્સિવ અને પર્ફોર્મન્ટ રીતે પ્રાપ્ત કરવું ઐતિહાસિક રીતે ફ્રન્ટ-એન્ડ ડેવલપર્સ માટે એક મોટો પડકાર રહ્યો છે, જેમાં ઘણીવાર જાવાસ્ક્રિપ્ટ લાઇબ્રેરીઓ પર ભારે નિર્ભરતાની જરૂર પડે છે.

CSS ગ્રિડના આગમનથી આપણે વેબ લેઆઉટ વિશે જે રીતે વિચારીએ છીએ તેમાં ક્રાંતિ આવી છે, પરંતુ એક સાચું, નેટિવ મેશનરી સોલ્યુશન પહોંચની બહાર રહ્યું હતું. એટલે કે, અત્યાર સુધી. CSS ગ્રિડ લેઆઉટ મોડ્યુલ લેવલ 3 સ્પષ્ટીકરણમાં grid-template-rows: masonry ની રજૂઆત સાથે, આ રમત બદલાઈ રહી છે. આ લેખ ડેવલપર્સના વૈશ્વિક પ્રેક્ષકો માટે એક વ્યાપક માર્ગદર્શિકા તરીકે સેવા આપે છે, જે તમને મેશનરી લેઆઉટના ઉત્ક્રાંતિ, ક્લાસિક વર્કઅરાઉન્ડ્સથી લઈને અત્યાધુનિક નેટિવ CSS અમલીકરણ સુધી લઈ જાય છે, અને પ્રગતિશીલ ઉન્નતીકરણ (progressive enhancement) નો ઉપયોગ કરીને એક વ્યવહારુ, પ્રોડક્શન-રેડી વ્યૂહરચના પ્રદાન કરે છે.

મેશનરી લેઆઉટ બરાબર શું છે?

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

મુખ્ય લાક્ષણિકતાઓમાં શામેલ છે:

• આઇટમ્સની કૉલમની પહોળાઈ નિશ્ચિત હોય છે પરંતુ ઊંચાઈ ચલિત હોય છે.
• આઇટમ્સ ઊભી કૉલમમાં ગોઠવાયેલી હોય છે.
• કોઈ નિશ્ચિત હરોળની ઊંચાઈ હોતી નથી; આઇટમ્સ ઉપલબ્ધ જગ્યા ભરવા માટે વહે છે.
• કન્ટેનરની એકંદરે ઊંચાઈ ઓછી કરવામાં આવે છે.

આ લેઆઉટ ઇમેજ ગેલેરીઓ, પોર્ટફોલિયો, સોશિયલ મીડિયા ફીડ્સ અને કોઈપણ કન્ટેન્ટ-હેવી ડેશબોર્ડ માટે આદર્શ છે જ્યાં આઇટમ્સનું ઊભું પરિમાણ અણધારી હોય છે.

ઐતિહાસિક અભિગમ: મલ્ટી-કૉલમ લેઆઉટ ("હેક")

લાંબા સમય સુધી, પ્યોર CSS મેશનરી લેઆઉટની સૌથી નજીક આપણે CSS મલ્ટી-કૉલમ લેઆઉટ મોડ્યુલનો ઉપયોગ કરીને પહોંચી શકતા હતા. આ તકનીકમાં column-count અને column-gap જેવી પ્રોપર્ટીઝનો ઉપયોગ શામેલ છે.

તે કેવી રીતે કાર્ય કરે છે

મલ્ટી-કૉલમ અભિગમ તમારા આઇટમ્સના કન્ટેનરને જાણે કે તે ટેક્સ્ટનો એક જ બ્લોક હોય તેમ માને છે અને પછી તેને અનેક કૉલમમાં વિભાજિત કરે છે.

ઉદાહરણ HTML સ્ટ્રક્ચર:

            <div class="multicolumn-container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <!-- more items -->
</div>
            

              
                Copy
              
            
          

ઉદાહરણ CSS:

            .multicolumn-container {
  column-count: 3;
  column-gap: 1em;
}

.item {
  display: inline-block; /* Or block, depending on context */
  width: 100%;
  margin-bottom: 1em;
  break-inside: avoid; /* Prevents items from breaking across columns */
}
            

              
                Copy
              
            
          

ફાયદા અને ગેરફાયદા

ફાયદા:

• સરળતા: તેને માત્ર થોડીક CSS લાઈનો સાથે અમલમાં મૂકવું અત્યંત સરળ છે.
• ઉત્તમ બ્રાઉઝર સપોર્ટ: મલ્ટી-કૉલમ મોડ્યુલ બધા આધુનિક બ્રાઉઝર્સ દ્વારા સપોર્ટેડ છે, જે તેને એક વિશ્વસનીય પસંદગી બનાવે છે.

ગેરફાયદા:

• આઇટમ ઓર્ડરિંગ: આ સૌથી મોટો ગેરફાયદો છે. કન્ટેન્ટ પ્રથમ કૉલમની ટોચથી તેના તળિયે વહે છે, પછી બીજી કૉલમની ટોચથી ચાલુ રહે છે. આનો અર્થ એ છે કે તમારી આઇટમ્સ ઊભી રીતે ઓર્ડર કરવામાં આવે છે, આડી રીતે નહીં. આઇટમ 1 કૉલમ 1 માં હોઈ શકે છે, તેની નીચે આઇટમ 2, જ્યારે આઇટમ 4 કૉલમ 2 ની ટોચ પર હોય છે. આ ઘણીવાર કાલક્રમિક ફીડ્સ અથવા રેન્ક કરેલા કન્ટેન્ટ માટે ઇચ્છિત વપરાશકર્તા અનુભવ નથી.
• કન્ટેન્ટ સ્પ્લિટિંગ: break-inside: avoid; પ્રોપર્ટી નિર્ણાયક છે પરંતુ સંપૂર્ણપણે ફૂલપ્રૂફ નથી. કેટલાક જટિલ દૃશ્યોમાં, આઇટમનું કન્ટેન્ટ હજુ પણ બે કૉલમમાં વિભાજિત થઈ શકે છે, જે અત્યંત અનિચ્છનીય છે.
• મર્યાદિત નિયંત્રણ: તે વ્યક્તિગત આઇટમ્સના ચોક્કસ સ્થાન પર ખૂબ ઓછું નિયંત્રણ પ્રદાન કરે છે, જે તેને વધુ જટિલ લેઆઉટ માટે અનુચિત બનાવે છે.

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

CSS ગ્રિડ યુગ: રો સ્પાનિંગ સાથે "ફોક્સ" મેશનરી

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

તે કેવી રીતે કાર્ય કરે છે

આ પદ્ધતિમાં ઘણી નાની, નિશ્ચિત-ઊંચાઈની પંક્તિઓ સાથે એક પ્રમાણભૂત ગ્રિડ સેટ કરવાનો સમાવેશ થાય છે. પછી દરેક ગ્રિડ આઇટમને તેની કન્ટેન્ટ ઊંચાઈના આધારે આમાંથી ચોક્કસ સંખ્યામાં પંક્તિઓને સ્પાન કરવા માટે સૂચના આપવામાં આવે છે. આ માટે દરેક આઇટમ માટે જરૂરી સ્પાનની ગણતરી કરવા માટે થોડી જાવાસ્ક્રિપ્ટની જરૂર છે.

ઉદાહરણ CSS:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 20px; /* Define a small, fixed row height */
}

.item {
  /* JavaScript will add 'grid-row-end' here */
}
            

              
                Copy
              
            
          

ઉદાહરણ જાવાસ્ક્રિપ્ટ (કન્સેપ્ચ્યુઅલ):

            const grid = document.querySelector('.grid-container');
const items = document.querySelectorAll('.item');
const rowHeight = 20; // Must match grid-auto-rows in CSS
const rowGap = 16; // 1em, assuming 16px base font size

items.forEach(item => {
  const contentHeight = item.querySelector('.content').offsetHeight;
  const rowSpan = Math.ceil((contentHeight + rowGap) / (rowHeight + rowGap));
  item.style.gridRowEnd = `span ${rowSpan}`;
});
            

              
                Copy
              
            
          

ફાયદા અને ગેરફાયદા

ફાયદા:

• સાચો આઇટમ ઓર્ડર: મલ્ટી-કૉલમથી વિપરીત, આઇટમ્સ સાચા ડાબે-થી-જમણે, ઉપર-થી-નીચે ક્રમમાં મૂકવામાં આવે છે.
• શક્તિશાળી ગ્રિડ સુવિધાઓ: તમે CSS ગ્રિડની બધી શક્તિનો લાભ લઈ શકો છો, જેમાં સંરેખણ, ગેપ્સ અને minmax() સાથે રિસ્પોન્સિવ કૉલમ વ્યાખ્યાઓ શામેલ છે.

ગેરફાયદા:

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

આ CSS ગ્રિડ + જાવાસ્ક્રિપ્ટ અભિગમ ઘણા વર્ષોથી આધુનિક મેશનરી લેઆઉટ માટે વાસ્તવિક ધોરણ બની ગયું, જે સ્ક્રિપ્ટિંગ પર તેની નિર્ભરતા હોવા છતાં નિયંત્રણ અને અંતિમ દેખાવનું શ્રેષ્ઠ સંતુલન પ્રદાન કરે છે.

ભવિષ્ય હવે છે: `grid-template-rows` સાથે નેટિવ CSS મેશનરી

જે ક્ષણની ઘણા ડેવલપર્સ રાહ જોઈ રહ્યા હતા તે આખરે આવી રહી છે. CSS વર્કિંગ ગ્રુપે CSS ગ્રિડ સ્પષ્ટીકરણની અંદર સીધા જ મેશનરી લેઆઉટ પ્રાપ્ત કરવા માટે એક નેટિવ રીત સ્પષ્ટ કરી છે. આ grid-template-rows અથવા grid-template-columns પ્રોપર્ટી માટે masonry વેલ્યુનો ઉપયોગ કરીને સિદ્ધ થાય છે.

`masonry` વેલ્યુને સમજવું

જ્યારે તમે grid-template-rows: masonry; સેટ કરો છો, ત્યારે તમે બ્રાઉઝરના રેન્ડરિંગ એન્જિનને આઇટમ્સ મૂકવા માટે એક અલગ અલ્ગોરિધમ અપનાવવા માટે કહી રહ્યા છો. કડક ગ્રિડ પંક્તિને વળગી રહેવાને બદલે, આઇટમ્સ સૌથી વધુ ઉપલબ્ધ જગ્યાવાળા કૉલમમાં મૂકવામાં આવે છે, જે મેશનરીની વિશિષ્ટ પેક્ડ ઇફેક્ટ બનાવે છે.

વર્તમાન બ્રાઉઝર સપોર્ટ

મહત્વપૂર્ણ નોંધ: આ લખતી વખતે, નેટિવ CSS મેશનરી એક પ્રાયોગિક સુવિધા છે. તેનો સપોર્ટ ખૂબ મર્યાદિત છે. આ એક ભવિષ્યલક્ષી ટેકનોલોજી છે.

• Firefox: સપોર્ટેડ છે, પરંતુ ફીચર ફ્લેગ પાછળ છે. તેને સક્ષમ કરવા માટે, તમારા Firefox બ્રાઉઝરમાં about:config પર જાઓ અને layout.css.grid-template-masonry-value.enabled ને true પર સેટ કરો.
• Safari: અગાઉ સફારી ટેકનોલોજી પ્રીવ્યૂમાં ઉપલબ્ધ હતું પરંતુ સ્પષ્ટીકરણ અપડેટ્સ બાકી હોવાથી તેને દૂર કરવામાં આવ્યું છે.
• Chrome/Edge: હજુ સુધી અમલમાં નથી.

નવીનતમ સપોર્ટ માહિતી માટે CanIUse.com જેવા સંસાધનો તપાસવા મહત્વપૂર્ણ છે. કારણ કે સપોર્ટ વ્યાપક નથી, આ સોલ્યુશનનો ઉપયોગ મજબૂત ફોલબેક વ્યૂહરચના વિના પ્રોડક્શનમાં કરી શકાતો નથી.

નેટિવ CSS મેશનરી કેવી રીતે અમલમાં મૂકવી

અમલીકરણ સુંદર રીતે સરળ છે. આ જ આ સુવિધાને આટલી ઉત્તેજક બનાવે છે.

ઉદાહરણ CSS:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-template-rows: masonry;
  gap: 1em; /* 'gap' is the modern shorthand for grid-gap */
  align-items: start; /* Ensures items start at the top of their track */
}
            

              
                Copy
              
            
          

બસ એટલું જ. ચાલો આ પ્રોપર્ટીઝને સમજીએ:

• display: grid;: આવશ્યક પ્રારંભિક બિંદુ.
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));: આ એક ક્લાસિક રિસ્પોન્સિવ ગ્રિડ સેટઅપ છે. તે બ્રાઉઝરને જેટલી કૉલમ્સ ફિટ થઈ શકે તેટલી બનાવવા માટે કહે છે, જેમાં દરેક કૉલમ ઓછામાં ઓછી 250px પહોળી હોય અને કોઈપણ વધારાની જગ્યા ભરવા માટે વધે.
• grid-template-rows: masonry;: આ જાદુઈ પ્રોપર્ટી છે. તે રો લેઆઉટ અલ્ગોરિધમને પ્રમાણભૂત ગ્રિડમાંથી મેશનરીમાં સ્વિચ કરે છે.
• gap: 1em;: બધી ગ્રિડ આઇટમ્સ વચ્ચે, આડી અને ઊભી બંને રીતે, અંતર વ્યાખ્યાયિત કરે છે.
• align-items: start;: આ આઇટમ્સને તેમના ગ્રિડ ટ્રેકની શરૂઆતમાં સંરેખિત કરે છે. ઊભા મેશનરી લેઆઉટ માટે, આ ડિફોલ્ટ વર્તન છે, પરંતુ સ્પષ્ટ રહેવું એ સારી પ્રથા છે.

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

પ્રોડક્શન-રેડી વ્યૂહરચના: પ્રગતિશીલ ઉન્નતીકરણ (Progressive Enhancement)

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

આપણી વ્યૂહરચના હશે:

1. જે બ્રાઉઝર્સ તેને સપોર્ટ કરે છે તેમના માટે આધુનિક, નેટિવ CSS મેશનરીનો ઉપયોગ કરો.
2. અન્ય તમામ બ્રાઉઝર્સ માટે CSS ગ્રિડ + જાવાસ્ક્રિપ્ટ સ્પાનિંગ તકનીકનો ઉપયોગ કરીને એક મજબૂત ફોલબેક પ્રદાન કરો.

પગલું 1: બેઝ CSS (ધ ફોલબેક)

આપણે આપણા જાવાસ્ક્રિપ્ટ-સંચાલિત ફોલબેક માટે CSS લખીને શરૂઆત કરીશું. આ તે કોડ હશે જે બધા બ્રાઉઝર્સને શરૂઆતમાં પ્રાપ્ત થશે.

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1em;
  /* The small row height for our JS-based spanning calculation */
  grid-auto-rows: 10px;
}

.item {
  /* We add some basic styling for the items */
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 1em;
  box-sizing: border-box;
}
            

              
                Copy
              
            
          

પગલું 2: જાવાસ્ક્રિપ્ટ ફોલબેક

આગળ, આપણે જાવાસ્ક્રિપ્ટ લખીએ છીએ જે ફોલબેકને પાવર કરે છે. આ સ્ક્રિપ્ટ ફક્ત ત્યારે જ ચાલશે જો નેટિવ CSS સોલ્યુશન ઉપલબ્ધ ન હોય.

            // Wait until the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
  // Check if the browser supports 'grid-template-rows: masonry'
  const isMasonrySupported = CSS.supports('grid-template-rows', 'masonry');

  if (!isMasonrySupported) {
    console.log("Browser does not support native CSS Masonry. Applying JS fallback.");
    applyMasonryFallback();

    // Optional: Re-run on window resize
    window.addEventListener('resize', debounce(applyMasonryFallback, 150));
  }
});

function applyMasonryFallback() {
  const container = document.querySelector('.masonry-container');
  if (!container) return;

  // Get all direct children of the container
  const items = container.children;

  // Define grid properties (should match your CSS)
  const rowHeight = 10; 
  const rowGap = 16; // Assuming 1em = 16px

  for (let item of items) {
    item.style.gridRowEnd = 'auto'; // Reset previous spans
    const itemHeight = item.offsetHeight;
    const rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap));
    item.style.gridRowEnd = `span ${rowSpan}`;
  }
}

// Debounce function to limit how often a function can run
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}
            

              
                Copy
              
            
          

પગલું 3: `@supports` સાથે ઉન્નતીકરણ

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

આપણે આને આપણી સ્ટાઇલશીટમાં ઉમેરીએ છીએ:

            /* Apply these rules ONLY if the browser supports native Masonry */
@supports (grid-template-rows: masonry) {
  .masonry-container {
    /* Override the fallback grid-auto-rows */
    grid-template-rows: masonry;
    grid-auto-rows: unset; /* Or 'auto', to be clean */
  }
}
            

              
                Copy
              
            
          

આ બધું કેવી રીતે એકસાથે આવે છે

1. એક આધુનિક બ્રાઉઝર (જેમ કે ફ્લેગ કરેલ ફાયરફોક્સ): બ્રાઉઝર CSS વાંચે છે. તે grid-template-rows: masonry સમજે છે. @supports બ્લોક લાગુ થાય છે, જે grid-auto-rows ને ઓવરરાઇડ કરે છે અને નેટિવ, પર્ફોર્મન્ટ મેશનરી લેઆઉટને સક્ષમ કરે છે. આપણું જાવાસ્ક્રિપ્ટ CSS.supports() તપાસે છે, જે true પરત કરે છે, તેથી ફોલબેક ફંક્શન ક્યારેય ચાલતું નથી. વપરાશકર્તાને શ્રેષ્ઠ સંભવિત અનુભવ મળે છે.
2. એક પ્રમાણભૂત બ્રાઉઝર (જેમ કે ક્રોમ): બ્રાઉઝર CSS વાંચે છે. તે grid-template-rows: masonry સમજતું નથી, તેથી તે @supports બ્લોકને સંપૂર્ણપણે અવગણે છે. તે grid-auto-rows: 10px સહિત, બેઝ CSS લાગુ કરે છે. આપણું જાવાસ્ક્રિપ્ટ CSS.supports() તપાસે છે, જે false પરત કરે છે. applyMasonryFallback() ફંક્શન ટ્રિગર થાય છે, જે રો સ્પાન્સની ગણતરી કરે છે અને તેમને ગ્રિડ આઇટમ્સ પર લાગુ કરે છે. વપરાશકર્તાને જાવાસ્ક્રિપ્ટ દ્વારા સંચાલિત, સંપૂર્ણપણે કાર્યરત મેશનરી લેઆઉટ મળે છે.

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

નિષ્કર્ષ: ભવિષ્ય માટે નિર્માણ

CSS માં એક સરળ, ઘોષણાત્મક મેશનરી લેઆઉટ સુધીની સફર લાંબી રહી છે, પરંતુ આપણે એક મોટી સફળતાની અણી પર છીએ. જ્યારે grid-template-rows: masonry હજુ પણ તેના પ્રાયોગિક તબક્કામાં છે, તે વેબ લેઆઉટ ક્ષમતાઓ માટે એક નોંધપાત્ર છલાંગનું પ્રતિનિધિત્વ કરે છે.

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

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