CSS ಸಬ್‌ಗ್ರಿಡ್: ನೆಸ್ಟೆಡ್ ಲೇಔಟ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು

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

CSS ಸಬ್‌ಗ್ರಿಡ್ ಎಂದರೇನು?

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

ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

• ಸರಳೀಕೃತ ಲೇಔಟ್‌ಗಳು: ಸಬ್‌ಗ್ರಿಡ್ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ಗಳ ಸಂಕೀರ್ಣತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ನಿಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ಸ್ಥಿರವಾದ ಜೋಡಣೆ: ನೆಸ್ಟಿಂಗ್‌ನ ಅನೇಕ ಹಂತಗಳಲ್ಲಿ ವಿಷಯವನ್ನು ಸುಲಭವಾಗಿ ಜೋಡಿಸಿ, ದೃಷ್ಟಿಗೆ ಇಂಪಾದ ಮತ್ತು ವೃತ್ತಿಪರ ವಿನ್ಯಾಸವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸುಧಾರಿತ ನಿರ್ವಹಣೆ: ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳಿಗೆ ಹರಡುತ್ತವೆ, ಅನೇಕ ಸ್ಥಳಗಳಲ್ಲಿ ಹಸ್ತಚಾಲಿತ ಹೊಂದಾಣಿಕೆಗಳ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ವರ್ಧಿತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್: ಸಬ್‌ಗ್ರಿಡ್ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ತತ್ವಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಲೇಔಟ್ ಬ್ರೇಕ್‌ಗಳನ್ನು ಪರಿಚಯಿಸದೆ ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಲೇಔಟ್‌ಗಳನ್ನು ಅಳವಡಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು, ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಅತ್ಯಗತ್ಯ. 2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, ಸಬ್‌ಗ್ರಿಡ್ ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ, ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ಇತ್ತೀಚಿನ ಬೆಂಬಲ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು Can I use ಅನ್ನು ಬಳಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ.

ಮೂಲಭೂತ ಸಬ್‌ಗ್ರಿಡ್ ಅನುಷ್ಠಾನ

ಸಬ್‌ಗ್ರಿಡ್‌ನ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ವಿವರಿಸಲು ಒಂದು ಸರಳ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ.

HTML ರಚನೆ

ಮೊದಲಿಗೆ, ನಾವು ನಮ್ಮ ಗ್ರಿಡ್‌ಗಾಗಿ ಮೂಲಭೂತ HTML ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ.

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS ಸ್ಟೈಲಿಂಗ್

ಈಗ, ಪೋಷಕ ಗ್ರಿಡ್ ಮತ್ತು .content ಎಲಿಮೆಂಟ್‌ನೊಳಗಿನ ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ರಚಿಸಲು CSS ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ.

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* .content ಸಬ್‌ಗ್ರಿಡ್‌ನೊಳಗೆ ಐಟಂಗಳ ಸ್ಥಾನವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .content ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. grid-template-columns: subgrid; ಮತ್ತು grid-template-rows: subgrid; ಪ್ರಾಪರ್ಟಿಗಳು ಸಬ್‌ಗ್ರಿಡ್‌ಗೆ ಪೋಷಕ ಗ್ರಿಡ್‌ನಿಂದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಸೂಚಿಸುತ್ತವೆ. ವಿಷಯ ಪ್ರದೇಶವು ಈಗ ಮುಖ್ಯ ಕಂಟೇನರ್ ಗ್ರಿಡ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಕ್ಕೆ ಅನುಗುಣವಾಗಿರುತ್ತದೆ, ಸಬ್‌ಗ್ರಿಡ್‌ಗೆ ಯಾವುದೇ ಸ್ಪಷ್ಟವಾದ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಅಗತ್ಯವಿಲ್ಲದೆ. ಇದು ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ವಿಷಯ ಪ್ರದೇಶದೊಳಗಿನ ಐಟಂಗಳ ನಡುವೆ ಪರಿಪೂರ್ಣ ಜೋಡಣೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಸುಧಾರಿತ ಸಬ್‌ಗ್ರಿಡ್ ತಂತ್ರಗಳು

ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುವುದು

ಸಬ್‌ಗ್ರಿಡ್, ಸಬ್‌ಗ್ರಿಡ್‌ನೊಳಗಿನ ಐಟಂಗಳಿಗೆ ಸಾಮಾನ್ಯ ಗ್ರಿಡ್‌ನಲ್ಲಿರುವಂತೆ ಅನೇಕ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಲು ಸಹ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವಲ್ಲಿ ಇನ್ನೂ ಹೆಚ್ಚಿನ ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

ಈ ಕೋಡ್ .item-1 ಅನ್ನು ಸಬ್‌ಗ್ರಿಡ್‌ನ ಮೊದಲ ಎರಡು ಕಾಲಮ್‌ಗಳಾದ್ಯಂತ ವ್ಯಾಪಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.

ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳು

ಇನ್ನೂ ಹೆಚ್ಚಿನ ಸ್ಪಷ್ಟತೆ ಮತ್ತು ನಿಯಂತ್ರಣಕ್ಕಾಗಿ ನೀವು ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ನಿಮ್ಮ ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ನೀವು ಹೆಸರಿಸಲಾದ ಲೈನ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ:

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

ನಂತರ ನೀವು ಈ ಹೆಸರಿಸಲಾದ ಲೈನ್‌ಗಳನ್ನು ನಿಮ್ಮ ಸಬ್‌ಗ್ರಿಡ್‌ನೊಳಗೆ ಉಲ್ಲೇಖಿಸಬಹುದು:

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

ಇಂಪ್ಲಿಸಿಟ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನಿಭಾಯಿಸುವುದು

ಗ್ರಿಡ್ ಐಟಂಗಳ ಸಂಖ್ಯೆಯು ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಟ್ರ್ಯಾಕ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಮೀರಿದರೆ, ಸಬ್‌ಗ್ರಿಡ್ ಇಂಪ್ಲಿಸಿಟ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ CSS ಗ್ರಿಡ್‌ನಂತೆಯೇ grid-auto-rows ಮತ್ತು grid-auto-columns ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಈ ಇಂಪ್ಲಿಸಿಟ್ ಟ್ರ್ಯಾಕ್‌ಗಳ ಗಾತ್ರವನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಸೊಗಸಾದ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಸಂಕೀರ್ಣ ಉತ್ಪನ್ನ ಪಟ್ಟಿ

ನೀವು ಅನೇಕ ಉತ್ಪನ್ನ ವಿವರಗಳನ್ನು (ಚಿತ್ರ, ಹೆಸರು, ವಿವರಣೆ, ಬೆಲೆ) ಸ್ಥಿರ ಮತ್ತು ಜೋಡಿಸಲಾದ ರೀತಿಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಉತ್ಪನ್ನ ಪಟ್ಟಿಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಬ್‌ಗ್ರಿಡ್ ಇದನ್ನು ಸುಲಭವಾಗಿ ಸಾಧಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>

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

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .product ಎಲಿಮೆಂಟ್‌ಗಳು ಎಲ್ಲಾ ಉತ್ಪನ್ನಗಳಾದ್ಯಂತ ಚಿತ್ರ, ಹೆಸರು, ವಿವರಣೆ, ಮತ್ತು ಬೆಲೆಯನ್ನು ಸ್ಥಿರವಾಗಿ ಜೋಡಿಸಲು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುತ್ತವೆ, ಅವುಗಳ ವಿಷಯದ ಉದ್ದಗಳು ಬದಲಾದರೂ ಸಹ. ಇದು ಸ್ವಚ್ಛ ಮತ್ತು ವೃತ್ತಿಪರ ಪ್ರಸ್ತುತಿಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಮ್ಯಾಗಜೀನ್ ಲೇಔಟ್

ವಿವಿಧ ವಿಷಯ ಬ್ಲಾಕ್‌ಗಳೊಂದಿಗೆ ಮ್ಯಾಗಜೀನ್-ಶೈಲಿಯ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಸವಾಲಿನದ್ದಾಗಿರಬಹುದು. ಲೇಔಟ್‌ನ ವಿವಿಧ ವಿಭಾಗಗಳಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಜೋಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ ಸಬ್‌ಗ್ರಿಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>

.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

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

ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳು

ಜೋಡಿಸಲಾದ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಫಾರ್ಮ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಸಬ್‌ಗ್ರಿಡ್ ನೇರವಾದ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ.

<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ */
    gap: 10px;
}

ಇಲ್ಲಿ, .form-row ಎಲಿಮೆಂಟ್‌ಗಳು ಎಲ್ಲಾ ಸಾಲುಗಳಾದ್ಯಂತ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ಜೋಡಿಸಲು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುತ್ತವೆ. ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ (.form-grid) ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಇದು ಏಕರೂಪದ ನೋಟವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

• ಘನವಾದ ಗ್ರಿಡ್ ಅಡಿಪಾಯದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ: ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು, ನಿಮ್ಮ ಪೋಷಕ ಗ್ರಿಡ್ ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲ್ಪಟ್ಟಿದೆ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಆಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳನ್ನು ಬಳಸಿ: ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳು ಓದುವಿಕೆಯನ್ನು ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತವೆ, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಲ್ಲಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಸ್ಥಿರವಾದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಸಬ್‌ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಸಿಮ್ಯಾಂಟಿಕ್ HTML ಅನ್ನು ಬಳಸುವ ಮೂಲಕ ಮತ್ತು ಸೂಕ್ತವಾದ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಸಬ್‌ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ: ಸಬ್‌ಗ್ರಿಡ್ ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ಇದು ಯಾವಾಗಲೂ ಉತ್ತಮ ಪರಿಹಾರವಲ್ಲ. ಕಡಿಮೆ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಸಾಮಾನ್ಯ ಗ್ರಿಡ್‌ನಂತಹ ಸರಳ ಪರ್ಯಾಯಗಳನ್ನು ಪರಿಗಣಿಸಿ.

ಸಬ್‌ಗ್ರಿಡ್ vs. ಸಾಮಾನ್ಯ CSS ಗ್ರಿಡ್

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

ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ನಿವಾರಿಸುವುದು

• ಸಬ್‌ಗ್ರಿಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿಲ್ಲ: ನಿಮ್ಮ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಎರಡು ಬಾರಿ ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಸಬ್‌ಗ್ರಿಡ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ grid-template-columns: subgrid; ಮತ್ತು/ಅಥವಾ grid-template-rows: subgrid; ಅನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ ನೀವು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಜೋಡಣೆ ಸಮಸ್ಯೆಗಳು: ನಿಮ್ಮ ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳು ಸರಿಯಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲ್ಪಟ್ಟಿವೆ ಮತ್ತು ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂಗಳನ್ನು grid-column ಮತ್ತು grid-row ಬಳಸಿ ಸರಿಯಾಗಿ ಇರಿಸಲಾಗಿದೆ ಎಂದು ಪರಿಶೀಲಿಸಿ.
• ಅನಿರೀಕ್ಷಿತ ಲೇಔಟ್ ಬ್ರೇಕ್‌ಗಳು: ಯಾವುದೇ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ವಿವಿಧ ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.

ತೀರ್ಮಾನ

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

ಹೆಚ್ಚಿನ ಸಂಪನ್ಮೂಲಗಳು

• MDN ವೆಬ್ ಡಾಕ್ಸ್: CSS ಸಬ್‌ಗ್ರಿಡ್
• ಸ್ಮ್ಯಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್: CSS ಗ್ರಿಡ್ ಸಬ್‌ಗ್ರಿಡ್
• CSS-ಟ್ರಿಕ್ಸ್: CSS ಗ್ರಿಡ್ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳು