CSS ગ્રીડ ટેમ્પલેટ કૉલમ્સ: ડાયનેમિક કૉલમ વ્યાખ્યામાં નિપુણતા

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

grid-template-columns ને સમજવું

grid-template-columns પ્રોપર્ટી ગ્રીડ કન્ટેનરમાં કૉલમની સંખ્યા અને પહોળાઈનો ઉલ્લેખ કરે છે. તમે વિવિધ એકમોનો ઉપયોગ કરીને કૉલમનું કદ વ્યાખ્યાયિત કરી શકો છો, જેમાં સમાવેશ થાય છે:

• નિશ્ચિત લંબાઈ: પિક્સેલ્સ (px), પોઈન્ટ્સ (pt), સેન્ટીમીટર (cm), મિલીમીટર (mm), ઈંચ (in)
• સાપેક્ષ લંબાઈ: Ems (em), rems (rem), વ્યુપોર્ટ પહોળાઈ (vw), વ્યુપોર્ટ ઊંચાઈ (vh)
• ભાગાંક એકમ: fr (ગ્રીડ કન્ટેનરમાં ઉપલબ્ધ જગ્યાનો એક ભાગ દર્શાવે છે)
• કીવર્ડ્સ: auto, min-content, max-content, minmax()

ચાલો એક મૂળભૂત ઉદાહરણથી શરૂઆત કરીએ:

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

            

              
                Copy
              
            
          

આ કોડ ત્રણ કૉલમ સાથે ગ્રીડ બનાવે છે. પ્રથમ અને ત્રીજી કૉલમ દરેક ઉપલબ્ધ જગ્યાનો 1/4 ભાગ લે છે, જ્યારે બીજી કૉલમ 2/4 (અથવા 1/2) જગ્યા લે છે.

નિશ્ચિત વિરુદ્ધ સાપેક્ષ એકમો

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

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

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

            

              
                Copy
              
            
          

સાપેક્ષ એકમો (Ems, Rems, વ્યુપોર્ટ યુનિટ્સ): આ એકમો વધુ લવચીક છે. em અને rem ફોન્ટના કદને સંબંધિત છે, જે તત્વોને વધુ સારી સુલભતા માટે ટેક્સ્ટના કદ સાથે સ્કેલ કરવાની મંજૂરી આપે છે. vw અને vh વ્યુપોર્ટના કદને સંબંધિત છે, જે વિવિધ સ્ક્રીન પરિમાણોને અનુરૂપ લેઆઉટને સક્ષમ કરે છે. ઉદાહરણ:

            .grid-container {
  display: grid;
  grid-template-columns: 10vw 20vw 70vw;
}

            

              
                Copy
              
            
          

ભાગાંક એકમ (fr)

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

આ ઉદાહરણ ધ્યાનમાં લો:

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

            

              
                Copy
              
            
          

અહીં, પ્રથમ કૉલમ 100 પિક્સેલ્સ પહોળી છે. બાકીની જગ્યા પછી બીજી અને ત્રીજી કૉલમ વચ્ચે વહેંચવામાં આવે છે, જેમાં બીજી કૉલમ બાકીની જગ્યાનો 1/3 ભાગ અને ત્રીજી કૉલમ 2/3 ભાગ લે છે.

કીવર્ડ્સ: auto, min-content, max-content

CSS ગ્રીડ કૉલમની પહોળાઈને વ્યાખ્યાયિત કરવા માટે ઘણા કીવર્ડ્સ પ્રદાન કરે છે:

• auto: બ્રાઉઝર તેની સામગ્રીના આધારે કૉલમની પહોળાઈની આપમેળે ગણતરી કરે છે.
• min-content: કૉલમની પહોળાઈ તેની સામગ્રીને ઓવરફ્લો કર્યા વિના સમાવવા માટે જરૂરી ન્યૂનતમ કદ પર સેટ કરેલી છે. આનો અર્થ લાંબા શબ્દોને રેપ (wrap) કરવાનો હોઈ શકે છે.
• max-content: કૉલમની પહોળાઈ તેની સામગ્રીને રેપ કર્યા વિના સમાવવા માટે જરૂરી મહત્તમ કદ પર સેટ કરેલી છે. આ શક્ય હોય તો શબ્દોને નવી લાઈનો પર રેપ થતા અટકાવશે.

auto નો ઉપયોગ કરીને ઉદાહરણ:

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

            

              
                Copy
              
            
          

આ કિસ્સામાં, પ્રથમ અને ત્રીજી કૉલમ તેમની સામગ્રીને ફિટ કરવા માટે તેમની પહોળાઈને સમાયોજિત કરશે, જ્યારે બીજી કૉલમ બાકીની જગ્યા લેશે.

min-content અને max-content નો ઉપયોગ કરીને ઉદાહરણ:

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
}

            

              
                Copy
              
            
          

પહેલી કૉલમ તેની સામગ્રીના સૌથી નાના ભાગ જેટલી જ પહોળી હશે, જ્યારે બીજી કૉલમ શક્ય હોય તો તેની બધી સામગ્રીને એક લાઈનમાં ફિટ કરવા માટે વિસ્તૃત થશે.

minmax() ફંક્શન

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

સિન્ટેક્સ:

            minmax(min, max)

            

              
                Copy
              
            
          

ઉદાહરણ:

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

            

              
                Copy
              
            
          

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

repeat() સાથે કૉલમ વ્યાખ્યાઓનું પુનરાવર્તન

repeat() ફંક્શન પુનરાવર્તિત કૉલમ પેટર્નને વ્યાખ્યાયિત કરવાનું સરળ બનાવે છે. તે બે દલીલો લે છે: પેટર્નનું પુનરાવર્તન કેટલી વાર કરવું અને પેટર્ન પોતે.

સિન્ટેક્સ:

            repeat(number, pattern)

            

              
                Copy
              
            
          

ઉદાહરણ:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

            

              
                Copy
              
            
          

આ કોડ આના સમકક્ષ છે:

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

            

              
                Copy
              
            
          

તમે repeat() ને અન્ય એકમો અને કીવર્ડ્સ સાથે પણ જોડી શકો છો:

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

            

              
                Copy
              
            
          

આ નીચેની કૉલમ રચના સાથે ગ્રીડ બનાવે છે: 100px, 1fr, 200px, 1fr, 200px, auto.

repeat() સાથે auto-fill અને auto-fit નો ઉપયોગ

repeat() સાથે વપરાતા auto-fill અને auto-fit કીવર્ડ્સ ડાયનેમિક કૉલમ બનાવે છે જે આપમેળે ઉપલબ્ધ જગ્યામાં સમાયોજિત થાય છે. તે ખાસ કરીને રિસ્પોન્સિવ ગેલેરીઓ અથવા યાદીઓ બનાવવા માટે ઉપયોગી છે.

• auto-fill: કન્ટેનરને ઓવરફ્લો કર્યા વિના શક્ય તેટલી કૉલમ બનાવે છે, ભલે કેટલીક કૉલમ ખાલી હોય.
• auto-fit: auto-fill જેવું જ છે, પરંતુ ખાલી કૉલમને 0 પહોળાઈમાં સંકુચિત કરે છે, જેનાથી અન્ય કૉલમ ઉપલબ્ધ જગ્યાને ભરવા માટે વિસ્તૃત થઈ શકે છે.

auto-fill નો ઉપયોગ કરીને ઉદાહરણ:

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

            

              
                Copy
              
            
          

આ શક્ય તેટલી કૉલમ બનાવે છે, દરેકની ન્યૂનતમ પહોળાઈ 200 પિક્સેલ્સ અને મહત્તમ પહોળાઈ છે જે તેમને ઉપલબ્ધ જગ્યા ભરવાની મંજૂરી આપે છે. જો બધી કૉલમ ભરવા માટે પૂરતી સામગ્રી ન હોય, તો કેટલીક કૉલમ ખાલી રહેશે, પરંતુ તે હજુ પણ જગ્યા લેશે.

auto-fit નો ઉપયોગ કરીને ઉદાહરણ:

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

            

              
                Copy
              
            
          

આ auto-fill ની જેમ જ કામ કરે છે, પરંતુ જો ખાલી કૉલમ હોય, તો તે 0 પહોળાઈમાં સંકુચિત થઈ જશે, અને બાકીની કૉલમ જગ્યા ભરવા માટે વિસ્તૃત થશે. રિસ્પોન્સિવ ગ્રીડ માટે આ ઘણીવાર ઇચ્છિત વર્તન હોય છે.

નામવાળી ગ્રીડ લાઈન્સ

તમે ગ્રીડ લાઈન્સને નામ આપી શકો છો, જે તમારા કોડને વધુ વાંચવા યોગ્ય અને જાળવવા યોગ્ય બનાવી શકે છે. આ grid-template-columns (અને grid-template-rows) પ્રોપર્ટીને વ્યાખ્યાયિત કરતી વખતે નામોને ચોરસ કૌંસમાં બંધ કરીને કરવામાં આવે છે.

ઉદાહરણ:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-2] 2fr [col-end];
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, આપણે પ્રથમ ગ્રીડ લાઈનને col-start, બીજી ગ્રીડ લાઈનને col-2, અને ત્રીજી ગ્રીડ લાઈનને col-end નામ આપ્યું છે. પછી તમે grid-column-start, grid-column-end, grid-row-start, અને grid-row-end પ્રોપર્ટીઝનો ઉપયોગ કરીને ગ્રીડ આઈટમ્સ મૂકતી વખતે આ નામોનો ઉપયોગ કરી શકો છો.

            .grid-item {
  grid-column-start: col-start;
  grid-column-end: col-2;
}

            

              
                Copy
              
            
          

આ ગ્રીડ આઈટમને col-start લાઈનથી શરૂ કરીને col-2 લાઈન પર સમાપ્ત કરે છે.

વ્યવહારુ ઉદાહરણો અને ઉપયોગના કિસ્સાઓ

અહીં વાસ્તવિક દુનિયાના સંજોગોમાં grid-template-columns નો ઉપયોગ કેવી રીતે કરવો તેના કેટલાક વ્યવહારુ ઉદાહરણો છે:

1. રિસ્પોન્સિવ નેવિગેશન બાર

એક નેવિગેશન બાર જે વિવિધ સ્ક્રીન કદને અનુરૂપ બને છે:

            .navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px;
}

.logo {
  /* Styles for logo */
}

.nav-links {
  display: flex;
  justify-content: space-around;
}

.search-bar {
  /* Styles for search bar */
}

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr;
  }
  .nav-links {
    flex-direction: column;
  }
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, નેવબારમાં ત્રણ કૉલમ છે: એક લોગો માટે (auto), એક નેવિગેશન લિંક્સ માટે (1fr), અને એક સર્ચ બાર માટે (auto). નાની સ્ક્રીન પર, ગ્રીડ એક જ કૉલમમાં સંકુચિત થાય છે, અને નેવિગેશન લિંક્સ ઊભી રીતે ગોઠવાય છે.

2. ઈમેજ ગેલેરી

લવચીક સંખ્યામાં કૉલમ સાથેની રિસ્પોન્સિવ ઈમેજ ગેલેરી:

            .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.gallery-item {
  /* Styles for gallery items */
}

            

              
                Copy
              
            
          

આ એક ઈમેજ ગેલેરી બનાવે છે જેમાં કૉલમ ઓછામાં ઓછી 250 પિક્સેલ્સ પહોળી હોય છે અને ઉપલબ્ધ જગ્યા ભરવા માટે વિસ્તૃત થાય છે. auto-fit કીવર્ડ સુનિશ્ચિત કરે છે કે ખાલી કૉલમ સંકુચિત થાય છે, અને છબીઓ કન્ટેનરને સરસ રીતે ભરે છે.

3. સાઇડબાર સાથે બે-કૉલમ લેઆઉટ

નિશ્ચિત-પહોળાઈવાળા સાઇડબાર અને લવચીક મુખ્ય સામગ્રી ક્ષેત્ર સાથેનું ક્લાસિક બે-કૉલમ લેઆઉટ:

            .container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

.sidebar {
  /* Styles for sidebar */
}

.main-content {
  /* Styles for main content */
}

            

              
                Copy
              
            
          

સાઇડબારની નિશ્ચિત પહોળાઈ 250 પિક્સેલ્સ છે, જ્યારે મુખ્ય સામગ્રી ક્ષેત્ર બાકીની જગ્યા લે છે.

4. નામવાળા ગ્રીડ ક્ષેત્રો સાથે જટિલ લેઆઉટ

વધુ જટિલ લેઆઉટ માટે, તમે તમારા ગ્રીડના ચોક્કસ વિસ્તારોને વ્યાખ્યાયિત કરવા માટે grid-template-columns ને grid-template-areas સાથે જોડી શકો છો.

            .container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  /* Styles for header */
}

.sidebar {
  grid-area: sidebar;
  /* Styles for sidebar */
}

.main {
  grid-area: main;
  /* Styles for main content */
}

.footer {
  grid-area: footer;
  /* Styles for footer */
}

            

              
                Copy
              
            
          

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

ઍક્સેસિબિલિટી વિચારણાઓ

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

પ્રદર્શન ઓપ્ટિમાઇઝેશન

CSS ગ્રીડ સામાન્ય રીતે કાર્યક્ષમ છે, પરંતુ પ્રદર્શનને શ્રેષ્ઠ બનાવવા માટે તમે કેટલીક બાબતો કરી શકો છો:

• વધુ પડતા નેસ્ટિંગને ટાળો: રેન્ડરિંગ ઓવરહેડ ઘટાડવા માટે તમારી ગ્રીડ રચનાઓને શક્ય તેટલી સરળ રાખો.
• હાર્ડવેર એક્સિલરેશનનો ઉપયોગ કરો: રેન્ડરિંગ પ્રદર્શનને સુધારવા માટે હાર્ડવેર એક્સિલરેશનને ટ્રિગર કરતી CSS પ્રોપર્ટીઝનો ઉપયોગ કરો (દા.ત., transform: translateZ(0)).
• છબીઓને ઑપ્ટિમાઇઝ કરો: ખાતરી કરો કે તમારી છબીઓ પેજ લોડ સમય ઘટાડવા માટે યોગ્ય રીતે ઑપ્ટિમાઇઝ થયેલ છે.
• વિવિધ ઉપકરણો પર પરીક્ષણ કરો: કોઈપણ પ્રદર્શન સમસ્યાઓને ઓળખવા અને ઉકેલવા માટે વિવિધ ઉપકરણો અને બ્રાઉઝર્સ પર તમારા લેઆઉટનું સંપૂર્ણ પરીક્ષણ કરો.

CSS ગ્રીડ લેઆઉટનું ડિબગીંગ

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

grid-template-columns નો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

• તમારા લેઆઉટની યોજના બનાવો: તમે કોડિંગ શરૂ કરો તે પહેલાં, તમારા ગ્રીડ લેઆઉટની કાળજીપૂર્વક યોજના બનાવો અને મુખ્ય વિસ્તારો અને તેમના ઇચ્છિત કદને ઓળખો.
• સાપેક્ષ એકમોનો ઉપયોગ કરો: રિસ્પોન્સિવ લેઆઉટ બનાવવા માટે fr, em, અને vw જેવા સાપેક્ષ એકમોને પ્રાધાન્ય આપો.
• minmax() નો ઉપયોગ કરો: વિવિધ સામગ્રી અને સ્ક્રીન કદને અનુરૂપ લવચીક કૉલમ કદને વ્યાખ્યાયિત કરવા માટે minmax() ફંક્શનનો ઉપયોગ કરો.
• repeat() નો ઉપયોગ કરો: પુનરાવર્તિત કૉલમ પેટર્નને સરળ બનાવવા માટે repeat() ફંક્શનનો ઉપયોગ કરો.
• ઍક્સેસિબિલિટીનો વિચાર કરો: ખાતરી કરો કે તમારા લેઆઉટ બધા વપરાશકર્તાઓ માટે સુલભ છે.
• સંપૂર્ણપણે પરીક્ષણ કરો: તમારા લેઆઉટ અપેક્ષા મુજબ કામ કરે છે તેની ખાતરી કરવા માટે વિવિધ ઉપકરણો અને બ્રાઉઝર્સ પર તેનું પરીક્ષણ કરો.
• સ્વચ્છ, જાળવણીક્ષમ કોડ લખો: તમારા કોડને વધુ વાંચવા યોગ્ય અને જાળવવા યોગ્ય બનાવવા માટે નામવાળી ગ્રીડ લાઈન્સ અને ટિપ્પણીઓનો ઉપયોગ કરો.

નિષ્કર્ષ

grid-template-columns પ્રોપર્ટી લવચીક, પ્રતિભાવશીલ અને ગતિશીલ વેબ લેઆઉટ બનાવવા માટે એક શક્તિશાળી સાધન છે. ઉપલબ્ધ વિવિધ એકમો, કીવર્ડ્સ અને ફંક્શન્સમાં નિપુણતા મેળવીને, તમે CSS ગ્રીડની સંપૂર્ણ સંભાવનાને અનલૉક કરી શકો છો અને અદભૂત વેબ ડિઝાઇન બનાવી શકો છો જે કોઈપણ સ્ક્રીન કદ અને સામગ્રીની જરૂરિયાતને અનુરૂપ હોય. શ્રેષ્ઠ પરિણામોની ખાતરી કરવા માટે તમારા લેઆઉટની કાળજીપૂર્વક યોજના બનાવવાનું, સાપેક્ષ એકમોનો ઉપયોગ કરવાનું, ઍક્સેસિબિલિટીનો વિચાર કરવાનું અને સંપૂર્ણ પરીક્ષણ કરવાનું યાદ રાખો. આ શ્રેષ્ઠ પદ્ધતિઓનું પાલન કરીને, તમે આધુનિક, વપરાશકર્તા-મૈત્રીપૂર્ણ વેબસાઇટ્સ બનાવી શકો છો જે બધા વપરાશકર્તાઓ માટે એક શ્રેષ્ઠ અનુભવ પ્રદાન કરે છે.

વધુ સંસાધનો

• MDN વેબ ડૉક્સ: grid-template-columns
• CSS-ટ્રિક્સ: CSS ગ્રીડ માટે સંપૂર્ણ માર્ગદર્શિકા
• ઉદાહરણ દ્વારા ગ્રીડ