ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು: ಅರ್ಥಪೂರ್ಣ ಲೇಔಟ್ ನಾಮಕರಣ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಪರಿಣತಿ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಕ್ರಿಯಾತ್ಮಕ ಜಗತ್ತಿನಲ್ಲಿ, ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಲೇಔಟ್ ನಾವು ಪುಟ ರಚನೆಯನ್ನು ಸಮೀಪಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದೆ, ಇದು ಸಾಟಿಯಿಲ್ಲದ ಮಟ್ಟದ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ. ಅದರ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಸೇರಿವೆ, ಇದು ಗ್ರಿಡ್‌ನೊಳಗೆ ಐಟಂಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಇರಿಸಲು ಒಂದು ಅರ್ಥಪೂರ್ಣ ವಿಧಾನವಾಗಿದೆ. ಈ ಮಾರ್ಗದರ್ಶಿ ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಲೇಔಟ್‌ನ ಓದುವಿಕೆಯನ್ನು ಹೇಗೆ ಹೆಚ್ಚಿಸುತ್ತವೆ, ಅರ್ಥಪೂರ್ಣ ರಚನೆಯನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತವೆ ಮತ್ತು ಎಲ್ಲಾ ಸಾಧನಗಳಲ್ಲಿ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ ಅತ್ಯಾಧುನಿಕ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಹೇಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತವೆ ಎಂಬುದರ ಬಗ್ಗೆ ಆಳವಾಗಿ ಚರ್ಚಿಸುತ್ತದೆ.

ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಲೇಔಟ್

ನಾವು ಗ್ರಿಡ್ ಏರಿಯಾಗಳ ಬಗ್ಗೆ ಆಳವಾಗಿ ತಿಳಿಯುವ ಮೊದಲು, ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಲೇಔಟ್‌ನ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಗ್ರಹಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಗ್ರಿಡ್ ಲೇಔಟ್ ಒಂದು ಎರಡು-ಆಯಾಮದ ಲೇಔಟ್ ವ್ಯವಸ್ಥೆಯಾಗಿದ್ದು, ಇದು ವೆಬ್ ಪುಟವನ್ನು ವಿಭಿನ್ನ ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳಾಗಿ ವಿಂಗಡಿಸಲು ಮತ್ತು ನಂತರ ಆ ವಿಭಾಗಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ನಿಖರವಾಗಿ ಇರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ಗಿಂತ ಭಿನ್ನವಾಗಿ, ಇದು ಪ್ರಾಥಮಿಕವಾಗಿ ಒಂದು-ಆಯಾಮದ ಲೇಔಟ್ ವ್ಯವಸ್ಥೆಯಾಗಿದೆ (ಸಾಲು ಅಥವಾ ಕಾಲಮ್), ಗ್ರಿಡ್ ಸಂಕೀರ್ಣ, ಪುಟ-ಮಟ್ಟದ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ சிறೇಷ್ಠವಾಗಿದೆ.

ನೆನಪಿಡಬೇಕಾದ ಪ್ರಮುಖ ಪದಗಳು:

• ಗ್ರಿಡ್ ಕಂಟೇನರ್: display: grid; ಅಥವಾ display: inline-grid; ಅನ್ನು ಅನ್ವಯಿಸಲಾದ ಎಲಿಮೆಂಟ್. ಈ ಎಲಿಮೆಂಟ್ ಎಲ್ಲಾ ನೇರ ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ಪೇರೆಂಟ್ ಆಗುತ್ತದೆ.
• ಗ್ರಿಡ್ ಐಟಂ: ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ನೇರ ಮಕ್ಕಳು. ಇವು ಗ್ರಿಡ್‌ನೊಳಗೆ ಲೇಔಟ್ ಮಾಡಲಾಗುವ ಎಲಿಮೆಂಟ್‌ಗಳಾಗಿವೆ.
• ಗ್ರಿಡ್ ಲೈನ್: ಗ್ರಿಡ್ ರಚನೆಯನ್ನು ರೂಪಿಸುವ ಅಡ್ಡ ಮತ್ತು ಲಂಬ ವಿಭಜಿಸುವ ರೇಖೆಗಳು.
• ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್: ಎರಡು ಪಕ್ಕದ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳ ನಡುವಿನ ಸ್ಥಳ, ಇದು ಸಾಲು ಅಥವಾ ಕಾಲಮ್ ಆಗಿರಬಹುದು.
• ಗ್ರಿಡ್ ಸೆಲ್: ಗ್ರಿಡ್‌ನ ಚಿಕ್ಕ ಘಟಕ, ಒಂದು ಗ್ರಿಡ್ ಸಾಲು ಮತ್ತು ಗ್ರಿಡ್ ಕಾಲಮ್‌ನ ಛೇದಕ.
• ಗ್ರಿಡ್ ಏರಿಯಾ: ನಾಲ್ಕು ಗ್ರಿಡ್ ಲೈನ್‌ಗಳಿಂದ ರಚಿಸಲಾದ ಒಂದು ಆಯತಾಕಾರದ ಪ್ರದೇಶ, ಇದನ್ನು ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಗ್ರಿಡ್ ಐಟಂಗಳನ್ನು ಇರಿಸಲು ಬಳಸಬಹುದು.

ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳ ಪರಿಚಯ: ನಾಮಕರಣದ ಶಕ್ತಿ

ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ನಿಮ್ಮ ಗ್ರಿಡ್ ಲೇಔಟ್‌ನಲ್ಲಿ ವಿಭಿನ್ನ ಪ್ರದೇಶಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಉನ್ನತ-ಮಟ್ಟದ ಅಮೂರ್ತತೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. ಲೈನ್ ಸಂಖ್ಯೆಗಳು ಅಥವಾ ಸ್ಪ್ಯಾನಿಂಗ್ ಪ್ರಾಪರ್ಟಿಗಳ ಮೇಲೆ ಮಾತ್ರ ಅವಲಂಬಿತರಾಗುವ ಬದಲು, ನಿಮ್ಮ ಗ್ರಿಡ್‌ನ ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಗಳಿಗೆ ನೀವು ಅರ್ಥಪೂರ್ಣ ಹೆಸರುಗಳನ್ನು ನಿಯೋಜಿಸಬಹುದು. ಇದು ಒಂದು ಅರ್ಥಪೂರ್ಣ ಸ್ಪಷ್ಟತೆಯ ಪದರವನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಲೇಔಟ್ ಕೋಡ್ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.

ಗ್ರಿಡ್ ಏರಿಯಾಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಪ್ರಮುಖ ಪ್ರಾಪರ್ಟಿಗಳು:

• grid-template-areas: ಹೆಸರಿಸಿದ ಗ್ರಿಡ್ ಏರಿಯಾಗಳನ್ನು ಉಲ್ಲೇಖಿಸುವ ಮೂಲಕ ಗ್ರಿಡ್‌ನ ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• grid-area: ಗ್ರಿಡ್ ಐಟಂ ಅನ್ನು ಹೆಸರಿಸಿದ ಗ್ರಿಡ್ ಏರಿಯಾಕ್ಕೆ ನಿಯೋಜಿಸುತ್ತದೆ.

grid-template-areas ನೊಂದಿಗೆ ಲೇಔಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

grid-template-areas ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿಯೇ ನಿಜವಾದ ಮ್ಯಾಜಿಕ್ ನಡೆಯುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್‌ನೊಳಗೆ ನಿಮ್ಮ ಗ್ರಿಡ್ ರಚನೆಯನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ರತಿನಿಧಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ನೀವು ಪ್ರತ್ಯೇಕ ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯಗಳಿಂದ ಸಾಲುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ ಮತ್ತು ಪ್ರತಿ ಸ್ಟ್ರಿಂಗ್‌ನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಿದ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್ ('') ಅಥವಾ ಪೂರ್ಣವಿರಾಮ (.) ಅನ್ನು ಖಾಲಿ ಗ್ರಿಡ್ ಸೆಲ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಬಳಸಬಹುದು.

ಸಾಮಾನ್ಯ ವೆಬ್‌ಸೈಟ್ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸೋಣ:

ಎಚ್‌ಟಿಎಂಎಲ್ ರಚನೆ:

            <div class="grid-container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>
            

              
                Copy
              
            
          

grid-template-areas ಜೊತೆ ಸಿಎಸ್ಎಸ್:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav main"
    "sidebar main"
    "footer footer";
  gap: 20px;
  height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• ನಾವು ಎರಡು ಕಾಲಮ್‌ಗಳು (1fr ಮತ್ತು 3fr) ಮತ್ತು ಮೂರು ಸಾಲುಗಳನ್ನು (auto, 1fr, auto) ಹೊಂದಿರುವ ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ.
• grid-template-areas ಪ್ರಾಪರ್ಟಿಯು ಈ ಹೆಸರಿಸಿದ ಪ್ರದೇಶಗಳು ಗ್ರಿಡ್ ಸೆಲ್‌ಗಳನ್ನು ಹೇಗೆ ಆಕ್ರಮಿಸಿಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ನಕ್ಷೆ ಮಾಡುತ್ತದೆ. ಮೊದಲ ಸ್ಟ್ರಿಂಗ್ "header header" 'ಹೆಡರ್' ಪ್ರದೇಶವು ಮೊದಲ ಸಾಲಿನಲ್ಲಿ ಎರಡೂ ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
• ಎರಡನೇ ಸ್ಟ್ರಿಂಗ್ "nav main" 'ನ್ಯಾವ್' ಅನ್ನು ಮೊದಲ ಕಾಲಮ್‌ನಲ್ಲಿ ಮತ್ತು 'ಮೇನ್' ಅನ್ನು ಎರಡನೇ ಸಾಲಿನ ಎರಡನೇ ಕಾಲಮ್‌ನಲ್ಲಿ ಇರಿಸುತ್ತದೆ.
• ಮೂರನೇ ಸ್ಟ್ರಿಂಗ್ "sidebar main" 'ಸೈಡ್‌ಬಾರ್' ಅನ್ನು ಮೊದಲ ಕಾಲಮ್‌ನಲ್ಲಿ ಮತ್ತು ಮತ್ತೆ 'ಮೇನ್' ಅನ್ನು ಮೂರನೇ ಸಾಲಿನ ಎರಡನೇ ಕಾಲಮ್‌ನಲ್ಲಿ ಇರಿಸುತ್ತದೆ. ಇಲ್ಲಿ 'ಮೇನ್' ಎರಡು ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಿರುವುದನ್ನು ಗಮನಿಸಿ.
• ಕೊನೆಯ ಸ್ಟ್ರಿಂಗ್ "footer footer" 'ಫೂಟರ್' ಪ್ರದೇಶಕ್ಕಾಗಿ ಕೊನೆಯ ಸಾಲಿನಲ್ಲಿ ಎರಡೂ ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುತ್ತದೆ.

ಪ್ರತಿ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿರುವ grid-area ಪ್ರಾಪರ್ಟಿಯು grid-template-areas ನಲ್ಲಿ ಬಳಸಲಾದ ಹೆಸರುಗಳಿಗೆ ನೇರವಾಗಿ ಹೇಗೆ ಸಂಬಂಧಿಸಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ಇದು ಪ್ರತಿಯೊಂದು ವಿಷಯವು ಎಲ್ಲಿಗೆ ಸೇರಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನಂಬಲಾಗದಷ್ಟು ಅರ್ಥಗರ್ಭಿತವಾಗಿಸುತ್ತದೆ.

ಗ್ರಿಡ್ ಏರಿಯಾಗಳನ್ನು ಏಕೆ ಹೆಸರಿಸಬೇಕು? ಅರ್ಥಪೂರ್ಣ ಪ್ರಯೋಜನ

ಗ್ರಿಡ್ ಏರಿಯಾಗಳ ನಿಜವಾದ ಶಕ್ತಿ ಅವುಗಳ ಅರ್ಥಪೂರ್ಣ ಅರ್ಥದಲ್ಲಿದೆ. 'ಹೆಡರ್', 'ನ್ಯಾವ್', 'ಮೇನ್', 'ಸೈಡ್‌ಬಾರ್' ಮತ್ತು 'ಫೂಟರ್' ನಂತಹ ಹೆಸರುಗಳನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಕೇವಲ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಥಾನೀಕರಿಸುತ್ತಿಲ್ಲ; ನೀವು ನಿಮ್ಮ ವೆಬ್‌ಪುಟದ ವಾಸ್ತುಶಿಲ್ಪದ ವಲಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿದ್ದೀರಿ. ಇದು ಹಲವಾರು ಆಳವಾದ ಪ್ರಯೋಜನಗಳನ್ನು ಹೊಂದಿದೆ:

1. ಸುಧಾರಿತ ಓದುವಿಕೆ: ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸುವಾಗ, ಎಚ್‌ಟಿಎಂಎಲ್ ರಚನೆಯನ್ನು ನೋಡದೆಯೇ ಲೇಔಟ್‌ನ ಪ್ರತಿಯೊಂದು ವಿಭಾಗವು ಯಾವ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ ಎಂಬುದು ತಕ್ಷಣವೇ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ. ಇದು ತಂಡದ ಸಹಯೋಗ ಮತ್ತು ದೀರ್ಘಾವಧಿಯ ಪ್ರಾಜೆಕ್ಟ್ ನಿರ್ವಹಣೆಗೆ ಅಮೂಲ್ಯವಾಗಿದೆ.
2. ವರ್ಧಿತ ನಿರ್ವಹಣೆ: ನೀವು ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಮರುರಚಿಸಬೇಕಾದರೆ ಅಥವಾ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸರಿಸಬೇಕಾದರೆ, ಸಂಕೀರ್ಣ ಲೈನ್ ಸಂಖ್ಯೆಗಳು ಅಥವಾ ಸ್ಪ್ಯಾನಿಂಗ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಸರಿಹೊಂದಿಸದೆ, ಕೇವಲ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ grid-area ಪ್ರಾಪರ್ಟಿಯನ್ನು ಮರುನಿಯೋಜಿಸುವ ಮೂಲಕ ನೀವು ಅದನ್ನು ಮಾಡಬಹುದು.
3. ಅರ್ಥಪೂರ್ಣ ಸ್ಪಷ್ಟತೆ: ಹೆಸರುಗಳು ಉದ್ದೇಶಿತ ವಿಷಯ ಮತ್ತು ಕಾರ್ಯವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತವೆ, ದೃಶ್ಯ ಲೇಔಟ್ ಅನ್ನು ಎಚ್‌ಟಿಎಂಎಲ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಆಧಾರವಾಗಿರುವ ಅರ್ಥಪೂರ್ಣ ಅರ್ಥದೊಂದಿಗೆ ಹೊಂದಿಸುತ್ತವೆ.
4. ಸುಲಭವಾದ ಪುನರ್ರಚನೆ: ಲೇಔಟ್ ರಚನೆಯನ್ನು ಬದಲಾಯಿಸುವುದು grid-template-areas ಅನ್ನು ಮರುವ್ಯಾಖ್ಯಾನಿಸುವ ವಿಷಯವಾಗುತ್ತದೆ, ಇದು ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಐಟಂ ಸ್ಥಾನಗಳನ್ನು ನಿರ್ವಹಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ದೃಶ್ಯ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ.

ನೀವು ಮುಖ್ಯ ವಿಷಯದ ಮೊದಲು ಸೈಡ್‌ಬಾರ್ ಕಾಣಿಸಿಕೊಳ್ಳುವಂತೆ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸಬೇಕಾದ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಹೆಸರಿಸಿದ ಪ್ರದೇಶಗಳೊಂದಿಗೆ, ಇದು ನೇರವಾದ ಹೊಂದಾಣಿಕೆಯಾಗಿದೆ:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "main sidebar"  /* Changed order here */
    "footer footer";
  gap: 20px;
  height: 100vh;
}

/* The grid-area assignments for the items remain the same */
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

            

              
                Copy
              
            
          

ಈ ಮಾರ್ಪಡಿಸಿದ ಉದಾಹರಣೆಯಲ್ಲಿ, 'ಮೇನ್' ಮತ್ತು 'ಸೈಡ್‌ಬಾರ್' ಸ್ಥಾನಗಳನ್ನು ಬದಲಾಯಿಸಲು grid-template-areas ವ್ಯಾಖ್ಯಾನವನ್ನು ನವೀಕರಿಸಲಾಗಿದೆ. ಮುಖ್ಯವಾಗಿ, ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲಿನ grid-area ನಿಯೋಜನೆಗಳು ಬದಲಾಗಿಲ್ಲ, ಇದು ಈ ಅರ್ಥಪೂರ್ಣ ವಿಧಾನದ ಶಕ್ತಿಯನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಗ್ರಿಡ್ ಏರಿಯಾಗಳೊಂದಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸುವುದು

ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳ ಅತ್ಯಂತ ಮಹತ್ವದ ಪ್ರಯೋಜನಗಳಲ್ಲಿ ಒಂದು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸವನ್ನು ಸುಗಮಗೊಳಿಸುವ ಅವುಗಳ ಸಾಮರ್ಥ್ಯ. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು, ನೀವು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ನಿಮ್ಮ grid-template-areas ಅನ್ನು ಮರುವ್ಯಾಖ್ಯಾನಿಸಬಹುದು, ಕನಿಷ್ಠ ಕೋಡ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರಿವರ್ತಿಸಬಹುದು.

ನಮ್ಮ ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್ ಅನ್ನು ಅಳವಡಿಸಲು ವಿಸ್ತರಿಸೋಣ. ಚಿಕ್ಕ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ, ಎಲ್ಲಾ ವಿಭಾಗಗಳು ಲಂಬವಾಗಿ ಒಂದರ ಮೇಲೊಂದು ಬರುವ ಏಕ-ಕಾಲಮ್ ಲೇಔಟ್ ಅನ್ನು ನಾವು ಬಯಸಬಹುದು.

            /* Mobile-first approach */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "sidebar"
    "footer";
  gap: 15px;
  height: auto; /* Allow height to adjust naturally */
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

/* Tablet and Desktop adjustments */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "nav main"
      "sidebar main"
      "footer footer";
    gap: 20px;
    height: 100vh;
  }

  /* Re-assigning grid-area is often not needed here if the names are consistent,
     but it's good to be aware that you *can* change them if necessary.
     In this case, the names are just rearranged in the template areas. */
}

            

              
                Copy
              
            
          

ಈ ರೆಸ್ಪಾನ್ಸಿವ್ ಉದಾಹರಣೆಯಲ್ಲಿ:

• ಡೀಫಾಲ್ಟ್ (ಮೊಬೈಲ್-ಫಸ್ಟ್) ಶೈಲಿಗಳು ಏಕ-ಕಾಲಮ್ ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, ಅಲ್ಲಿ ಪ್ರತಿ ಹೆಸರಿಸಿದ ಪ್ರದೇಶವು ತನ್ನದೇ ಆದ ಸಾಲನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳುತ್ತದೆ.
• 768px ಮತ್ತು ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಮೀಡಿಯಾ ಕ್ವೆರಿಯು ನಮ್ಮ ಆರಂಭಿಕ ಡೆಸ್ಕ್‌ಟಾಪ್ ಉದಾಹರಣೆಯಂತೆಯೇ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ, ಬಹು-ಕಾಲಮ್ ಲೇಔಟ್ ಅನ್ನು ರಚಿಸಲು grid-template-areas ಅನ್ನು ಮರುವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

ಈ ವಿಧಾನವು ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ನಾಟಕೀಯ ಲೇಔಟ್ ಬದಲಾವಣೆಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಎಲ್ಲವನ್ನೂ grid-template-areas ಪ್ರಾಪರ್ಟಿಯ ಮೂಲಕ ಅಚ್ಚುಕಟ್ಟಾಗಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.

ನಿಮ್ಮ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ಅಂತರರಾಷ್ಟ್ರೀಕರಣಗೊಳಿಸುವುದು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸ ಮಾಡುವಾಗ, ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳು ನಿರ್ಣಾಯಕ, ಆದರೆ ವಿಭಿನ್ನ ಬರವಣಿಗೆ ವಿಧಾನಗಳು ಮತ್ತು ಭಾಷೆಯ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದು ಕೂಡ ಅಷ್ಟೇ ಮುಖ್ಯ. ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್, ಮತ್ತು ನಿರ್ದಿಷ್ಟವಾಗಿ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು, ಇದಕ್ಕಾಗಿ ಗಮನಾರ್ಹವಾಗಿ ಸೂಕ್ತವಾಗಿವೆ:

• ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಬೆಂಬಲ: ಬಲದಿಂದ ಎಡಕ್ಕೆ ಓದುವ ಭಾಷೆಗಳಲ್ಲಿ (ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂ ನಂತಹ), ಎಚ್‌ಟಿಎಂಎಲ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ direction ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬದಲಾಯಿಸಿದಾಗ ಕಾಲಮ್‌ಗಳ ದೃಶ್ಯ ಕ್ರಮವು ಸ್ವಾಭಾವಿಕವಾಗಿ ಹಿಮ್ಮುಖವಾಗುತ್ತದೆ. ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಅರ್ಥಪೂರ್ಣ ಹೆಸರುಗಳನ್ನು ಲೇಔಟ್ ಸ್ಲಾಟ್‌ಗಳಿಗೆ ನಕ್ಷೆ ಮಾಡುವುದರಿಂದ, ನಿಮ್ಮ ಹೆಸರಿಸಿದ ಪ್ರದೇಶಗಳು ತಮ್ಮ ಅರ್ಥವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಆದರೆ ಅವುಗಳ ದೃಶ್ಯ ಸ್ಥಾನವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, LTR ಲೇಔಟ್‌ನಲ್ಲಿ ಎಡಭಾಗದಲ್ಲಿದ್ದ 'ಸೈಡ್‌ಬಾರ್' RTL ಲೇಔಟ್‌ನಲ್ಲಿ ಬಲಭಾಗದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಒಂದು ವೇಳೆ `grid-template-areas` ಪರಿಕಲ್ಪನಾತ್ಮಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲ್ಪಟ್ಟಿದ್ದರೆ ಮತ್ತು ಸಂಪೂರ್ಣ ಎಡ/ಬಲ ಸ್ಥಾನೀಕರಣಕ್ಕೆ ಬದ್ಧವಾಗಿಲ್ಲದಿದ್ದರೆ.
• ಭಾಷೆಯ ವಿಸ್ತರಣೆ: ಕೆಲವು ಭಾಷೆಗಳಿಗೆ ಇತರರಿಗಿಂತ ಹೆಚ್ಚು ಸ್ಥಳಾವಕಾಶ ಬೇಕಾಗುತ್ತದೆ. ಕಾಲಮ್‌ಗಳಿಗಾಗಿ fr ಯೂನಿಟ್‌ಗಳಂತಹ ಹೊಂದಿಕೊಳ್ಳುವ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಮತ್ತು auto ನೊಂದಿಗೆ ಸಾಲುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಗ್ರಿಡ್ ವಿಭಿನ್ನ ವಿಷಯದ ಉದ್ದಗಳನ್ನು ಹೆಚ್ಚು ಸುಲಭವಾಗಿ ಸರಿಹೊಂದಿಸಬಹುದು. ದೀರ್ಘ ಪದಗಳು ಅಥವಾ ವಾಕ್ಯಗಳನ್ನು ಹೊಂದಿರುವ ಭಾಷೆಗೆ ನಿರ್ದಿಷ್ಟ ಲೇಔಟ್‌ಗೆ ಗಮನಾರ್ಹ ಹೊಂದಾಣಿಕೆ ಅಗತ್ಯವಿದ್ದರೆ, ಆ ಭಾಷಾ ಅಗತ್ಯಗಳಿಗಾಗಿ ನಿರ್ದಿಷ್ಟವಾಗಿ grid-template-areas ಅನ್ನು ಮರುವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು (ಅಥವಾ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಕೂಡ) ಬಳಸಬಹುದು.
• ಶ್ರೇಣೀಕೃತ ನಾಮಕರಣ: ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸ ಮಾಡುವಾಗ, ಅವುಗಳ ಶ್ರೇಣೀಕೃತ ಪ್ರಾಮುಖ್ಯತೆ ಅಥವಾ ವಿಷಯ ಪ್ರಕಾರವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ಪ್ರದೇಶಗಳನ್ನು ಹೆಸರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಇದು ವಿಭಿನ್ನ ಸಾಂಸ್ಕೃತಿಕ ಮತ್ತು ಭಾಷಾ ಸಂದರ್ಭಗಳಲ್ಲಿ ತಿಳುವಳಿಕೆಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಕೇವಲ 'ಕಂಟೆಂಟ್' ಬದಲಿಗೆ, ನೀವು 'ಪ್ರೈಮರಿ-ಕಂಟೆಂಟ್' ಅಥವಾ 'ಸೆಕೆಂಡರಿ-ಕಂಟೆಂಟ್' ಅನ್ನು ಬಳಸಬಹುದು.

RTL ಪರಿಗಣನೆಯ ಉದಾಹರಣೆ:

ನೀವು ಪ್ರಾಥಮಿಕ ವಿಷಯ ಪ್ರದೇಶ ಮತ್ತು ದ್ವಿತೀಯಕ ನ್ಯಾವಿಗೇಷನ್ ಪ್ರದೇಶವನ್ನು ಹೊಂದಿರುವ ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ.

ಎಚ್‌ಟಿಎಂಎಲ್:

            <div class="app-layout">
  <nav class="main-nav">Navigation</nav>
  <main class="content-area">Main Content</main>
</div>
            

              
                Copy
              
            
          

ಸಿಎಸ್ಎಸ್ (LTR):

            .app-layout {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-areas:
    "nav content";
}
.main-nav { grid-area: nav; }
.content-area { grid-area: content; }

            

              
                Copy
              
            
          

ಸಿಎಸ್ಎಸ್ (RTL - ಎಚ್‌ಟಿಎಂಎಲ್ ಅಥವಾ ಬಾಡಿಗೆ `direction: rtl;` ಸೇರಿಸುವ ಮೂಲಕ ಸಾಧಿಸಲಾಗಿದೆ):

ಕಂಟೇನರ್ ಅಥವಾ ಪೂರ್ವಜರಿಗೆ `direction: rtl;` ಅನ್ನು ಅನ್ವಯಿಸಿದಾಗ:

            .app-layout {
  display: grid;
  grid-template-columns: 150px 1fr; /* Note: column widths behave differently in RTL */
  grid-template-areas:
    "nav content"; /* The semantic names still apply */
}
.main-nav { grid-area: nav; }
.content-area { grid-area: content; }

            

              
                Copy
              
            
          

RTL ಸಂದರ್ಭದಲ್ಲಿ, ಬ್ರೌಸರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ 1fr ಕಾಲಮ್ ಈಗ ಬಲಭಾಗದಲ್ಲಿ ಮತ್ತು 150px ಕಾಲಮ್ ಎಡಭಾಗದಲ್ಲಿ ಇರಬೇಕು ಎಂದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುತ್ತದೆ. ಹೆಸರಿಸಿದ ಸ್ಲಾಟ್‌ಗಳೊಂದಿಗೆ grid-template-areas ವ್ಯಾಖ್ಯಾನವು ಒಂದೇ ಆಗಿರುತ್ತದೆ, ಆದರೆ ಆ ಸ್ಲಾಟ್‌ಗಳ ದೃಶ್ಯ ಸ್ಥಾನವು ಹಿಮ್ಮುಖವಾಗುತ್ತದೆ. 'ನ್ಯಾವ್' ಪ್ರದೇಶವು ಈಗ ಬಲಭಾಗದಲ್ಲಿ ಮತ್ತು 'ಕಂಟೆಂಟ್' ಎಡಭಾಗದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ, RTL ಹರಿವಿನ ಪ್ರಕಾರ.

ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಲೇಔಟ್ ಅನ್ನು ಸರಳಗೊಳಿಸಿದರೂ, ಅವುಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಲು ಕೆಲವು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಒಳಗೊಂಡಿರುತ್ತದೆ:

1. ಸ್ಥಿರವಾದ ನಾಮಕರಣ ಸಂಪ್ರದಾಯಗಳು

ನಿಮ್ಮ ಗ್ರಿಡ್ ಏರಿಯಾಗಳಿಗಾಗಿ ಸ್ಪಷ್ಟ ಮತ್ತು ಸ್ಥಿರವಾದ ನಾಮಕರಣ ಸಂಪ್ರದಾಯವನ್ನು ಸ್ಥಾಪಿಸಿ. ಇದು ಹೀಗಿರಬಹುದು:

• ಎಲ್ಲವೂ ಸಣ್ಣ ಅಕ್ಷರ: header, main-content, side-nav
• ಬಹು-ಪದಗಳ ಹೆಸರುಗಳಿಗೆ ಹೈಫನ್‌ಗಳನ್ನು ಬಳಸುವುದು: hero-section, product-gallery
• area1, column-2 ನಂತಹ ಸಾಮಾನ್ಯ ಹೆಸರುಗಳನ್ನು ತಪ್ಪಿಸುವುದು.

ನಿರ್ವಹಣೆ ಮತ್ತು ತಂಡದ ಸಹಯೋಗಕ್ಕಾಗಿ ಸ್ಥಿರತೆ ಮುಖ್ಯವಾಗಿದೆ.

2. ಖಾಲಿ ಸೆಲ್‌ಗಳಿಗಾಗಿ ಪೂರ್ಣವಿರಾಮ (.) ಬಳಸುವುದು

ನಿಮ್ಮ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಯಾವುದೇ ಹೆಸರಿಸಿದ ಪ್ರದೇಶದಿಂದ ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಆಕ್ರಮಿಸದ ಅಂತರಗಳಿದ್ದಾಗ, ಈ ಖಾಲಿ ಸೆಲ್‌ಗಳನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಪೂರ್ಣವಿರಾಮಗಳನ್ನು (.) ಬಳಸಿ. ಇದು grid-template-areas ವ್ಯಾಖ್ಯಾನವನ್ನು ಇನ್ನಷ್ಟು ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header ."
    "nav main ."
    "footer footer .";
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿರುವ ಮೂರನೇ ಕಾಲಮ್ ಅನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಖಾಲಿ ಬಿಡಲಾಗಿದೆ.

3. grid-area ನೊಂದಿಗೆ ಬಹು ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುವುದು

grid-template-areas ಒಟ್ಟಾರೆ ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ, ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಹೆಸರಿನ ಪ್ರದೇಶಗಳಲ್ಲಿ ಒಂದೇ ಗ್ರಿಡ್ ಐಟಂ ಬಹು ಸೆಲ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುವಂತೆ ಮಾಡಲು ನೀವು grid-area ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸಹ ಬಳಸಬಹುದು. ಈ ಪ್ರಾಪರ್ಟಿಯು ನಾಲ್ಕು ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ: <row-start> <column-start> <row-end> <column-end>. ಆದಾಗ್ಯೂ, ಹೆಸರಿಸಿದ ಪ್ರದೇಶಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ನೀವು ವ್ಯಾಪಿಸಲು ಬಯಸುವ ಪ್ರದೇಶದ ಪ್ರಾರಂಭ ಮತ್ತು ಅಂತಿಮ ಲೈನ್‌ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ ಅಥವಾ ಬಹು ಸೆಲ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಲು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಿದ ಪ್ರದೇಶವನ್ನು ನೇರವಾಗಿ ಹೆಸರಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.

'ಮೇನ್' ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಿರುವ ಈ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header"
    "nav main main"
    "footer footer footer";
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }

            

              
                Copy
              
            
          

ಈ ಸಂದರ್ಭದಲ್ಲಿ, main ಪ್ರದೇಶವನ್ನು grid-template-areas ಪ್ರಾಪರ್ಟಿಯಲ್ಲಿಯೇ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಲು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಹೆಸರಿಸಿದ ಪ್ರದೇಶಗಳನ್ನು ಬಳಸುವಾಗ ಸ್ಪ್ಯಾನಿಂಗ್ ಸಾಧಿಸಲು ಇದು ಹೆಚ್ಚು ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಗವಾಗಿದೆ.

ಪರ್ಯಾಯವಾಗಿ, ಅಗತ್ಯವಿದ್ದರೆ ನೀವು ಸ್ಪಷ್ಟ ಲೈನ್ ಸಂಖ್ಯೆಗಳನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ಇದು ಅರ್ಥಪೂರ್ಣ ಪ್ರಯೋಜನದಿಂದ ದೂರ ಸರಿಯುತ್ತದೆ:

            /* Less semantic approach if names are available */
.main {
  grid-column: 2 / 4; /* Span from column line 2 to 4 */
  grid-row: 2 / 3;    /* Span from row line 2 to 3 */
}

            

              
                Copy
              
            
          

ಶಿಫಾರಸು: ಉತ್ತಮ ಅರ್ಥಪೂರ್ಣ ಸ್ಪಷ್ಟತೆಗಾಗಿ ಯಾವಾಗಲೂ grid-template-areas ಒಳಗೆ ನೇರವಾಗಿ ಸ್ಪ್ಯಾನಿಂಗ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಪ್ರಯತ್ನಿಸಿ.

4. ಅತಿಕ್ರಮಿಸುವ ಪ್ರದೇಶಗಳು

ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಅತಿಕ್ರಮಿಸಬಹುದು. ಒಂದೇ ಪ್ರದೇಶಕ್ಕೆ ಎರಡು ಐಟಂಗಳನ್ನು ನಿಯೋಜಿಸಿದರೆ, ಅಥವಾ ಅವುಗಳ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪ್ರದೇಶಗಳು ಛೇದಿಸಿದರೆ, ಎಚ್‌ಟಿಎಂಎಲ್ ಮೂಲ ಕ್ರಮದಲ್ಲಿ ನಂತರದ ಐಟಂ ಹಿಂದಿನದರ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಪಠ್ಯದ ಹಿಂದೆ ಬ್ಯಾನರ್ ಚಿತ್ರದಂತಹ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪದರ ಮಾಡಲು ಇದು ಉಪಯುಕ್ತವಾಗಬಹುದು.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "hero-image"
    "hero-text";
}

.hero-image {
  grid-area: hero-image;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

.hero-text {
  grid-area: hero-text;
  align-self: center; /* Vertically center text */
  text-align: center;
  color: white;
}

/* To make them overlap visually on top of each other */
.hero-image {
  grid-area: 1 / 1 / 2 / 2; /* Explicitly place image in the first cell */
}

.hero-text {
  grid-area: 1 / 1 / 2 / 2; /* Place text in the same cell */
  align-self: center; 
  text-align: center;
}

            

              
                Copy
              
            
          

ಎರಡೂ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಒಂದೇ ಗ್ರಿಡ್ ಪ್ರದೇಶಕ್ಕೆ (ಅಥವಾ ಅತಿಕ್ರಮಿಸುವ ಪ್ರದೇಶಗಳಿಗೆ) ನಿಯೋಜಿಸುವ ಮೂಲಕ, .hero-text ಎಲಿಮೆಂಟ್ ಎಚ್‌ಟಿಎಂಎಲ್ ಮೂಲದಲ್ಲಿ ನಂತರ ಕಾಣಿಸಿಕೊಳ್ಳುವುದರಿಂದ .hero-image ಮೇಲೆ ಪದರವಾಗುತ್ತದೆ. ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಆಕರ್ಷಕ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಒಂದು ಶಕ್ತಿಯುತ ತಂತ್ರವಾಗಿದೆ.

5. ಡೈನಾಮಿಕ್ ಗ್ರಿಡ್ ಏರಿಯಾ ಜನರೇಷನ್ (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್)

ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಪ್ರಾಥಮಿಕವಾಗಿ ಸಿಎಸ್ಎಸ್ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದರೂ, ವಿಷಯ ಅಥವಾ ಬಳಕೆದಾರರ ಸಂವಹನವನ್ನು ಆಧರಿಸಿ ನೀವು ಡೈನಾಮಿಕ್ ಆಗಿ ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳನ್ನು ರಚಿಸಬೇಕಾದ ಸನ್ನಿವೇಶಗಳನ್ನು ನೀವು ಎದುರಿಸಬಹುದು. grid-template-areas ಪ್ರಾಪರ್ಟಿಯನ್ನು ನಿರ್ವಹಿಸಲು ಅಥವಾ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ grid-area ಮೌಲ್ಯಗಳನ್ನು ನಿಯೋಜಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಸಾಧಿಸಬಹುದು.

ಉದಾಹರಣೆಗೆ, ನೀವು ಗ್ರಿಡ್‌ನಲ್ಲಿ ಇರಿಸಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸೆಟ್ ಅನ್ನು ಹೊಂದಿದ್ದರೆ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸಂಖ್ಯೆ ಬದಲಾಗುತ್ತಿದ್ದರೆ, grid-template-areas ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ನಿರ್ಮಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಹಾಯ ಮಾಡಬಹುದು.

ಬಳಕೆಯ ಪ್ರಕರಣ: ವಿಜೆಟ್‌ಗಳನ್ನು ಮರುಹೊಂದಿಸಬಹುದಾದ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೀಗೆ ಮಾಡಬಹುದು:

1. ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಿಂದ ವಿಜೆಟ್‌ಗಳ ಕ್ರಮವನ್ನು ಓದುವುದು.
2. ಆ ಕ್ರಮವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಆಗಿ grid-template-areas ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ರಚಿಸುವುದು.
3. ಈ ಸ್ಟ್ರಿಂಗ್ ಅನ್ನು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಕಂಟೇನರ್‌ಗೆ ಅನ್ವಯಿಸುವುದು.

ಇದು ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಇದನ್ನು ನ್ಯಾಯಯುತವಾಗಿ ಬಳಸಬೇಕು, ಏಕೆಂದರೆ ಸಂಕೀರ್ಣ ಡೈನಾಮಿಕ್ ಜನರೇಷನ್ ಕೆಲವೊಮ್ಮೆ ಕಡಿಮೆ ನಿರ್ವಹಿಸಬಲ್ಲ ಸಿಎಸ್ಎಸ್ಗೆ ಕಾರಣವಾಗಬಹುದು. ಸಾಧ್ಯವಾದರೆ ಸ್ಥಿರ ಸಿಎಸ್ಎಸ್ ಪರಿಹಾರಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ

ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಒದಗಿಸುವ ಸ್ಪಷ್ಟತೆಯ ಹೊರತಾಗಿಯೂ, ಕೆಲವು ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಸಂಭವಿಸಬಹುದು:

• ಹೊಂದಾಣಿಕೆಯಿಲ್ಲದ ಹೆಸರುಗಳು: grid-template-areas ನಲ್ಲಿ ಬಳಸಲಾದ ಪ್ರತಿಯೊಂದು ಹೆಸರು ನೇರ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಅನುಗುಣವಾದ grid-area ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಮತ್ತು ಪ್ರತಿಯಾಗಿ. ಅಕ್ಷರ ದೋಷಗಳು ಇಲ್ಲಿ ಆಗಾಗ್ಗೆ ಅಪರಾಧಿಗಳಾಗಿವೆ.
• ಅಸಮತೋಲಿತ ಪ್ರದೇಶದ ವ್ಯಾಖ್ಯಾನಗಳು: grid-template-areas ನ ಪ್ರತಿ ಸಾಲಿನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸೆಲ್‌ಗಳ ಸಂಖ್ಯೆಯು ಸ್ಥಿರವಾಗಿರಬೇಕು. ಒಂದು ಸಾಲಿನಲ್ಲಿ 3 ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದರೆ, ಆ ವ್ಯಾಖ್ಯಾನದಲ್ಲಿನ ಎಲ್ಲಾ ನಂತರದ ಸಾಲುಗಳು ಕೂಡ ಪರಿಕಲ್ಪನಾತ್ಮಕವಾಗಿ 3 ಕಾಲಮ್‌ಗಳನ್ನು ಹೊಂದಿರಬೇಕು. ನೀವು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಹೆಸರನ್ನು ಎರಡು ಬಾರಿ ಬಳಸಿದರೆ, ಆ ಹೆಸರು ಎರಡು ಸೆಲ್‌ಗಳನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ.
• ಮೂಲ ಕ್ರಮವನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ಎಚ್‌ಟಿಎಂಎಲ್ ಮೂಲದಲ್ಲಿ ನಿಮ್ಮ ಗ್ರಿಡ್ ಐಟಂಗಳ ಕ್ರಮವು ಅವುಗಳ ಸ್ಟ್ಯಾಕಿಂಗ್ ಸಂದರ್ಭ ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ಸಾಧನಗಳೊಂದಿಗೆ ಅವು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ದೃಶ್ಯ ಮರುಹೊಂದಿಕೆಗೆ ಅನುವು ಮಾಡಿಕೊಟ್ಟರೂ, ನಿಮ್ಮ ಎಚ್‌ಟಿಎಂಎಲ್‌ನಲ್ಲಿ ಅರ್ಥಪೂರ್ಣ ಕ್ರಮವನ್ನು ಪರಿಗಣಿಸಿ.
• ಸ್ಥಿರ ಯೂನಿಟ್‌ಗಳ ಮೇಲೆ ಅತಿಯಾದ ಅವಲಂಬನೆ: ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್ ಅಗಲಗಳು ಕೆಲವೊಮ್ಮೆ ಅಗತ್ಯವಿದ್ದರೂ, ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ fr ಯೂನಿಟ್‌ಗಳಂತಹ ಹೊಂದಿಕೊಳ್ಳುವ ಯೂನಿಟ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ, ವಿಶೇಷವಾಗಿ ವಿಭಿನ್ನ ಪಠ್ಯ ಉದ್ದಗಳನ್ನು ಹೊಂದಿರುವ ಜಾಗತಿಕ ವಿಷಯದೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.
• display: grid; ಅನ್ನು ಮರೆಯುವುದು: ಗ್ರಿಡ್ ಏರಿಯಾ ಪ್ರಾಪರ್ಟಿಗಳು ಪರಿಣಾಮ ಬೀರಲು ಕಂಟೇನರ್ display: grid; ಅಥವಾ display: inline-grid; ಅನ್ನು ಅನ್ವಯಿಸಿರಬೇಕು.

ತೀರ್ಮಾನ: ಆಧುನಿಕ ವೆಬ್‌ಗಾಗಿ ಅರ್ಥಪೂರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು

ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಕೇವಲ ಒಂದು ಲೇಔಟ್ ಸಾಧನಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿವೆ; ಅವು ಅರ್ಥಪೂರ್ಣ, ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಫ್ರಂಟ್-ಎಂಡ್ ಕೋಡ್‌ನತ್ತ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯಾಗಿದೆ. ಹೆಸರಿಸಿದ ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಮತ್ತು ನಿಮ್ಮ ತಂಡವು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಮಾಡಲು ಸಮರ್ಥರಾಗುತ್ತೀರಿ:

• ಗಮನಾರ್ಹ ಸುಲಭ ಮತ್ತು ಸ್ಪಷ್ಟತೆಯೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ.
• ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಆಕರ್ಷಕವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಹೆಚ್ಚು ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಿ.
• ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳ ನಿರ್ವಹಣೆ ಮತ್ತು ಸ್ಕೇಲೆಬಿಲಿಟಿಯನ್ನು ಹೆಚ್ಚಿಸಿ.
• ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳ ಅರ್ಥಪೂರ್ಣ ಸಮಗ್ರತೆಯನ್ನು ಸುಧಾರಿಸಿ.
• ವಿವಿಧ ಭಾಷೆ ಮತ್ತು ಲೇಔಟ್ ಅವಶ್ಯಕತೆಗಳೊಂದಿಗೆ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಉತ್ತಮವಾಗಿ ಸೇವೆ ಸಲ್ಲಿಸಿ.

ವೆಬ್ ವಿಕಸನಗೊಳ್ಳುತ್ತಲೇ ಇರುವುದರಿಂದ, ರಚನಾತ್ಮಕ, ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಅರ್ಥಪೂರ್ಣವಾಗಿ ಶ್ರೀಮಂತ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯವು ಅತ್ಯುತ್ತಮ ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಮೂಲಾಧಾರವಾಗಿ ಉಳಿಯುತ್ತದೆ. ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ ಏರಿಯಾಗಳು ಒಂದು ಸೊಗಸಾದ ಮತ್ತು ಶಕ್ತಿಯುತ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ಯಾವುದೇ ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪರ್‌ನ ಟೂಲ್‌ಕಿಟ್‌ನ ಅನಿವಾರ್ಯ ಭಾಗವಾಗಿದೆ.

ಇಂದೇ grid-template-areas ನೊಂದಿಗೆ ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ, ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಹೊಸ ಮಟ್ಟದ ನಿಯಂತ್ರಣ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಸ್ಪಷ್ಟತೆಯನ್ನು ಕಂಡುಕೊಳ್ಳಿ. ನಿಮ್ಮ ಭವಿಷ್ಯದ ನೀವು, ನಿಮ್ಮ ಸಹೋದ್ಯೋಗಿಗಳು ಮತ್ತು ನಿಮ್ಮ ಜಾಗತಿಕ ಬಳಕೆದಾರರು ನಿಮಗೆ ಧನ್ಯವಾದ ಹೇಳುತ್ತಾರೆ.