ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯೊಂದಿಗೆ CSS ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಿ. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೊಂಡ, ಸಂಕೀರ್ಣ, ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ವೆಬ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ. ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
CSS ಗ್ರಿಡ್ ಸಬ್‌ಗ್ರಿಡ್: ಸುಧಾರಿತ ಲೇಔಟ್ ರಚನೆಯ ಆಳವಾದ ನೋಟ
ವರ್ಷಗಳಿಂದ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ಡಿಸೈನರ್‌ಗಳು CSS ಗ್ರಿಡ್‌ನ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ಅತ್ಯಾಧುನಿಕ, ಎರಡು-ಆಯಾಮದ ಲೇಔಟ್‌ಗಳನ್ನು ಅಭೂತಪೂರ್ವ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯೊಂದಿಗೆ ರಚಿಸಿದ್ದಾರೆ. ಗ್ರಿಡ್ ವೆಬ್ ಪುಟದ ರಚನೆಯ ಬಗ್ಗೆ ನಾವು ಯೋಚಿಸುವ ರೀತಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿತು, ಫ್ಲೋಟ್‌ಗಳ ಮಿತಿಗಳಿಂದ ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನ ಒಂದು-ಆಯಾಮದ ಸ್ವಭಾವದಿಂದ ನಮ್ಮನ್ನು ದೂರ ಸರಿಸಿತು. ಆದಾಗ್ಯೂ, ಅದರ ಶಕ್ತಿಯ ಹೊರತಾಗಿಯೂ, ಒಂದು ನಿರಂತರ ಸವಾಲು ಉಳಿದಿತ್ತು: ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ಗಳಲ್ಲಿನ ಐಟಂಗಳನ್ನು ಪ್ರಾಥಮಿಕ ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ಗೆ ಜೋಡಿಸುವುದು. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಹತಾಶೆಗೆ ಕಾರಣವಾಗುತ್ತಿತ್ತು, ಸಂಕೀರ್ಣ ಪರಿಹಾರಗಳು, ಹಸ್ತಚಾಲಿತ ಲೆಕ್ಕಾಚಾರಗಳು, ಅಥವಾ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ರಚನೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತ್ಯಜಿಸಲು ಕಾರಣವಾಗುತ್ತಿತ್ತು. ಇದಕ್ಕಾಗಿಯೇ ಬಂದಿದೆ CSS ಸಬ್‌ಗ್ರಿಡ್, ಬಹುನಿರೀಕ್ಷಿತ ವೈಶಿಷ್ಟ್ಯವು ಈ ಸಮಸ್ಯೆಯನ್ನು ಸೊಗಸಾಗಿ ಪರಿಹರಿಸುತ್ತದೆ, ಲೇಔಟ್ ರಚನೆಯಲ್ಲಿ ಹೊಸ ಮಟ್ಟದ ನಿಖರತೆ ಮತ್ತು ಅತ್ಯಾಧುನಿಕತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳು, ವೆಬ್ ಡಿಸೈನರ್‌ಗಳು ಮತ್ತು UI ಇಂಜಿನಿಯರ್‌ಗಳ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ನಾವು CSS ಸಬ್‌ಗ್ರಿಡ್‌ನ ಏನು, ಏಕೆ, ಮತ್ತು ಹೇಗೆ ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳಿಂದ ಸುಧಾರಿತ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳವರೆಗೆ ಸಾಗುತ್ತೇವೆ. ಕೊನೆಯಲ್ಲಿ, ನೀವು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದಲ್ಲದೆ, ಹೆಚ್ಚು ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಸುಂದರವಾಗಿ ಜೋಡಿಸಲಾದ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅದನ್ನು ಬಳಸಲು ಸಿದ್ಧರಾಗಿರುತ್ತೀರಿ.
ಸಬ್‌ಗ್ರಿಡ್‌ಗಿಂತ ಮೊದಲು ಇದ್ದ ಸವಾಲು: ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ಗೊಂದಲ
ಸಬ್‌ಗ್ರಿಡ್ ಏನು ತರುತ್ತದೆ ಎಂಬುದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಶ್ಲಾಘಿಸಲು, ನಾವು ಮೊದಲು ಅದು ಇಲ್ಲದ ಜಗತ್ತನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ನಿಮ್ಮ ಪುಟದ ವಿಷಯಕ್ಕಾಗಿ ನೀವು ಮುಖ್ಯ ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಗ್ರಿಡ್ ಐಟಂಗಳಲ್ಲಿ ಒಂದರಲ್ಲಿ, ನೀವು ಇನ್ನೊಂದು ಗ್ರಿಡ್ ಅನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ—ಒಂದು ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್. ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮಾದರಿಯಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ವಿನ್ಯಾಸದಲ್ಲಿ.
ಒಂದು ವಿಶಿಷ್ಟ ಕಾರ್ಡ್ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸೋಣ. ಹಲವಾರು ಕಾರ್ಡ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಕಂಟೇನರ್ ನಿಮ್ಮಲ್ಲಿದೆ, ಮತ್ತು ಆ ಕಂಟೇನರ್ ಒಂದು CSS ಗ್ರಿಡ್ ಆಗಿದೆ. ಪ್ರತಿಯೊಂದು ಕಾರ್ಡ್ ಒಂದು ಗ್ರಿಡ್ ಐಟಂ ಆಗಿದೆ. ಪ್ರತಿಯೊಂದು ಕಾರ್ಡ್‌ನೊಳಗೆ, ಅದರ ವಿಷಯವನ್ನು—ಒಂದು ಹೆಡರ್, ಮುಖ್ಯ ಭಾಗ, ಮತ್ತು ಫೂಟರ್—ರಚಿಸಲು ನೀವು ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೀರಿ.
ಸಬ್‌ಗ್ರಿಡ್ ಇಲ್ಲದೆ, ಕಾರ್ಡ್‌ನೊಳಗಿನ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ಗೆ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳ ಬಗ್ಗೆ ಯಾವುದೇ ಅರಿವಿರುವುದಿಲ್ಲ. ಅದು ತನ್ನದೇ ಆದ, ಸ್ವತಂತ್ರ ಗ್ರಿಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸಂದರ್ಭವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ಇದರರ್ಥ ನೀವು ಕಾರ್ಡ್‌ನೊಳಗೆ ವ್ಯಾಖ್ಯಾನಿಸುವ ಟ್ರ್ಯಾಕ್‌ಗಳು (ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಸಾಲುಗಳು) ಮುಖ್ಯ ಕಂಟೇನರ್‌ನ ಟ್ರ್ಯಾಕ್‌ಗಳಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತ್ಯೇಕವಾಗಿರುತ್ತವೆ.
ಸಮಸ್ಯೆಯ ಒಂದು ದೃಶ್ಯ ಉದಾಹರಣೆ
ಪ್ರತಿಯೊಂದು ಉತ್ಪನ್ನವು ಒಂದು ಕಾರ್ಡ್ ಆಗಿರುವ ಉತ್ಪನ್ನ ಪಟ್ಟಿಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು ಎಲ್ಲಾ ಕಾರ್ಡ್‌ಗಳ ಉತ್ಪನ್ನ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಸಮತಲವಾಗಿ ಜೋಡಿಸಲು ಬಯಸುತ್ತೀರಿ, ಮತ್ತು ಪ್ರತಿ ಕಾರ್ಡ್‌ನ ಕೆಳಭಾಗದಲ್ಲಿರುವ "ಕಾರ್ಟ್‌ಗೆ ಸೇರಿಸಿ" ಬಟನ್‌ಗಳು ಸಹ ಮಧ್ಯದಲ್ಲಿನ ವಿವರಣೆಯ ಉದ್ದವನ್ನು ಲೆಕ್ಕಿಸದೆ ಜೋಡಣೆಯಾಗಬೇಕೆಂದು ಬಯಸುತ್ತೀರಿ. ಒಂದು ಪ್ರಮಾಣಿತ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ನೊಂದಿಗೆ, ನಿಗದಿತ ಎತ್ತರಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಆಶ್ರಯಿಸದೆ ಇದನ್ನು ಸಾಧಿಸುವುದು ಬಹುತೇಕ ಅಸಾಧ್ಯ.
ಈ ಸನ್ನಿವೇಶದ ಒಂದು ಸರಳೀಕೃತ ಕೋಡ್ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
HTML ರಚನೆ:
<div class="card-container">
<div class="card">
<h3>Product A</h3>
<p>A short, concise description.</p>
<button>Add to Cart</button>
</div>
<div class="card">
<h3>Product B</h3>
<p>This product has a much longer description that will wrap onto multiple lines, causing alignment issues for the elements below it.</p>
<button>Add to Cart</button>
</div>
<div class="card">
<h3>Product C</h3>
<p>Another description.</p>
<button>Add to Cart</button>
</div>
</div>
CSS (ಸಬ್‌ಗ್ರಿಡ್ ಇಲ್ಲದೆ):
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
border: 1px solid #ccc;
padding: 15px;
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Body (stretches), Footer */
gap: 10px;
}
.card h3 {
/* No special styling needed for position */
}
.card p {
/* This will stretch due to 1fr */
}
.card button {
align-self: end; /* Tries to push button to the bottom of its grid area */
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡನೇ ಕಾರ್ಡ್‌ನಲ್ಲಿರುವ ಬಟನ್ ಇತರ ಕಾರ್ಡ್‌ಗಳ ಬಟನ್‌ಗಳಿಗಿಂತ ಕೆಳಗಿರುತ್ತದೆ ಏಕೆಂದರೆ ಅದರ ವಿವರಣೆಯ ಪಠ್ಯವು ಹೆಚ್ಚು ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಪ್ರತಿ ಕಾರ್ಡ್‌ನ ಆಂತರಿಕ ಗ್ರಿಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವತಂತ್ರವಾಗಿದೆ. ಪ್ಯಾರಾಗ್ರಾಫ್‌ನ ಸಾಲಿಗಾಗಿ `1fr` ಘಟಕವು ಆ ಒಂದೇ ಕಾರ್ಡ್‌ನ ಲಭ್ಯವಿರುವ ಎತ್ತರದ ಸಂದರ್ಭದಲ್ಲಿ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ. ಬಟನ್‌ಗಳು ಜೋಡಿಸಲು ಯಾವುದೇ ಹಂಚಿಕೆಯ ಗ್ರಿಡ್ ಲೈನ್ ಇಲ್ಲ. ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿರುವುದು ನಿಖರವಾಗಿ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು.
CSS ಸಬ್‌ಗ್ರಿಡ್ ಪರಿಚಯ: ಪರಿಪೂರ್ಣ ಜೋಡಣೆಗಾಗಿ ಕಾಣೆಯಾದ ತುಣುಕು
CSS ಸಬ್‌ಗ್ರಿಡ್ ಎಂಬುದು `grid-template-columns` ಮತ್ತು `grid-template-rows` ಗಾಗಿ ಒಂದು ಮೌಲ್ಯವಾಗಿದೆ. ಇದನ್ನು ಒಂದು ಗ್ರಿಡ್ ಐಟಂಗೆ (ಅದು ತಾನೇ ಒಂದು ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಆಗುತ್ತದೆ) ಅನ್ವಯಿಸಿದಾಗ, ಅದು ಆ ಐಟಂಗೆ ತನ್ನದೇ ಆದ ಹೊಸ ಟ್ರ್ಯಾಕ್ ಪಟ್ಟಿಗಳನ್ನು ರಚಿಸಬೇಡಿ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಬದಲಿಗೆ, ಅದು ತನ್ನ ನೇರ ಪೇರೆಂಟ್‌ನಿಂದ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಎರವಲು ಪಡೆಯುತ್ತದೆ ಮತ್ತು ಅಳವಡಿಸಿಕೊಳ್ಳುತ್ತದೆ.
ತಾಂತ್ರಿಕವಾಗಿ, ಸಬ್‌ಗ್ರಿಡ್ ಎಂದರೇನು?
ಸಾರಾಂಶದಲ್ಲಿ, ಸಬ್‌ಗ್ರಿಡ್ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ಮತ್ತು ಅದರ ಪೇರೆಂಟ್ ಗ್ರಿಡ್ ನಡುವೆ ನೇರ ಸಂಪರ್ಕವನ್ನು ರೂಪಿಸುತ್ತದೆ. ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ನಿರ್ದಿಷ್ಟ ಆಯಾಮಕ್ಕಾಗಿ (ಸಾಲುಗಳು, ಕಾಲಮ್‌ಗಳು, ಅಥವಾ ಎರಡೂ) ಪೇರೆಂಟ್‌ನ ಗ್ರಿಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸಂದರ್ಭದಲ್ಲಿ ಭಾಗವಹಿಸುವಂತಾಗುತ್ತದೆ. ನಂತರ ಸಬ್‌ಗ್ರಿಡ್ ಮಾಡಿದ ಐಟಂನ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಈ ಆನುವಂಶಿಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಇರಿಸಬಹುದು, ಇದರಿಂದಾಗಿ ಅವು ತಮ್ಮ ತಕ್ಷಣದ ಪೇರೆಂಟ್‌ನ ಹೊರಗಿನ, ಆದರೆ ಅದೇ ಮುಖ್ಯ ಗ್ರಿಡ್‌ನೊಳಗಿನ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಜೋಡಣೆಯಾಗಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.
ಇದರ ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ: ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ತನ್ನದೇ ಆದ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದಿಲ್ಲ; ಅದು ತನ್ನ ಪೇರೆಂಟ್‌ನ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ.
`subgrid` ಕೀವರ್ಡ್: ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಬಳಕೆ
ಇದರ ಸಿಂಟ್ಯಾಕ್ಸ್ ಸುಂದರವಾಗಿ ಸರಳವಾಗಿದೆ. ನೀವು `subgrid` ಕೀವರ್ಡ್ ಅನ್ನು `grid-template-columns`, `grid-template-rows`, ಅಥವಾ ಎರಡಕ್ಕೂ ಮೌಲ್ಯವಾಗಿ ಬಳಸುತ್ತೀರಿ, ಅದು ಗ್ರಿಡ್ ಐಟಂ ಮತ್ತು ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಎರಡೂ ಆಗಿರುವ ಎಲಿಮೆಂಟ್ ಮೇಲೆ.
ಒಂದು ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ `.nested-grid` `.parent-grid` ನೊಳಗಿನ ಒಂದು ಐಟಂ ಎಂದುಕೊಳ್ಳೋಣ. ಅದನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಮಾಡಲು:
.parent-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Example parent tracks */
grid-template-rows: 100px auto 200px; /* Example parent tracks */
}
.nested-grid {
/* This item must span the tracks it wants to use */
grid-column: 1 / 4; /* Spans all 3 columns of the parent */
grid-row: 2 / 3; /* Sits in the second row of the parent */
/* Now, we activate subgrid */
display: grid;
grid-template-columns: subgrid; /* Inherits the 3 column tracks from parent */
grid-template-rows: subgrid; /* Inherits the single 'auto' row track from parent */
}
ನೆನಪಿಡಬೇಕಾದ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶ: ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು, ಅದು ಮೊದಲು ಆ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳಬೇಕು. ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, `.nested-grid` ತನ್ನ ಪೇರೆಂಟ್‌ನ ಎಲ್ಲಾ ಮೂರು ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, ನಾವು `grid-template-columns: subgrid;` ಎಂದು ಸೆಟ್ ಮಾಡಿದಾಗ, ಅದು ಅದೇ ಮೂರು ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಪಡೆಯುತ್ತದೆ. ಅದರ ಸ್ವಂತ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಈಗ ಪೇರೆಂಟ್‌ನ ಕಾಲಮ್ ಗ್ರಿಡ್‌ನ 1 ರಿಂದ 4 ರವರೆಗಿನ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳನ್ನು ಬಳಸಿ ಇರಿಸಬಹುದು.
ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ
ಈ ಲೇಖನವನ್ನು ಬರೆಯುವ ಸಮಯದಲ್ಲಿ, ಫೈರ್‌ಫಾಕ್ಸ್, ಕ್ರೋಮ್, ಎಡ್ಜ್, ಮತ್ತು ಸಫಾರಿ ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಬ್‌ಗ್ರಿಡ್‌ಗೆ ಪ್ರಬಲ ಬೆಂಬಲವಿದೆ. ಇದು ಜಾಗತಿಕ ಬಳಕೆದಾರರನ್ನು ಗುರಿಯಾಗಿಟ್ಟುಕೊಂಡು ಉತ್ಪಾದನಾ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಒಂದು ಕಾರ್ಯಸಾಧ್ಯವಾದ ಸಾಧನವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಯಾವುದೇ ಆಧುನಿಕ CSS ವೈಶಿಷ್ಟ್ಯದಂತೆ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಳಕೆದಾರರನ್ನು ಪರಿಗಣಿಸುವುದು ಜಾಣತನ.
ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ (Progressive enhancement) ಇಲ್ಲಿ ಪರಿಪೂರ್ಣ ತಂತ್ರವಾಗಿದೆ. ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಒಂದು ದೃಢವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ ಲೇಔಟ್ ಅನ್ನು ಒದಗಿಸಲು ನಾವು CSS ನಲ್ಲಿ `@supports` ಅಟ್-ರೂಲ್ ಅನ್ನು ಬಳಸಬಹುದು, ಮತ್ತು ನಂತರ ಅದನ್ನು ಬೆಂಬಲಿಸುವವರಿಗೆ ಸಬ್‌ಗ್ರಿಡ್-ಚಾಲಿತ ಲೇಔಟ್ ಅನ್ನು ಅನ್ವಯಿಸಬಹುದು.
/* --- Fallback for older browsers --- */
.card {
display: flex;
flex-direction: column;
justify-content: space-between; /* A good flex fallback */
}
/* --- Subgrid enhancement for modern browsers --- */
@supports (grid-template-rows: subgrid) {
.card {
display: grid;
grid-template-rows: subgrid; /* Override the flex display */
grid-row: span 3; /* Assumes parent grid has 3 rows for header, content, footer */
}
}
ಈ ವಿಧಾನವು ಪ್ರತಿಯೊಬ್ಬರಿಗೂ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಸ್ವೀಕಾರಾರ್ಹ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಅದೇ ಸಮಯದಲ್ಲಿ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಹುಪಾಲು ಬಳಕೆದಾರರಿಗೆ ಶ್ರೇಷ್ಠ, ಪರಿಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲಾದ ಲೇಔಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಆಳವಾದ ನೋಟ: ಸಬ್‌ಗ್ರಿಡ್ ಕ್ರಿಯೆಯಲ್ಲಿ
ಸಿದ್ಧಾಂತವು ಅತ್ಯಗತ್ಯ, ಆದರೆ ಸಬ್‌ಗ್ರಿಡ್ ನೈಜ-ಪ್ರಪಂಚದ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವುದನ್ನು ನೋಡುವುದರಿಂದ ಅದರ ಶಕ್ತಿಯು ನಿಜವಾಗಿಯೂ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ. ನಮ್ಮ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಉದಾಹರಣೆಯನ್ನು ಪುನಃ ಪರಿಶೀಲಿಸೋಣ ಮತ್ತು ಅದನ್ನು ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ಸರಿಪಡಿಸೋಣ.
ಉದಾಹರಣೆ 1: ಪರಿಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲಾದ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್
ನಮ್ಮ ಗುರಿ ಕಾರ್ಡ್ ಹೆಡರ್‌ಗಳು, ಕಂಟೆಂಟ್ ಪ್ರದೇಶಗಳು, ಮತ್ತು ಫೂಟರ್‌ಗಳನ್ನು ಎಲ್ಲಾ ಕಾರ್ಡ್‌ಗಳಾದ್ಯಂತ ಜೋಡಿಸಿ, ವಿಷಯದ ಉದ್ದವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಸ್ವಚ್ಛವಾದ ಸಮತಲ ರೇಖೆಗಳನ್ನು ರಚಿಸುವುದು.
ಮೊದಲು, ನಾವು ನಮ್ಮ ಪೇರೆಂಟ್ ಗ್ರಿಡ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಿದೆ. ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಬದಲು, ನಮ್ಮ ಕಾರ್ಡ್‌ಗಳ ಅಪೇಕ್ಷಿತ ವಿಭಾಗಗಳಿಗೆ (ಹೆಡರ್, ಬಾಡಿ, ಫೂಟರ್) ಅನುಗುಣವಾದ ಸಾಲುಗಳನ್ನು ಸಹ ನಾವು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ.
ಹೊಸ HTML (ಯಾವುದೇ ಬದಲಾವಣೆಗಳ ಅಗತ್ಯವಿಲ್ಲ):
<div class="card-container">
<!-- Cards go here, same as before -->
</div>
ಹೊಸ CSS (ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ):
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Define rows for our card structure */
grid-template-rows: auto 1fr auto; /* Row for headers, flexible body, row for footers */
gap: 20px;
}
.card {
border: 1px solid #ccc;
padding: 15px;
/* --- The Subgrid Magic --- */
display: grid;
/* The card itself needs to span all the rows it will use */
grid-row: 1 / 4; /* Span all three rows defined in the parent */
/* Now, inherit those rows */
grid-template-rows: subgrid;
}
/* Place the card's children onto the inherited parent grid */
.card h3 {
grid-row: 1; /* Place in the first row of the parent's grid */
}
.card p {
grid-row: 2; /* Place in the second (flexible) row */
}
.card button {
grid-row: 3; /* Place in the third row */
align-self: end; /* Optional: align to bottom within that row */
}
ಈಗ ಏನಾಯಿತು?
- `.card-container` ಈಗ ಮೂರು-ಸಾಲಿನ ಗ್ರಿಡ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ: ಹೆಡರ್‌ಗಳಿಗಾಗಿ ಒಂದು `auto`-ಗಾತ್ರದ್ದು, ಮುಖ್ಯ ವಿಷಯಕ್ಕಾಗಿ ಒಂದು `1fr` ನಮ್ಯ ಸಾಲು, ಮತ್ತು ಬಟನ್‌ಗಳಿಗಾಗಿ ಇನ್ನೊಂದು `auto`-ಗಾತ್ರದ ಸಾಲು.
- ಪ್ರತಿಯೊಂದು `.card` ಗೆ ಈ ಎಲ್ಲಾ ಮೂರು ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಲು (`grid-row: 1 / 4`) ಹೇಳಲಾಗಿದೆ.
- ನಿರ್ಣಾಯಕವಾಗಿ, ನಾವು `.card` ಮೇಲೆ `display: grid` ಮತ್ತು `grid-template-rows: subgrid` ಅನ್ನು ಸೆಟ್ ಮಾಡಿದ್ದೇವೆ. ಇದು ಕಾರ್ಡ್‌ಗೆ, "ನಿಮ್ಮ ಸ್ವಂತ ಸಾಲುಗಳನ್ನು ರಚಿಸಬೇಡಿ. ನಿಮ್ಮ ಪೇರೆಂಟ್‌ನಿಂದ ನೀವು ವ್ಯಾಪಿಸಿರುವ ಮೂರು ಸಾಲುಗಳನ್ನು ಬಳಸಿ" ಎಂದು ಹೇಳುತ್ತದೆ.
- ಈಗ, ಪ್ರತಿಯೊಂದು ಕಾರ್ಡ್‌ನೊಳಗಿನ `h3`, `p`, ಮತ್ತು `button` ಒಂದೇ ಹಂಚಿಕೆಯ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತಿದೆ. ಕಾರ್ಡ್ 1 ರ `h3` ಕಾರ್ಡ್ 2 ರ `h3` ಇರುವ ಅದೇ ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿದೆ. ಕಾರ್ಡ್ 1 ರ `button` ಕಾರ್ಡ್ 2 ರ ಬಟನ್ ಇರುವ ಅದೇ ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿದೆ. ಫಲಿತಾಂಶ? ಇಡೀ ಕಾಂಪೊನೆಂಟ್‌ನಾದ್ಯಂತ ಪರಿಪೂರ್ಣ ಸಮತಲ ಜೋಡಣೆ.
ಇದು ಒಂದು ಕ್ರಾಂತಿಕಾರಿ ಬದಲಾವಣೆ. ನಾವು ಸಂಕೀರ್ಣ ಜೋಡಣೆಯ ಗುರಿಯನ್ನು ಸರಳ, ಘೋಷಣಾತ್ಮಕ CSS ನೊಂದಿಗೆ, ಹ್ಯಾಕ್‌ಗಳಿಲ್ಲದೆ, ಮತ್ತು ಸ್ವಚ್ಛ, ಶಬ್ದಾರ್ಥದ HTML ರಚನೆಯನ್ನು ನಿರ್ವಹಿಸಿಕೊಂಡು ಸಾಧಿಸಿದ್ದೇವೆ.
ಉದಾಹರಣೆ 2: ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಜೋಡಿಸುವುದು
ಸ್ವಚ್ಛ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಜೋಡಣೆ ನಿರ್ಣಾಯಕವಾಗಿರುವ ಮತ್ತೊಂದು ಕ್ಷೇತ್ರವೆಂದರೆ ಫಾರ್ಮ್‌ಗಳು. ಪುಟದ ಒಂದು ವಿಭಾಗವು ಗ್ರಿಡ್ ಐಟಂ ಆಗಿದೆಯೆಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಮತ್ತು ಆ ವಿಭಾಗದೊಳಗೆ, ನೀವು ಪುಟದ ಇತರ ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಜೋಡಿಸಲು ಬಯಸುವ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಳೊಂದಿಗೆ ಒಂದು ಫಾರ್ಮ್ ಇದೆ.
HTML ರಚನೆ:
<div class="page-layout">
<aside>... sidebar content ...</aside>
<main>
<h1>Profile Settings</h1>
<form class="profile-form">
<label for="name">Full Name</label>
<input type="text" id="name" />
<label for="email">Email Address</label>
<input type="email" id="email" />
<label for="country">Country/Region</label>
<input type="text" id="country" />
</form>
</main>
</div>
ಕಾಲಮ್ ಆಧಾರಿತ ಸಬ್‌ಗ್ರಿಡ್ ಬಳಸಿ CSS:
.page-layout {
display: grid;
/* A common layout: sidebar, main content with two sub-columns */
grid-template-columns: 200px [main-start] 150px 1fr [main-end];
gap: 30px;
}
main {
grid-column: main-start / main-end; /* Span the two main content columns */
display: grid;
/* This is the key: inherit the parent's columns */
grid-template-columns: subgrid;
/* We can define our own rows as needed */
grid-auto-rows: min-content;
align-content: start;
}
main h1 {
/* Let the heading span both inherited columns */
grid-column: 1 / 3;
}
.profile-form {
/* This form is also a grid item within 'main' */
grid-column: 1 / 3;
display: grid;
/* And we make IT a subgrid too! */
grid-template-columns: subgrid;
gap: 15px;
grid-auto-rows: min-content;
}
/* Now place labels and inputs on the inherited page-level grid */
.profile-form label {
grid-column: 1; /* Align to the first column (150px from .page-layout) */
text-align: right;
}
.profile-form input {
grid-column: 2; /* Align to the second column (1fr from .page-layout) */
}
ಈ ಸುಧಾರಿತ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಮ್ಮಲ್ಲಿ ಒಂದು ನೆಸ್ಟೆಡ್ ಸಬ್‌ಗ್ರಿಡ್ ಇದೆ. `main` ಎಲಿಮೆಂಟ್ `.page-layout` ನಿಂದ ಕಾಲಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಆಗುತ್ತದೆ. ನಂತರ, ಅದರೊಳಗಿನ `form` ಸಹ ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಆಗುತ್ತದೆ, ಅದೇ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಮತ್ತೆ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ. ಇದು ಫಾರ್ಮ್‌ನ ಲೇಬಲ್‌ಗಳು ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ ಮುಖ್ಯ ಪುಟದ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಇರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅವುಗಳು ಉನ್ನತ-ಮಟ್ಟದ ಕಂಟೇನರ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಒಟ್ಟಾರೆ ಪುಟ ರಚನೆಯೊಂದಿಗೆ ಪರಿಪೂರ್ಣವಾಗಿ ಜೋಡಣೆಯಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಮಟ್ಟದ ಸಂಯೋಜನಾತ್ಮಕ ನಿಯಂತ್ರಣವು ಹಿಂದೆ ಶುದ್ಧ CSS ನೊಂದಿಗೆ ಕಲ್ಪನಾತೀತವಾಗಿತ್ತು.
ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳಿಗೆ ಸಬ್‌ಗ್ರಿಡ್: ಒಂದು-ಆಯಾಮದ ಮತ್ತು ಎರಡು-ಆಯಾಮದ ಆನುವಂಶಿಕತೆ
ನೀವು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಎರಡೂ ಅಕ್ಷಗಳಿಗೆ ಏಕಕಾಲದಲ್ಲಿ ಬಳಸಬೇಕಾಗಿಲ್ಲ. ನೀವು ಕೇವಲ ಕಾಲಮ್‌ಗಳಿಗೆ, ಕೇವಲ ಸಾಲುಗಳಿಗೆ, ಅಥವಾ ಎರಡಕ್ಕೂ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಆಯ್ಕೆ ಮಾಡಬಹುದು. ಇದು ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳ ಮೇಲೆ ಸೂಕ್ಷ್ಮ-ಧಾನ್ಯದ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಕಾಲಮ್ ಆಧಾರಿತ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳು: `grid-template-columns: subgrid;`
ಮೇಲಿನ ಫಾರ್ಮ್ ಉದಾಹರಣೆಯಂತೆ, ಕಾಂಪೊನೆಂಟ್‌ಗಳಾದ್ಯಂತ ಐಟಂಗಳನ್ನು ಸಮತಲವಾಗಿ ಜೋಡಿಸಲು ಇದು ಸೂಕ್ತವಾಗಿದೆ. ನೀವು `grid-template-columns: subgrid;` ಅನ್ನು ಬಳಸಿದಾಗ, ನೀವು ಇನ್ನೂ `auto`, `1fr`, ಅಥವಾ ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳಂತಹ ಪ್ರಮಾಣಿತ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ ಸ್ವಂತ ಸಾಲು ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು (ಉದಾ., `grid-template-rows: auto 1fr;`). ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ ಆದರೆ ತನ್ನದೇ ಆದ ಸಾಲು ಗಾತ್ರ ಮತ್ತು ಎಣಿಕೆಗೆ ಜವಾಬ್ದಾರವಾಗಿರುತ್ತದೆ.
ಸಾಲು ಆಧಾರಿತ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳು: `grid-template-rows: subgrid;`
ನಾವು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಉದಾಹರಣೆಯಲ್ಲಿ ಮಾಡಿದಂತೆ, ಐಟಂಗಳನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲು ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ. ವಿಭಿನ್ನ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸಮತಲ ವಿಭಾಗಗಳು ಒಂದೇ ಸಾಲಿನಲ್ಲಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ಅತ್ಯುತ್ತಮವಾಗಿದೆ. `grid-template-rows: subgrid;` ಅನ್ನು ಬಳಸುವಾಗ, ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಕಾಲಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು (ಉದಾ., `grid-template-columns: 1fr 1fr;`).
ಎರಡನ್ನೂ ಸಂಯೋಜಿಸುವುದು: ಸಂಪೂರ್ಣ ಆನುವಂಶಿಕತೆ
ನೀವು `grid-template-columns: subgrid;` ಮತ್ತು `grid-template-rows: subgrid;` ಎರಡನ್ನೂ ಸೆಟ್ ಮಾಡಿದಾಗ, ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ತನ್ನ ಗೊತ್ತುಪಡಿಸಿದ ಪ್ರದೇಶದೊಳಗೆ ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ಗೆ ನಿಜವಾದ ಪ್ರಾಕ್ಸಿಯಾಗುತ್ತದೆ. ಅದು ತನ್ನದೇ ಆದ ಯಾವುದೇ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದಿಲ್ಲ. ತಮ್ಮ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಆ ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ರಚನೆಯ ಮೇಲೆ ಇರಿಸಲು ಸಂಪೂರ್ಣ ಸ್ವಾತಂತ್ರ್ಯವನ್ನು ನೀಡುವಾಗ, ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ನ ಒಂದು ಭಾಗಕ್ಕೆ ಕಟ್ಟುನಿಟ್ಟಾಗಿ ಸೀಮಿತವಾಗಿರಬೇಕಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಇದು ಶಕ್ತಿಯುತವಾಗಿದೆ.
ಒಂದು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವಿಜೆಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ವಿಜೆಟ್ ಸ್ವತಃ ಮುಖ್ಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಗ್ರಿಡ್‌ನ 3 ಕಾಲಮ್‌ಗಳು ಮತ್ತು 2 ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಬಹುದು. ವಿಜೆಟ್ ಅನ್ನು ಪೂರ್ಣ ಸಬ್‌ಗ್ರಿಡ್ ಮಾಡುವ ಮೂಲಕ, ವಿಜೆಟ್‌ನೊಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು (ಚಾರ್ಟ್ ಶೀರ್ಷಿಕೆ, ಚಾರ್ಟ್ ಸ್ವತಃ, ಮತ್ತು ಒಂದು ಲೆಜೆಂಡ್‌ನಂತಹ) ಆ 3 ಕಾಲಮ್‌ಗಳು ಮತ್ತು 2 ಸಾಲುಗಳ ಮೇಲೆ ನಿಖರವಾಗಿ ಇರಿಸಬಹುದು, ಪಕ್ಕದ ವಿಜೆಟ್‌ಗಳಲ್ಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಜೋಡಿಸಬಹುದು.
ಸುಧಾರಿತ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳು
ನೀವು ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ಹೆಚ್ಚು ಆರಾಮದಾಯಕವಾದಂತೆ, ನೀವು ಅದರ ಕೆಲವು ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ಮತ್ತು ಶಕ್ತಿಯುತ ಅಂಶಗಳನ್ನು ಎದುರಿಸುತ್ತೀರಿ.
ಸಬ್‌ಗ್ರಿಡ್ ಮತ್ತು `gap`
ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ನಲ್ಲಿನ `gap` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ. ಟ್ರ್ಯಾಕ್‌ಗಳ ನಡುವಿನ ಸ್ಥಳವು ಗ್ರಿಡ್ ವ್ಯಾಖ್ಯಾನದ ಭಾಗವಾಗಿದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮಗೆ ಬೇಕಾಗಿರುವುದೇ ಆಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಲೇಔಟ್‌ನಾದ್ಯಂತ ಸ್ಥಿರವಾದ ಅಂತರವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ನೀವು ಸಬ್‌ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿಯೇ `gap` ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಇದು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದ ಗ್ಯಾಪ್‌ಗೆ ಸೇರಿಸುತ್ತದೆ, ಇದು ತಿಳಿದಿರಬೇಕಾದ ಒಂದು ವರ್ತನೆಯಾಗಿದೆ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಗ್ಯಾಪ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಪರಿಪೂರ್ಣ ಸ್ಥಿರತೆಗಾಗಿ ಸಬ್‌ಗ್ರಿಡ್ ಅದನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಬಿಡಲು ಬಯಸುತ್ತೀರಿ.
ಸಬ್‌ಗ್ರಿಡ್ ಸಂದರ್ಭದಲ್ಲಿ ಗಾತ್ರ ಮತ್ತು ವ್ಯಾಪಿಸುವಿಕೆ
ಇದು ಅತ್ಯಂತ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ನೀವು ಸಬ್‌ಗ್ರಿಡ್‌ನೊಳಗೆ ಒಂದು ಐಟಂ ಅನ್ನು ಇರಿಸಿ ಮತ್ತು ಅದನ್ನು ಬಹು ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಲು ಹೇಳಿದಾಗ (ಉದಾ., `grid-column: span 2;`), ಅದು ಮೂಲ ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ನ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುತ್ತದೆ. ಇದು ಸಬ್‌ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ಎರಡು ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುತ್ತಿಲ್ಲ; ಇದು ಸಬ್‌ಗ್ರಿಡ್ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದ ಎರಡು ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸುತ್ತಿದೆ.
ಇದು ನಂಬಲಾಗದ ಸಂಯೋಜನಾತ್ಮಕ ನಮ್ಯತೆಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ. DOM ಟ್ರೀಯ ಆಳದಲ್ಲಿರುವ ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಉನ್ನತ-ಮಟ್ಟದ ಪುಟ ರಚನೆಯೊಂದಿಗೆ ಜೋಡಿಸಬಹುದು ಮತ್ತು ವ್ಯಾಪಿಸಬಹುದು, ಅದರ ತಕ್ಷಣದ ಕಂಟೇನರ್‌ನ ದೃಶ್ಯ ಗಡಿಗಳನ್ನು ನಿಯಂತ್ರಿತ ಮತ್ತು ನಿರೀಕ್ಷಿತ ರೀತಿಯಲ್ಲಿ ಮೀರಿ. ಡೈನಾಮಿಕ್, ಮ್ಯಾಗಜೀನ್-ಶೈಲಿಯ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಅದ್ಭುತವಾಗಿದೆ, ಅಲ್ಲಿ ಒಂದು ಚಿತ್ರವು ಮುಖ್ಯ ಲೇಖನದ ಗ್ರಿಡ್‌ನ ಹಲವಾರು ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಬಹುದು, ಅದು `figure` ಎಲಿಮೆಂಟ್‌ನೊಳಗೆ ನೆಸ್ಟೆಡ್ ಆಗಿದ್ದರೂ ಸಹ.
ಲಭ್ಯತೆಯ ಪರಿಗಣನೆಗಳು
CSS ಗ್ರಿಡ್‌ನ ದೊಡ್ಡ ಪ್ರಯೋಜನಗಳಲ್ಲಿ ಒಂದು, ಅದು ಸಬ್‌ಗ್ರಿಡ್‌ಗೂ ವಿಸ್ತರಿಸುತ್ತದೆ, ಮೂಲ ಕ್ರಮವನ್ನು ದೃಶ್ಯ ಪ್ರಸ್ತುತಿಯಿಂದ ಬೇರ್ಪಡಿಸುವುದು. ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ, ನೀವು ತಾರ್ಕಿಕ ಮತ್ತು ಲಭ್ಯವಿರುವ HTML ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆಯನ್ನು (ಉದಾ., ಒಂದು ಶೀರ್ಷಿಕೆ ಮತ್ತು ಅದರ ನಂತರದ ವಿಷಯ) ನಿರ್ವಹಿಸಬಹುದು, ಅದೇ ಸಮಯದಲ್ಲಿ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಅಥವಾ ಸೃಜನಾತ್ಮಕ ದೃಶ್ಯ ಲೇಔಟ್ ಅನ್ನು ಸಾಧಿಸಲು ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸಬಹುದು.
ಸಬ್‌ಗ್ರಿಡ್ ನಿಮಗೆ ಲೇಔಟ್ ಹ್ಯಾಕ್‌ಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುವುದರಿಂದ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ವಚ್ಛ HTML ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಸ್ಕ್ರೀನ್ ರೀಡರ್ ತಾರ್ಕಿಕ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಹಾದುಹೋಗುತ್ತದೆ, ಆದರೆ ದೃಶ್ಯ ಬಳಕೆದಾರರು ಪರಿಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲಾದ ವಿನ್ಯಾಸವನ್ನು ನೋಡುತ್ತಾರೆ. ಉದಾಹರಣೆಗೆ, ನಮ್ಮ ಕಾರ್ಡ್ ಲೇಔಟ್‌ನಲ್ಲಿ, ಪ್ರತಿ ಕಾರ್ಡ್‌ಗೆ HTML ಒಂದು ಸ್ವಯಂ-ಒಳಗೊಂಡಿರುವ, ತಾರ್ಕಿಕ ಘಟಕವಾಗಿ ಉಳಿದಿದೆ (`h3` -> `p` -> `button`). ಸಬ್‌ಗ್ರಿಡ್ ಡಾಕ್ಯುಮೆಂಟ್ ಫ್ಲೋವನ್ನು ಬದಲಾಯಿಸದೆ ಈ ಘಟಕಗಳ ನಡುವಿನ ದೃಶ್ಯ ಜೋಡಣೆಯನ್ನು ಸರಳವಾಗಿ ಸಂಯೋಜಿಸುತ್ತದೆ, ಇದು ಲಭ್ಯತೆಗೆ ಒಂದು ದೊಡ್ಡ ಗೆಲುವು ಮತ್ತು ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಒಂದು ಮೂಲ ತತ್ವವಾಗಿದೆ.
CSS ಲೇಔಟ್‌ನ ಭವಿಷ್ಯ: ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಸಬ್‌ಗ್ರಿಡ್‌ನ ಸ್ಥಾನ
ಸಬ್‌ಗ್ರಿಡ್ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅಥವಾ ಸಾಮಾನ್ಯ CSS ಗ್ರಿಡ್‌ಗೆ ಬದಲಿಯಾಗಿಲ್ಲ. ಇದು ಒಂದು ನಿರ್ದಿಷ್ಟ, ನಿರ್ಣಾಯಕ ಅಂತರವನ್ನು ತುಂಬುವ ಒಂದು ಶಕ್ತಿಯುತ ವರ್ಧನೆಯಾಗಿದೆ. ಆಧುನಿಕ CSS ಲೇಔಟ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯು ಕೆಲಸಕ್ಕೆ ಸರಿಯಾದ ಸಾಧನವನ್ನು ಬಳಸುವುದರ ಬಗ್ಗೆ:
- ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್: ಒಂದು-ಆಯಾಮದ ಲೇಔಟ್‌ಗಳಿಗೆ, ಒಂದೇ ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಸ್ಥಳವನ್ನು ವಿತರಿಸಲು, ಮತ್ತು ಕಂಟೇನರ್‌ನೊಳಗೆ ಐಟಂಗಳನ್ನು ಜೋಡಿಸಲು ಉತ್ತಮವಾಗಿದೆ. ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ಗಳು, ಬಟನ್ ಗುಂಪುಗಳು, ಮತ್ತು ಸರಳ ಕಾಂಪೊನೆಂಟ್ ಆಂತರಿಕಗಳಿಗೆ ಪರಿಪೂರ್ಣ.
- CSS ಗ್ರಿಡ್: ಎರಡು-ಆಯಾಮದ ಪುಟ-ಮಟ್ಟದ ಲೇಔಟ್‌ಗಳಿಗೆ, ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳ ನಡುವೆ ಸಂಬಂಧಗಳನ್ನು ರಚಿಸಲು ಉತ್ತಮವಾಗಿದೆ. ನಿಮ್ಮ ಒಟ್ಟಾರೆ ಪುಟ ರಚನೆಗೆ ಅಡಿಪಾಯ.
- CSS ಸಬ್‌ಗ್ರಿಡ್: ನೆಸ್ಟೆಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಮುಖ್ಯ ಪುಟ ಗ್ರಿಡ್ ನಡುವಿನ ಸೇತುವೆ. ಗ್ರಿಡ್ ಐಟಂ ಒಳಗಿನ ಐಟಂಗಳು ಅದರ ಹೊರಗಿನ ಐಟಂಗಳೊಂದಿಗೆ ಜೋಡಣೆಯಾಗಬೇಕಾದಾಗ ನೀವು ಬಳಸುವ ಸಾಧನ ಇದು.
ಮುಂದೆ ನೋಡಿದರೆ, ಸಬ್‌ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಂತಹ ಇತರ ಆಧುನಿಕ CSS ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಸುಂದರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನೀವು ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಹೊಂದಬಹುದು, ಅದು ಅದರ ಕಂಟೇನರ್ ಅಗಲವಾಗಿದ್ದಾಗ ಸಬ್‌ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಕಿರಿದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಸರಳ ಬ್ಲಾಕ್ ಅಥವಾ ಫ್ಲೆಕ್ಸ್ ಲೇಔಟ್‌ಗೆ ಸ್ಟ್ಯಾಕ್ ಆಗುತ್ತದೆ. ಮ್ಯಾಕ್ರೋ-ಮಟ್ಟದ ಲೇಔಟ್ (ಗ್ರಿಡ್), ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ಜೋಡಣೆ (ಸಬ್‌ಗ್ರಿಡ್), ಮತ್ತು ಕಂಟೇನರ್-ಅರಿವಿನ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆ (ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು) ಈ ಸಂಯೋಜನೆಯು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಮುಂದಿನ ಪೀಳಿಗೆಯ ವೆಬ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಯುತ ಮತ್ತು ಅಭಿವ್ಯಕ್ತಿಶೀಲ ಟೂಲ್‌ಕಿಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ.
ತೀರ್ಮಾನ: ಜೋಡಿಸಲಾದ ಸಂಯೋಜನೆಯ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ
CSS ಸಬ್‌ಗ್ರಿಡ್ ಕೇವಲ ಒಂದು ಹೊಸ ವೈಶಿಷ್ಟ್ಯಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿದೆ; ಇದು ನಾವು ವೆಬ್‌ನಲ್ಲಿ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸಬಹುದು ಎಂಬುದರಲ್ಲಿ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯಾಗಿದೆ. ಇದು ದೀರ್ಘಕಾಲದ ಸಮಸ್ಯೆಯನ್ನು ಸೊಗಸಾದ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಪರಿಹಾರದೊಂದಿಗೆ ಪರಿಹರಿಸುತ್ತದೆ, ಸ್ವಚ್ಛ ಕೋಡ್, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು, ಮತ್ತು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪರಿಪೂರ್ಣ ವಿನ್ಯಾಸಗಳನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ.
ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್‌ಗಳು ತಮ್ಮ ಪೇರೆಂಟ್ಸ್‌ನ ಲೇಔಟ್‌ನಲ್ಲಿ ಭಾಗವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುವ ಮೂಲಕ, ಸಬ್‌ಗ್ರಿಡ್ ನಮಗೆ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಮಾಡಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ:
- ಪರಿಪೂರ್ಣ ಜೋಡಣೆ ಸಾಧಿಸಿ: ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳು ಹ್ಯಾಕ್‌ಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ದೋಷರಹಿತವಾಗಿ ಜೋಡಣೆಯಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- DRYer ಕೋಡ್ ಬರೆಯಿರಿ: ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಗ್ರಿಡ್ ರಚನೆಯನ್ನು ಒಮ್ಮೆ ವ್ಯಾಖ್ಯಾನಿಸಿ ಮತ್ತು ನೆಸ್ಟೆಡ್ ಎಲಿಮೆಂಟ್‌ಗಳು ಅದನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವಂತೆ ಮಾಡಿ, ಪುನರಾವರ್ತಿತ ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ತಪ್ಪಿಸಿ.
- ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸಿ: ಲೇಔಟ್ ತರ್ಕವು ಪೇರೆಂಟ್ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ, ಇದು ನವೀಕರಣಗಳು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಹೆಚ್ಚು ಸರಳಗೊಳಿಸುತ್ತದೆ.
- ಲಭ್ಯತೆಯನ್ನು ಹೆಚ್ಚಿಸಿ: ತಾರ್ಕಿಕ ಮತ್ತು ಶಬ್ದಾರ್ಥದ ಮೂಲ ಕ್ರಮವನ್ನು ಸಂರಕ್ಷಿಸುವಾಗ ಅತ್ಯಾಧುನಿಕ ದೃಶ್ಯ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಿ.
ವ್ಯಾಪಕ ಬ್ರೌಸರ್ ಬೆಂಬಲದೊಂದಿಗೆ, ಪ್ರಪಂಚದಾದ್ಯಂತದ ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ಡಿಸೈನರ್‌ಗಳು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ತಮ್ಮ ಕಾರ್ಯಪ್ರವಾಹಕ್ಕೆ ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಇದು ಸರಿಯಾದ ಸಮಯ. ಅಡ್ಡ-ಎಲಿಮೆಂಟ್ ಜೋಡಣೆಯಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಗುರುತಿಸುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಿ, ಸಾಲು ಮತ್ತು ಕಾಲಮ್ ಆನುವಂಶಿಕತೆಯೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ಮತ್ತು ಪರದೆಯ ಮೇಲೆ ಸುಂದರವಾಗಿರುವಂತೆಯೇ ಹುಡ್ ಅಡಿಯಲ್ಲಿ ದೃಢವಾದ ಮತ್ತು ತಾರ್ಕಿಕವಾಗಿರುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ತೃಪ್ತಿಯನ್ನು ಅನುಭವಿಸಿ. ರಾಜಿ ಮಾಡಿಕೊಂಡ ನೆಸ್ಟೆಡ್ ಲೇಔಟ್‌ಗಳ ಯುಗ ಮುಗಿದಿದೆ; ಸುಧಾರಿತ, ಜೋಡಿಸಲಾದ ಸಂಯೋಜನೆಯ ಯುಗವು ನಿಜವಾಗಿಯೂ ಪ್ರಾರಂಭವಾಗಿದೆ.