CSS ಸಬ್‌ಗ್ರಿಡ್‌ನ ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ಅನ್ವೇಷಿಸಿ. ಸಂಕೀರ್ಣ UI ಲೇಔಟ್‌ಗಳಿಗೆ ಇದು ಪ್ರಬಲ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ನಿಖರವಾದ ಜೋಡಣೆ ಮತ್ತು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ಕಲಿಯಿರಿ.
CSS ಸಬ್‌ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ: ತಡೆರಹಿತ UI ಗಾಗಿ ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದ ಅಡಿಪಾಯ
ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಭೂದೃಶ್ಯದಲ್ಲಿ, CSS ಗ್ರಿಡ್ ಒಂದು ಪರಿವರ್ತಕ ಶಕ್ತಿಯಾಗಿ ಹೊರಹೊಮ್ಮಿದೆ, ಇದು ನಾವು ಸಂಕೀರ್ಣ ಪುಟದ ವಿನ್ಯಾಸಗಳನ್ನು ಸಮೀಪಿಸುವ ವಿಧಾನವನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸಿದೆ. ಇದು ವಿಷಯವನ್ನು ಜೋಡಿಸಲು ದೃಢವಾದ, ಎರಡು-ಆಯಾಮದ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಅಪ್ರತಿಮ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ವಿನ್ಯಾಸಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದಂತೆ ಮತ್ತು ಘಟಕ-ಆಧಾರಿತ ವಾಸ್ತುಶಿಲ್ಪಗಳು ಸಾಮಾನ್ಯವಾದಂತೆ, ಒಂದು ಹೊಸ ಸವಾಲು ಉದ್ಭವಿಸಿತು: ಪುನರಾವರ್ತಿತ ಘೋಷಣೆಗಳು ಅಥವಾ ತೊಡಕಿನ ಪರಿಹಾರಗಳಿಲ್ಲದೆ ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ಐಟಂಗಳನ್ನು ಅವುಗಳ ಪೋಷಕ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ ಹೇಗೆ ಜೋಡಿಸುವುದು?
ಇಲ್ಲಿ CSS ಸಬ್‌ಗ್ರಿಡ್ ಪ್ರವೇಶಿಸುತ್ತದೆ – ಇದು ಈ ಅಗತ್ಯವನ್ನು ನಿಖರವಾಗಿ ಪೂರೈಸುವ ಒಂದು ಅದ್ಭುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಸಬ್‌ಗ್ರಿಡ್ ಒಂದು ಗ್ರಿಡ್ ಐಟಂ ತನ್ನದೇ ಆದ ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಆಗಲು ಅನುಮತಿಸುತ್ತದೆ, ಆದರೆ ತನ್ನದೇ ಆದ ಸ್ವತಂತ್ರ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಬದಲು, ಅದು ತನ್ನ ಪೋಷಕ ಗ್ರಿಡ್‌ನಿಂದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬಹುದು. ಈ ಸಾಮರ್ಥ್ಯ, ವಿಶೇಷವಾಗಿ ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದ ಪರಿಕಲ್ಪನೆ, ಕೇವಲ ಒಂದು ಹೆಚ್ಚುವರಿ ಸುಧಾರಣೆಯಲ್ಲ; ಇದು ನಿಜವಾಗಿಯೂ ತಡೆರಹಿತ, ನಿರ್ವಹಿಸಬಹುದಾದ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಭೂತಪೂರ್ವ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯಾಗಿದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ CSS ಸಬ್‌ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ ಮತ್ತು ಅದರ ಆನುವಂಶಿಕ ಲೆಕ್ಕಾಚಾರದ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ. ನಾವು ಅದರ ಮೂಲ ತತ್ವಗಳು, ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ನಿಮ್ಮ ಜಾಗತಿಕ ಯೋಜನೆಗಳಲ್ಲಿ ಈ ಪ್ರಬಲ ಸಾಧನವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಜ್ಞಾನವನ್ನು ನೀಡುತ್ತದೆ. ನೀವು ಸಂಕೀರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್, ಮಾಡ್ಯುಲರ್ ಇ-ಕಾಮರ್ಸ್ ಸೈಟ್ ಅಥವಾ ಡೈನಾಮಿಕ್ ಕಂಟೆಂಟ್ ಪೋರ್ಟಲ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುತ್ತಿರಲಿ, ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ ಜೋಡಣೆ ಮತ್ತು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ಸಾಧಿಸಲು ಸಬ್‌ಗ್ರಿಡ್‌ನ ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ.
CSS ಗ್ರಿಡ್‌ನ ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಸಬ್‌ಗ್ರಿಡ್ ಪಾಂಡಿತ್ಯಕ್ಕೆ ಪೂರ್ವ ಅವಶ್ಯಕತೆ
ನಾವು ಸಬ್‌ಗ್ರಿಡ್‌ನ ಸೂಕ್ಷ್ಮತೆಗಳಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಮುಳುಗುವ ಮೊದಲು, CSS ಗ್ರಿಡ್‌ನ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳ ಬಗ್ಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆಯನ್ನು ಹೊಂದಿರುವುದು ಅತ್ಯಗತ್ಯ. ಸಬ್‌ಗ್ರಿಡ್ ಈ ತತ್ವಗಳ ಮೇಲೆ ನೇರವಾಗಿ ನಿರ್ಮಿಸುತ್ತದೆ, ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ತಿಳುವಳಿಕೆಯು ಅದರ ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಯಂತ್ರಶಾಸ್ತ್ರವನ್ನು ಹೆಚ್ಚು ಅರ್ಥಗರ್ಭಿತವಾಗಿಸುತ್ತದೆ.
ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಮತ್ತು ಗ್ರಿಡ್ ಐಟಂಗಳು
ತನ್ನ ಮೂಲಭೂತವಾಗಿ, CSS ಗ್ರಿಡ್ ಎರಡು ಪ್ರಾಥಮಿಕ ಪಾತ್ರಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ:
- ಗ್ರಿಡ್ ಕಂಟೇನರ್: ಇದು ನೀವು `display: grid` ಅಥವಾ `display: inline-grid` ಅನ್ನು ಅನ್ವಯಿಸುವ ಅಂಶವಾಗಿದೆ. ಇದು ತನ್ನ ನೇರ ಮಕ್ಕಳಿಗಾಗಿ ಹೊಸ ಗ್ರಿಡ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸಂದರ್ಭವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ.
- ಗ್ರಿಡ್ ಐಟಂಗಳು: ಇವು ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ನೇರ ಮಕ್ಕಳು. ಇವುಗಳನ್ನು ಗ್ರಿಡ್ ಮೇಲೆ ಇರಿಸಲಾಗುತ್ತದೆ, ಕಂಟೇನರ್‌ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸಾಲುಗಳು ಮತ್ತು ಅಂಕಣಗಳನ್ನು ಆವರಿಸುತ್ತದೆ.
ಗ್ರಿಡ್ ಕಂಟೇನರ್ ತನ್ನ ಟ್ರ್ಯಾಕ್‌ಗಳ (ಸಾಲುಗಳು ಮತ್ತು ಅಂಕಣಗಳು) ಸಂಖ್ಯೆ ಮತ್ತು ಗಾತ್ರವನ್ನು ಒಳಗೊಂಡಂತೆ ಒಟ್ಟಾರೆ ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಗ್ರಿಡ್ ಐಟಂಗಳು ನಂತರ ಈ ರಚನೆಯೊಳಗೆ ತಮ್ಮನ್ನು ತಾವು ಇರಿಸಿಕೊಳ್ಳುತ್ತವೆ.
ಎಕ್ಸ್‌ಪ್ಲಿಸಿಟ್ vs. ಇಂಪ್ಲಿಸಿಟ್ ಗ್ರಿಡ್‌ಗಳು
ಗ್ರಿಡ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವಾಗ, ನೀವು ಪ್ರಾಥಮಿಕವಾಗಿ ಎಕ್ಸ್‌ಪ್ಲಿಸಿಟ್ ಗ್ರಿಡ್‌ಗಳುಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತೀರಿ, ಅವುಗಳೆಂದರೆ ನೀವು `grid-template-columns` ಮತ್ತು `grid-template-rows` ನಂತಹ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಸಾಲುಗಳು ಮತ್ತು ಅಂಕಣಗಳು:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 100px;
}
ಆದಾಗ್ಯೂ, ನೀವು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಗ್ರಿಡ್ ಸೆಲ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚು ಗ್ರಿಡ್ ಐಟಂಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಅಥವಾ ಒಂದು ಐಟಂ ಸ್ಪಷ್ಟ ಗ್ರಿಡ್ ಗಡಿಗಳ ಹೊರಗೆ ಇರಿಸಲ್ಪಟ್ಟರೆ, CSS ಗ್ರಿಡ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಇಂಪ್ಲಿಸಿಟ್ ಗ್ರಿಡ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. `grid-auto-columns` ಮತ್ತು `grid-auto-rows` ನಂತಹ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ, ಅಥವಾ ಐಟಂ ವಿಸ್ತರಿಸಬೇಕಾದಾಗ `grid-template-columns`/`rows` ನಲ್ಲಿ `auto` ಕೀವರ್ಡ್ ಮೂಲಕ ಇಂಪ್ಲಿಸಿಟ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ.
ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಘಟಕಗಳು: ಗ್ರಿಡ್ ಆಯಾಮಗಳ ಭಾಷೆ
CSS ಗ್ರಿಡ್‌ನ ಶಕ್ತಿಯು ಅದರ ವೈವಿಧ್ಯಮಯ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಘಟಕಗಳಿಂದ ಬರುತ್ತದೆ, ಇದು ನಂಬಲಾಗದಷ್ಟು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ:
- ಸಂಪೂರ್ಣ ಘಟಕಗಳು (
px,em,rem): ಇವು ಸ್ಥಿರ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ, ಊಹಿಸಬಹುದಾದ ಆಯಾಮಗಳನ್ನು ಹೊಂದಿರುವ ಅಂಶಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿವೆ. ಸರಳವಾಗಿದ್ದರೂ, ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸಗಳಿಗೆ ಇವು ಕಡಿಮೆ ಹೊಂದಿಕೊಳ್ಳುವಂತಿರಬಹುದು. - ಶೇಕಡಾ ಘಟಕಗಳು (
%): ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ಗಾತ್ರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಗಾತ್ರಗೊಳಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಕಂಟೇನರ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಎತ್ತರವಿಲ್ಲದೆ `grid-template-rows` ನಲ್ಲಿ ಶೇಕಡಾ ಘಟಕಗಳ ಬಗ್ಗೆ ಜಾಗರೂಕರಾಗಿರಿ, ಏಕೆಂದರೆ ಅವು ಕುಸಿಯಬಹುದು. - ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕಗಳು (
fr): `fr` ಘಟಕ (ಭಿನ್ನರಾಶಿ ಘಟಕ) ಸ್ಪಂದಿಸುವ ಗ್ರಿಡ್ ವಿನ್ಯಾಸದ ಮೂಲಾಧಾರವಾಗಿದೆ. ಇದು ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ಟ್ರ್ಯಾಕ್‌ಗಳ ನಡುವೆ ಅನುಪಾತದಲ್ಲಿ ವಿತರಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, `1fr 2fr 1fr` ಎಂದರೆ ಎರಡನೇ ಟ್ರ್ಯಾಕ್ ಮೊದಲ ಮತ್ತು ಮೂರನೆಯದಕ್ಕಿಂತ ಎರಡು ಪಟ್ಟು ಅಗಲವಾಗಿರುತ್ತದೆ. - ಸ್ವಾಭಾವಿಕವಾಗಿ ಗಾತ್ರದ ಕೀವರ್ಡ್‌ಗಳು:
min-content: ಅದರ ವಿಷಯವು ಓವರ್‌ಫ್ಲೋ ಆಗದಂತೆ ಅವಕಾಶ ನೀಡಿದಷ್ಟು ಚಿಕ್ಕದಾಗಿ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಗಾತ್ರಗೊಳಿಸುತ್ತದೆ.max-content: ಅದರ ವಿಷಯಕ್ಕೆ ಅಗತ್ಯವಿರುವಷ್ಟು ದೊಡ್ಡದಾಗಿ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಗಾತ್ರಗೊಳಿಸುತ್ತದೆ, ಯಾವುದೇ ವಿಷಯದ ಸುತ್ತುವಿಕೆಯನ್ನು ತಡೆಯುತ್ತದೆ.auto: ಅತ್ಯಂತ ಬಹುಮುಖಿ ಕೀವರ್ಡ್. ಲಭ್ಯವಿರುವ ಜಾಗವಿದ್ದರೆ `max-content` ನಂತೆಯೇ ವರ್ತಿಸುತ್ತದೆ, ಆದರೆ ಅಗತ್ಯವಿದ್ದಾಗ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಅವುಗಳ ವಿಷಯದ ಗಾತ್ರಕ್ಕಿಂತ (`min-content` ವರೆಗೆ) ಕುಗ್ಗಿಸಲು ಸಹ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಉಳಿದ ಜಾಗವನ್ನು ಆಕ್ರಮಿಸಬೇಕಾದ ಆದರೆ ಹೊಂದಿಕೊಳ್ಳುವಂತಿರಬೇಕಾದ ಅಂಕಣಗಳಿಗೆ ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
- `minmax(min, max)`: ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಗಾತ್ರದ ಶ್ರೇಣಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಪ್ರಬಲ ಕಾರ್ಯ. ಟ್ರ್ಯಾಕ್ `min` ಗಿಂತ ಚಿಕ್ಕದಾಗಿರುವುದಿಲ್ಲ ಮತ್ತು `max` ಗಿಂತ ದೊಡ್ಡದಾಗಿರುವುದಿಲ್ಲ. `minmax(100px, 1fr)` ನಂತಹ ಕನಿಷ್ಠ ವಿಷಯದ ಅವಶ್ಯಕತೆಗಳನ್ನು ಗೌರವಿಸುವ ಹೊಂದಿಕೊಳ್ಳುವ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ರಚಿಸಲು ಇದು ಅಮೂಲ್ಯವಾಗಿದೆ.
- `fit-content(length)`: `max-content` ಗೆ ಹೋಲುತ್ತದೆ ಆದರೆ ಗಾತ್ರವನ್ನು `length` ನಲ್ಲಿ ಸೀಮಿತಗೊಳಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, `fit-content(400px)` ಎಂದರೆ ಟ್ರ್ಯಾಕ್ ತನ್ನ `max-content` ಗಾತ್ರದವರೆಗೆ ಬೆಳೆಯುತ್ತದೆ ಆದರೆ 400px ಮೀರುವುದಿಲ್ಲ. ಇದು ಪರಿಣಾಮಕಾರಿಯಾಗಿ `minmax(auto, max(min-content, length))` ಆಗಿದೆ.
ಈ ಘಟಕಗಳ ಆಳವಾದ ತಿಳುವಳಿಕೆ ಬಹಳ ಮುಖ್ಯ ಏಕೆಂದರೆ ಸಬ್‌ಗ್ರಿಡ್ ಈ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ಹೇಗೆ ಲೆಕ್ಕಾಚಾರ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಪೋಷಕರಿಂದ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲಾಗುತ್ತದೆ ಎಂಬುದರೊಂದಿಗೆ ನೇರವಾಗಿ ಸಂವಹನ ನಡೆಸುತ್ತದೆ.
CSS ಸಬ್‌ಗ್ರಿಡ್‌ಗೆ ಇಳಿಯುವುದು: ನೆಸ್ಟೆಡ್ ಲೇಔಟ್‌ಗಳಲ್ಲಿನ ಅಂತರವನ್ನು ನಿವಾರಿಸುವುದು
ದೀರ್ಘಕಾಲದವರೆಗೆ, CSS ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಪ್ರಾಥಮಿಕ ಸವಾಲುಗಳಲ್ಲಿ ಒಂದು ವಿಭಿನ್ನ ಗ್ರಿಡ್ ಸಂದರ್ಭಗಳಲ್ಲಿ ಅಂಶಗಳನ್ನು ಜೋಡಿಸುವುದು. ನೀವು ಇನ್ನೊಂದು ಗ್ರಿಡ್ ಐಟಂ ಒಳಗೆ ಗ್ರಿಡ್ ಅನ್ನು ನೆಸ್ಟ್ ಮಾಡಿದಾಗ, ಒಳಗಿನ ಗ್ರಿಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವತಂತ್ರವಾಗಿತ್ತು. ಇದು ತನ್ನದೇ ಆದ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಪೋಷಕ ಗ್ರಿಡ್‌ನ ರಚನೆಯ ಬಗ್ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಅರಿವಿಲ್ಲದೆ. ಇದು ಹೆಡರ್, ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ ನಡುವೆ ಪಿಕ್ಸೆಲ್-ಪರಿಪೂರ್ಣ ಕಾಲಮ್ ಜೋಡಣೆಯನ್ನು ಸಾಧಿಸಲು ಕಷ್ಟಕರವಾಗಿಸಿತು, ಅಸಾಧ್ಯವಲ್ಲದಿದ್ದರೂ, ಅಲ್ಲಿ ವಿಷಯವು ಮತ್ತಷ್ಟು ಗ್ರಿಡ್-ಆಧಾರಿತ ಘಟಕಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಗ್ರಿಡ್ ಐಟಂ ಆಗಿರಬಹುದು.
ಇಲ್ಲಿ ಸಬ್‌ಗ್ರಿಡ್ ಪ್ರವೇಶಿಸುತ್ತದೆ – ಇದು ಈ ಅಗತ್ಯವನ್ನು ನಿಖರವಾಗಿ ಪೂರೈಸುವ ಪ್ರಬಲ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಸಬ್‌ಗ್ರಿಡ್ ಒಂದು ಗ್ರಿಡ್ ಐಟಂ ತನ್ನ ತಕ್ಷಣದ ಪೋಷಕ ಗ್ರಿಡ್‌ನಿಂದ ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು "ಸಾಲ ಪಡೆಯಲು" ಅಥವಾ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಅನುಮತಿಸುತ್ತದೆ. ತನ್ನದೇ ಆದ `grid-template-columns` ಅಥವಾ `grid-template-rows` ನೊಂದಿಗೆ ಹೊಸದಾಗಿ ಪ್ರಾರಂಭಿಸುವ ಬದಲು, ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂ ಮೂಲಭೂತವಾಗಿ ತನ್ನ ಪೋಷಕರಿಗೆ, "ನನ್ನ ವ್ಯಾಖ್ಯಾನಿತ ಗ್ರಿಡ್ ಪ್ರದೇಶದೊಳಗೆ ನಿಮ್ಮ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸಲು ನಾನು ಬಯಸುತ್ತೇನೆ" ಎಂದು ಹೇಳುತ್ತದೆ.
ಸಬ್‌ಗ್ರಿಡ್‌ನ ಮೂಲ ಪರಿಕಲ್ಪನೆ: ಪೋಷಕ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವುದು
ಇದನ್ನು ಹೀಗೆ ಯೋಚಿಸಿ: ನೀವು ಐದು ಅಂಕಣಗಳನ್ನು ಹೊಂದಿರುವ ಗ್ರಿಡ್‌ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಮುಖ್ಯ ಪುಟದ ವಿನ್ಯಾಸವನ್ನು ಹೊಂದಿದ್ದರೆ, ಮತ್ತು ನಿಮ್ಮ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶಗಳಲ್ಲಿ ಒಂದು ಅಂಕಣಗಳು 2 ರಿಂದ 4 ರವರೆಗೆ ಹರಡಿರುವ ಗ್ರಿಡ್ ಐಟಂ ಆಗಿದ್ದರೆ, ನೀವು ಆ ವಿಷಯ ಪ್ರದೇಶವನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಆಗಿ ಮಾಡಬಹುದು. ಅದು ಸಬ್‌ಗ್ರಿಡ್ ಆದಾಗ, ಅದು ಕೇವಲ ಅಂಕಣಗಳು 2-4 ಅನ್ನು ಆವರಿಸುವುದಿಲ್ಲ; ಅದು ಬಳಸುತ್ತದೆ ಪೋಷಕ ಗ್ರಿಡ್‌ನಿಂದ ಅಂಕಣಗಳು 2, 3, ಮತ್ತು 4 ರ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ತನ್ನದೇ ಆದ ಆಂತರಿಕ ಟ್ರ್ಯಾಕ್‌ಗಳಾಗಿ. ಇದರರ್ಥ ಸಬ್‌ಗ್ರಿಡ್‌ನ ಯಾವುದೇ ನೇರ ಮಕ್ಕಳು ಪೋಷಕರ ಸ್ಥಾಪಿತ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು: ನಿಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳು
ಸಬ್‌ಗ್ರಿಡ್ ಅಂಶಗಳ ಶ್ರೇಣಿಯಾದ್ಯಂತ ಆಳವಾದ, ಸ್ಥಿರವಾದ ಜೋಡಣೆ ಅಗತ್ಯವಿರುವ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಪ್ರಕಾಶಮಾನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣಗಳಿವೆ:
- ಸಂಕೀರ್ಣ ಘಟಕ ವಿನ್ಯಾಸ: ಚಿತ್ರ, ಶೀರ್ಷಿಕೆ, ವಿವರಣೆ ಮತ್ತು ಬಟನ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಕಾರ್ಡ್ ಘಟಕವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಈ ಕಾರ್ಡ್‌ಗಳು ದೊಡ್ಡ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಇರಬೇಕೆಂದು ನೀವು ಬಯಸುತ್ತೀರಿ, ಮತ್ತು ಕಾರ್ಡ್ ವಿಷಯದ ಎತ್ತರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಎಲ್ಲಾ ಕಾರ್ಡ್‌ಗಳ ಶೀರ್ಷಿಕೆಗಳು ಪರಸ್ಪರ ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿರಬೇಕು. ಸಬ್‌ಗ್ರಿಡ್ ಇಲ್ಲದೆ, ಇದು ಸವಾಲಿನ ಸಂಗತಿಯಾಗಿದೆ. ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ, ಕಾರ್ಡ್ ಸ್ವತಃ ಮುಖ್ಯ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಗ್ರಿಡ್ ಐಟಂ ಆಗಿರಬಹುದು, ಮತ್ತು ನಂತರ ತನ್ನ ಆಂತರಿಕ ಅಂಶಗಳನ್ನು ಪೋಷಕರ ಕಾಲಮ್ ಲೈನ್‌ಗಳಿಗೆ ಜೋಡಿಸಲು ಸಬ್‌ಗ್ರಿಡ್ ಆಗಬಹುದು, ಎಲ್ಲಾ ಕಾರ್ಡ್‌ಗಳಲ್ಲಿ ಸ್ವಚ್ಛ, ವೃತ್ತಿಪರ ನೋಟವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
- ಹೆಡರ್/ಅಡಿಟಿಪ್ಪಣಿ ಜೋಡಣೆ: ಸಾಮಾನ್ಯ ವಿನ್ಯಾಸ ಮಾದರಿಯು ಇಡೀ ಪುಟದಾದ್ಯಂತ ವಿಸ್ತರಿಸುವ ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಆದರೆ ಅವುಗಳ ಆಂತರಿಕ ವಿಷಯ (ಲೋಗೋ, ನ್ಯಾವಿಗೇಷನ್, ಯುಟಿಲಿಟಿ ಲಿಂಕ್‌ಗಳು) ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶದ ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಜೋಡಿಸಬೇಕಾಗಿದೆ. ಸಬ್‌ಗ್ರಿಡ್ ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ ಪೋಷಕರ ಕಾಲಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಅನುಮತಿಸುತ್ತದೆ, ಮ್ಯಾಜಿಕ್ ಸಂಖ್ಯೆಗಳು ಅಥವಾ ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳಿಲ್ಲದೆ ಸ್ಥಿರವಾದ ಜೋಡಣೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
- ಡೇಟಾ ಕೋಷ್ಟಕಗಳು ಮತ್ತು ಪಟ್ಟಿಗಳು: ಹೆಚ್ಚು ರಚನಾತ್ಮಕ ಡೇಟಾ ಪ್ರಸ್ತುತಿಗಳಿಗಾಗಿ, ಅಲ್ಲಿ ನೆಸ್ಟೆಡ್ ಅಂಶಗಳು (ಉದಾಹರಣೆಗೆ, ಸೆಲ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಟೇಬಲ್ ಸಾಲುಗಳು, ಅಥವಾ ಸಂಕೀರ್ಣ ಪಟ್ಟಿ ಐಟಂಗಳು) ತಮ್ಮ ಆಂತರಿಕ ವಿಷಯವನ್ನು ಒಟ್ಟಾರೆ ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಬೇಕಾಗುತ್ತದೆ, ಸಬ್‌ಗ್ರಿಡ್ ಅಮೂಲ್ಯವಾಗಿದೆ.
- ನೆಸ್ಟೆಡ್ ವಿಭಾಗಗಳೊಂದಿಗೆ ಪೂರ್ಣ ಪುಟದ ಲೇಔಟ್‌ಗಳು: ಪೂರ್ಣ ಪುಟದ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಪುಟವನ್ನು ವಿಭಾಗಗಳಾಗಿ ವಿಭಜಿಸುವ ಮುಖ್ಯ ಗ್ರಿಡ್ ಅನ್ನು ನೀವು ಹೊಂದಿರಬಹುದು. ಪ್ರತಿಯೊಂದು ವಿಭಾಗವು ತನ್ನದೇ ಆದ ಆಂತರಿಕ ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿರಬಹುದು, ಆದರೆ ಆ ವಿಭಾಗಗಳಲ್ಲಿನ ಕೆಲವು ಅಂಶಗಳು (ಉದಾಹರಣೆಗೆ, ಪಠ್ಯ ಬ್ಲಾಕ್‌ಗಳು, ಚಿತ್ರಗಳು) ದೃಶ್ಯ ಸಾಮರಸ್ಯಕ್ಕಾಗಿ ಪುಟದ ಸಮಗ್ರ ಗ್ರಿಡ್ ಲೈನ್‌ಗಳಿಗೆ ಜೋಡಿಸಬೇಕಾಗಿದೆ.
ಸಿಂಟ್ಯಾಕ್ಸ್: ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಘೋಷಿಸುವುದು
ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಘೋಷಿಸುವುದು ಸರಳವಾಗಿದೆ. ನೀವು ಒಂದು ಅಂಶಕ್ಕೆ `display: grid` ಅನ್ನು ಅನ್ವಯಿಸುತ್ತೀರಿ, ಅದನ್ನು ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಆಗಿ ಮಾಡುತ್ತೀರಿ, ತದನಂತರ `grid-template-columns` ಅಥವಾ `grid-template-rows` (ಅಥವಾ ಎರಡಕ್ಕೂ) `subgrid` ಅನ್ನು ಬಳಸುತ್ತೀರಿ.
.parent-grid {
display: grid;
grid-template-columns: 1fr repeat(3, minmax(100px, 200px)) 1fr;
grid-template-rows: auto 1fr auto;
}
.subgrid-item {
display: grid;
/* This item spans columns 2 to 5 of its parent */
grid-column: 2 / 6;
grid-row: 2 / 3;
/* Now, it becomes a subgrid for its columns */
grid-template-columns: subgrid;
/* If it also needs to inherit rows, add this: */
/* grid-template-rows: subgrid; */
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `.subgrid-item` ಎಂಬುದು `.parent-grid` ನ ನೇರ ಮಗುವಾಗಿದೆ. ಇದು ಅಂಕಣಗಳು 2 ರಿಂದ 6 ರವರೆಗೆ ವ್ಯಾಪಿಸಿದೆ (ಇದು 4 ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ: ರೇಖೆ 2 ಮತ್ತು 3 ರ ನಡುವೆ, ರೇಖೆ 3 ಮತ್ತು 4 ರ ನಡುವೆ, ರೇಖೆ 4 ಮತ್ತು 5 ರ ನಡುವೆ, ಮತ್ತು ರೇಖೆ 5 ಮತ್ತು 6 ರ ನಡುವೆ ಇರುವ ಟ್ರ್ಯಾಕ್). `grid-template-columns: subgrid;` ಎಂದು ಘೋಷಿಸುವ ಮೂಲಕ, ಅದು "ನನ್ನ ಕಾಲಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳಿಗಾಗಿ, ಹೊಸದನ್ನು ರಚಿಸಬೇಡಿ; ಬದಲಿಗೆ, ನನ್ನ `grid-column` ವ್ಯಾಪ್ತಿಯೊಳಗೆ ಬರುವ ನನ್ನ ಪೋಷಕರ ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಬಳಸಿ" ಎಂದು ಹೇಳುತ್ತದೆ.
`subgrid` ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಟ್ರ್ಯಾಕ್‌ಗಳ ಸಂಖ್ಯೆಯು ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂ ತನ್ನ ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಆಕ್ರಮಿಸುವ ಗ್ರಿಡ್ ಪ್ರದೇಶದಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂ ಮೂರು ಪೋಷಕ ಕಾಲಮ್‌ಗಳನ್ನು ಆವರಿಸಿದರೆ, ಅದು ಮೂರು ಸಬ್‌ಗ್ರಿಡ್ ಕಾಲಮ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಅದು ಎರಡು ಪೋಷಕ ಸಾಲುಗಳನ್ನು ಆವರಿಸಿದರೆ, ಅದು ಎರಡು ಸಬ್‌ಗ್ರಿಡ್ ಸಾಲುಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಈ ಸ್ವಯಂಚಾಲಿತ ಲೆಕ್ಕಾಚಾರವು ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ಲೇಔಟ್‌ನ ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ.
ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದ ಶಕ್ತಿ: ನಿಖರತೆ ಮತ್ತು ಹೊಂದಾಣಿಕೆ
ಸಬ್‌ಗ್ರಿಡ್‌ನ ನಿಜವಾದ ಪ್ರತಿಭೆಯು ಅದರ ಪೋಷಕರ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳ ನಿಖರವಾದ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವ ಸಾಮರ್ಥ್ಯದಲ್ಲಿದೆ. ಇದು ಕೇವಲ ರೇಖೆಗಳನ್ನು ಹೊಂದಾಣಿಕೆ ಮಾಡುವುದಲ್ಲ; ಇದು `fr`, `minmax()`, `auto`, ಮತ್ತು ಸ್ಥಿರ ಘಟಕಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ಇಡೀ ಗಾತ್ರದ ಅಲ್ಗಾರಿದಮ್ ಅನ್ನು ಹೊಂದಾಣಿಕೆ ಮಾಡುವುದು, ಲಭ್ಯವಿರುವ ಜಾಗ ಮತ್ತು ವಿಷಯದ ನಿರ್ಬಂಧಗಳನ್ನು ಗೌರವಿಸುವಾಗ. ಈ ವೈಶಿಷ್ಟ್ಯವು ನೆಸ್ಟಿಂಗ್‌ನ ಬಹು ಹಂತಗಳಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡುವ ನಂಬಲಾಗದಷ್ಟು ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.
ಸಬ್‌ಗ್ರಿಡ್ ಪೋಷಕ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಹೇಗೆ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ
ನೀವು `grid-template-columns: subgrid;` (ಅಥವಾ ಸಾಲುಗಳಿಗಾಗಿ) ಎಂದು ಘೋಷಿಸಿದಾಗ, ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂ ಮೂಲಭೂತವಾಗಿ ಲೇಔಟ್ ಎಂಜಿನ್‌ಗೆ ಹೇಳುತ್ತದೆ:
- "ನನ್ನ ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ನಾನು ಆಕ್ರಮಿಸುವ ಗ್ರಿಡ್ ಪ್ರದೇಶವನ್ನು ಗುರುತಿಸಿ."
- "ನನ್ನ ಆಕ್ರಮಿತ ಪ್ರದೇಶದೊಳಗೆ ಬರುವ ಪೋಷಕ ಟ್ರ್ಯಾಕ್‌ಗಳ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, `1fr`, `minmax(100px, auto)`, `200px`) ತೆಗೆದುಕೊಳ್ಳಿ."
- "ನನ್ನದೇ ಆದ ಆಂತರಿಕ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಗಾತ್ರಗೊಳಿಸಲು ಆ ನಿಖರವಾದ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಬಳಸಿ."
ಇದರರ್ಥ ಒಂದು ಪೋಷಕ ಕಾಲಮ್ ಅನ್ನು `minmax(150px, 1fr)` ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ, ಮತ್ತು ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಆ ಕಾಲಮ್ ಅನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದರೆ, ಅದರ ಅನುಗುಣವಾದ ಆಂತರಿಕ ಕಾಲಮ್ ಸಹ `minmax(150px, 1fr)` ಆಗಿರುತ್ತದೆ. ಸ್ಪಂದಿಸುವಿಕೆ ಅಥವಾ ಡೈನಾಮಿಕ್ ವಿಷಯದ ಕಾರಣದಿಂದ ಪೋಷಕ ಕಾಲಮ್ ತನ್ನ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಸಬ್‌ಗ್ರಿಡ್‌ನ ಆನುವಂಶಿಕ ಕಾಲಮ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಿಂಕ್‌ನಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯಾಗುತ್ತದೆ. ಈ ಸಿಂಕ್ರೊನೈಸೇಶನ್ ದೃಶ್ಯ ಸಮಗ್ರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಎಷ್ಟು ಶಕ್ತಿಶಾಲಿಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.
ಒಂದು ಸರಳ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:
.parent {
display: grid;
grid-template-columns: 1fr 200px 2fr;
}
.child-subgrid {
display: grid;
grid-column: 1 / 4; /* Spans all three parent columns */
grid-template-columns: subgrid;
}
.grandchild-item-1 {
grid-column: 1 / 2; /* Aligns with parent's 1st column */
}
.grandchild-item-2 {
grid-column: 2 / 3; /* Aligns with parent's 2nd column (200px) */
}
.grandchild-item-3 {
grid-column: 3 / 4; /* Aligns with parent's 3rd column */
}
ಇಲ್ಲಿ, `.child-subgrid` ಮೂರು ಆಂತರಿಕ ಅಂಕಣಗಳನ್ನು ಹೊಂದಿದ್ದು, ಅವುಗಳ ಗಾತ್ರಗಳು ಕ್ರಮವಾಗಿ `1fr`, `200px`, ಮತ್ತು `2fr` ಆಗಿರುತ್ತವೆ, ಪೋಷಕರೊಂದಿಗೆ ನಿಖರವಾಗಿ ಹೊಂದಾಣಿಕೆಯಾಗುತ್ತವೆ. ಅದರ ಮಕ್ಕಳು (`.grandchild-item-1`, ಇತ್ಯಾದಿ) ಈ ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ, ಇದು ಪೋಷಕರ ಟ್ರ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯಾಗುತ್ತದೆ.
ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಆನುವಂಶಿಕತೆಯನ್ನು ದೃಶ್ಯೀಕರಿಸುವುದು
ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ಅಗೋಚರ ರೇಖೆಗಳ ಸರಣಿಯಾಗಿ ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಘೋಷಿಸಿದಾಗ, ಅದು ಕೇವಲ ಹೊಸ ರೇಖೆಗಳನ್ನು ರಚಿಸುವುದಿಲ್ಲ; ಅದು ಪೋಷಕರ ರೇಖೆಗಳ ಒಂದು ಭಾಗವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮರುಬಳಕೆ ಮಾಡುತ್ತದೆ. ಪೋಷಕ ಗ್ರಿಡ್ ರೇಖೆಗಳ ನಡುವಿನ ಜಾಗವು ಸಬ್‌ಗ್ರಿಡ್‌ನ ಟ್ರ್ಯಾಕ್‌ಗಳಾಗಿ ಪರಿಣಮಿಸುತ್ತದೆ. ಈ ಮಾನಸಿಕ ಮಾದರಿ ಬಹಳ ಮುಖ್ಯ. ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂ ಸ್ವತಃ ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿ ಗ್ರಿಡ್ ಸೆಲ್ (ಅಥವಾ ಪ್ರದೇಶ) ವನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ, ತದನಂತರ ಆ ಸೆಲ್‌ನೊಳಗೆ, ಅದು ತನ್ನದೇ ಆದ ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಪೋಷಕರ ಆಂತರಿಕ ರೇಖೆಗಳನ್ನು ಬಳಸುತ್ತದೆ.
ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಕನ್ಸೋಲ್‌ಗಳು (ಉದಾಹರಣೆಗೆ, ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್, ಫೈರ್‌ಫಾಕ್ಸ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್) ಇದನ್ನು ದೃಶ್ಯೀಕರಿಸಲು ಅಮೂಲ್ಯವಾಗಿವೆ. ಅವು ಪೋಷಕ ಗ್ರಿಡ್ ಮತ್ತು ನಂತರ ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ, ಟ್ರ್ಯಾಕ್ ರೇಖೆಗಳು ಮತ್ತು ಗಾತ್ರಗಳನ್ನು ಹೇಗೆ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ತೋರಿಸುತ್ತವೆ. ಸಬ್‌ಗ್ರಿಡ್‌ನ ಆಂತರಿಕ ಟ್ರ್ಯಾಕ್‌ಗಳು ಪೋಷಕರ ಗ್ರಿಡ್ ರೇಖೆಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುವುದನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ.
"ಆಟೋ" ಕೀವರ್ಡ್‌ನ ಪಾತ್ರ
`auto` ಕೀವರ್ಡ್, ಸಾಮಾನ್ಯ CSS ಗ್ರಿಡ್‌ನಲ್ಲಿ ಈಗಾಗಲೇ ಬಹುಮುಖಿಯಾಗಿದ್ದು, ಸಬ್‌ಗ್ರಿಡ್‌ನಲ್ಲಿ ಇನ್ನಷ್ಟು ಮಹತ್ವವನ್ನು ಪಡೆಯುತ್ತದೆ. ಪೋಷಕ ಟ್ರ್ಯಾಕ್ ಅನ್ನು `auto` ಯೊಂದಿಗೆ ಗಾತ್ರಗೊಳಿಸಿದಾಗ, ಅದರ ಗಾತ್ರವು ಹೆಚ್ಚಾಗಿ ಅದರ ವಿಷಯದಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ `auto`-ಗಾತ್ರದ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದರೆ, ಆ ಸಬ್‌ಗ್ರಿಡ್‌ನ ಅನುಗುಣವಾದ ಆಂತರಿಕ ಟ್ರ್ಯಾಕ್ ಸಹ `auto` ಆಗಿ ವರ್ತಿಸುತ್ತದೆ, ತನ್ನದೇ ಆದ ಮಕ್ಕಳ ವಿಷಯವು ಅದರ ಗಾತ್ರದ ಮೇಲೆ ಪ್ರಭಾವ ಬೀರಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ, ಆದರೆ ಪೋಷಕರ ಒಟ್ಟಾರೆ `auto` ಲೆಕ್ಕಾಚಾರದ ನಿರ್ಬಂಧಗಳೊಳಗೆ ಇರುತ್ತದೆ.
ಈ ಡೈನಾಮಿಕ್ ವಿಷಯ-ಗಾತ್ರದ ಪ್ರಸರಣವು ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅತಿ ಹೆಚ್ಚು ಶಕ್ತಿಶಾಲಿಯಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಮುಖ್ಯ ಲೇಔಟ್‌ನಲ್ಲಿ `auto` ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ವಿಷಯ ಕಾಲಮ್ ಅನ್ನು ನೀವು ಹೊಂದಿದ್ದರೆ, ಮತ್ತು ಆ ಕಾಲಮ್‌ನಲ್ಲಿನ ಕಾರ್ಡ್ ಘಟಕವು ತನ್ನದೇ ಆದ ವಿಷಯಕ್ಕಾಗಿ `subgrid` ಅನ್ನು ಬಳಸಿದರೆ, ಕಾರ್ಡ್‌ನ ಅಗಲವು ತನ್ನ ವಿಷಯಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಮುಖ್ಯ ಕಾಲಮ್ ಕಾರ್ಡ್‌ನ ಅಗಲಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ, ಇದು ಒಂದು ದ್ರವ ಮತ್ತು ಸ್ಪಂದಿಸುವ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.
`minmax()` ಮತ್ತು `fit-content()` ಜೊತೆಗಿನ ಸಂವಹನ
`minmax()` ಮತ್ತು `fit-content()` ಕಾರ್ಯಗಳು ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ವಿಶೇಷವಾಗಿ ಪ್ರಬಲವಾಗಿವೆ. ಅವು ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಆದರೆ ನಿರ್ಬಂಧಿತ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ನೀಡುತ್ತವೆ. ಒಂದು ಸಬ್‌ಗ್ರಿಡ್‌ನಿಂದ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದಾಗ, ಈ ನಿರ್ಬಂಧಗಳು ಮುಂದಕ್ಕೆ ಸಾಗುತ್ತವೆ, ನೆಸ್ಟೆಡ್ ಅಂಶಗಳು ಉನ್ನತ ಮಟ್ಟದಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಅದೇ ಗಾತ್ರದ ನಿಯಮಗಳನ್ನು ಗೌರವಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
.parent-grid-with-constraints {
display: grid;
grid-template-columns: 1fr minmax(250px, 400px) 1fr;
}
.content-area {
display: grid;
grid-column: 2 / 3; /* Occupies the minmax column */
grid-template-columns: subgrid;
/* Its children will now respect minmax(250px, 400px) */
}
.content-area-child {
/* This child's width will be constrained by the parent's minmax(250px, 400px) */
}
ಇದರಿಂದ `content-area-child` ಎಂದಿಗೂ 250px ಗಿಂತ ಕಿರಿದಾಗಿರುವುದಿಲ್ಲ ಅಥವಾ 400px ಗಿಂತ ಅಗಲವಾಗಿರುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಅದರ ಸಬ್‌ಗ್ರಿಡ್ ಪೋಷಕ ಆ ನಿಖರವಾದ ನಿರ್ಬಂಧಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದಿದೆ. ನೆಸ್ಟೆಡ್ ಅಂಶಗಳ ಮೇಲೆ ಇಂತಹ ನಿಖರವಾದ ನಿಯಂತ್ರಣ, ಶೈಲಿಯನ್ನು ನಕಲು ಮಾಡದೆಯೇ ಅಥವಾ ಸಂಕೀರ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸದೆಯೇ, ದೊಡ್ಡ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಸ್ಕೇಲೆಬಿಲಿಟಿಗೆ ಆಟದ ನಿಯಮಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು: UI ವಿನ್ಯಾಸವನ್ನು ಪರಿವರ್ತಿಸುವುದು
ಸಬ್‌ಗ್ರಿಡ್ ಕೇವಲ ಸೈದ್ಧಾಂತಿಕ ಪರಿಕಲ್ಪನೆಯಲ್ಲ; ಇದು ಆಧುನಿಕ, ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಆಳವಾದ ಪ್ರಾಯೋಗಿಕ ಪರಿಣಾಮಗಳನ್ನು ಹೊಂದಿದೆ. ಸಬ್‌ಗ್ರಿಡ್ ನಿಜವಾಗಿಯೂ ಪ್ರಕಾಶಮಾನವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಕೆಲವು ಆಕರ್ಷಕ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.
ಸಂಕೀರ್ಣ ಪುಟದ ಲೇಔಟ್‌ಗಳು: ಜಾಗತಿಕ ರಚನೆಗಳನ್ನು ಸಮನ್ವಯಗೊಳಿಸುವುದು
ಮುಖ್ಯ ಹೆಡರ್, ನ್ಯಾವಿಗೇಷನ್, ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ, ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಯನ್ನು ಹೊಂದಿರುವ ವಿಶಿಷ್ಟ ವೆಬ್ ಪುಟದ ವಿನ್ಯಾಸವನ್ನು ಪರಿಗಣಿಸಿ. ಸಾಮಾನ್ಯವಾಗಿ, ಹೆಡರ್ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿಯ ವಿಷಯವು ಮುಖ್ಯ ವಿಷಯದ ಕಾಲಮ್ ರಚನೆಯೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಾಣಿಕೆಯಾಗಬೇಕು, ಅವುಗಳು ಪುಟದ ಪೂರ್ಣ ಅಗಲವನ್ನು ಆವರಿಸುವ ಪ್ರತ್ಯೇಕ ಗ್ರಿಡ್ ಐಟಂಗಳು ಆಗಿದ್ದರೂ ಸಹ.
.page-wrapper {
display: grid;
grid-template-columns: 1fr repeat(10, minmax(0, 80px)) 1fr; /* 10 content columns + 2 outer gutters */
grid-template-rows: auto 1fr auto;
}
.main-header {
display: grid;
grid-column: 1 / -1; /* Spans all parent columns */
grid-template-columns: subgrid;
}
.main-nav {
grid-column: 2 / 7; /* Aligns with parent's content columns */
}
.user-profile {
grid-column: 10 / 12; /* Aligns with parent's content columns */
}
.main-content-area {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
.article-content {
grid-column: 2 / 9;
}
.sidebar {
grid-column: 9 / 12;
}
.main-footer {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
}
.footer-nav {
grid-column: 2 / 5;
}
.copyright-info {
grid-column: 10 / 12;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `.main-header`, `.main-content-area`, ಮತ್ತು `.main-footer` ಎಲ್ಲವೂ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳಾಗಿ ಪರಿಣಮಿಸುತ್ತವೆ. ಇದು ಅವುಗಳ ಆಂತರಿಕ ಅಂಶಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, `.main-nav`, `.article-content`, `.footer-nav`) `.page-wrapper` ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಒಟ್ಟಾರೆ `10` ವಿಷಯದ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ನೇರವಾಗಿ ಜೋಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನೆಸ್ಟಿಂಗ್ ಆಳವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಕನಿಷ್ಠ ಕೋಡ್ ಮತ್ತು ಗರಿಷ್ಠ ನಮ್ಯತೆಯೊಂದಿಗೆ ಇಡೀ ಪುಟದಾದ್ಯಂತ ಸ್ಥಿರವಾದ ಸಮತಲ ಜೋಡಣೆಯನ್ನು ಸಾಧಿಸುತ್ತದೆ.
ಘಟಕ-ಆಧಾರಿತ ವಿನ್ಯಾಸ: ಕಾರ್ಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ಸಮನ್ವಯಗೊಳಿಸುವುದು
ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯು ಘಟಕ-ಆಧಾರಿತ ವಾಸ್ತುಶಿಲ್ಪಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿದೆ. ಸಬ್‌ಗ್ರಿಡ್ ಒಂದೇ ಘಟಕದ ನಿದರ್ಶನಗಳಾದ್ಯಂತ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸೂಕ್ತವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಅವು ದೊಡ್ಡ ಗ್ರಿಡ್ ಸಂದರ್ಭದೊಳಗೆ ಜೋಡಿಸಬೇಕಾದಾಗ.
ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ಗಳ ಸಂಗ್ರಹವನ್ನು ಪರಿಗಣಿಸಿ:
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.product-card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* The card itself spans 3 logical rows of its parent for layout purposes */
/* It doesn't use subgrid for columns here, but uses its own columns or just flows */
}
.product-card > .image {
grid-row: 1 / 2;
}
.product-card > .title {
grid-row: 2 / 3;
/* Could have its own internal grid for multi-line titles */
}
.product-card > .price {
grid-row: 3 / 4;
align-self: end;
}
ಈ ಉದಾಹರಣೆಯು `grid-template-rows: subgrid;` ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿದ್ದರೂ, ಈ ತತ್ವವು ಅಂಕಣಗಳಿಗೂ ಸಮಾನವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ. ಒಂದು ಸನ್ನಿವೇಶವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅಲ್ಲಿ `product-grid` ನಲ್ಲಿರುವ ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ಗಳು ತಮ್ಮ "ಕಾರ್ಯಕ್ಕೆ ಕರೆ" ಬಟನ್‌ಗಳನ್ನು ಎಲ್ಲಾ ಕಾರ್ಡ್‌ಗಳಾದ್ಯಂತ ಕೆಳಭಾಗದಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಜೋಡಿಸಬೇಕಾಗಿದೆ, ಕೆಲವು ವಿವರಣೆಗಳು ಉದ್ದವಾಗಿದ್ದರೂ ಸಹ. ಪ್ರತಿ `.product-card` ಅನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಆಗಿ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಅದರ ಆಂತರಿಕ ಸಾಲು ರಚನೆಯನ್ನು (ಉದಾಹರಣೆಗೆ, ಚಿತ್ರ, ಶೀರ್ಷಿಕೆ, ವಿವರಣೆ, ಬಟನ್‌ಗಾಗಿ) ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ಈ ಅಂಶಗಳನ್ನು ಆನುವಂಶಿಕ ಸಾಲುಗಳಲ್ಲಿ ನಿಖರವಾಗಿ ಇರಿಸಬಹುದು, ಲಂಬ ಜೋಡಣೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಪೋಷಕ `product-grid` ಸ್ಪಷ್ಟ ಸಾಲುಗಳನ್ನು ಹೊಂದಿದ್ದರೆ, ಸಬ್‌ಗ್ರಿಡ್ ಅವುಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ, ಬಟನ್‌ಗಳು ಯಾವಾಗಲೂ ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಜೋಡಿಸಿದ ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಡೇಟಾ ಕೋಷ್ಟಕಗಳು: ಮಾಹಿತಿ ಪ್ರದರ್ಶನಕ್ಕೆ ನಿಖರತೆ
ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸ್ವಚ್ಛ ಡೇಟಾ ಕೋಷ್ಟಕಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಆಶ್ಚರ್ಯಕರವಾಗಿ ಸಂಕೀರ್ಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಡೈನಾಮಿಕ್ ವಿಷಯದೊಂದಿಗೆ. ಸಬ್‌ಗ್ರಿಡ್ ಟೇಬಲ್ ಸಾಲುಗಳಿಗೆ ಕಾಲಮ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಲು ಅವಕಾಶ ನೀಡುವ ಮೂಲಕ ಇದನ್ನು ಸರಳೀಕರಿಸುತ್ತದೆ.
.data-table {
display: grid;
grid-template-columns: 50px 2fr 1fr 150px;
/* Define columns for ID, Name, Status, Actions */
}
.table-header {
display: contents; /* Makes children participate directly in parent grid */
}
.table-row {
display: grid;
grid-column: 1 / -1; /* Row spans all parent columns */
grid-template-columns: subgrid;
}
.table-cell-id {
grid-column: 1 / 2;
}
.table-cell-name {
grid-column: 2 / 3;
}
.table-cell-status {
grid-column: 3 / 4;
}
.table-cell-actions {
grid-column: 4 / 5;
}
ಇಲ್ಲಿ, ಪ್ರತಿ `.table-row` ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಆಗಿ ಪರಿಣಮಿಸುತ್ತದೆ. ಅದರ ಆಂತರಿಕ ಸೆಲ್‌ಗಳು (`.table-cell-id`, ಇತ್ಯಾದಿ) ಮುಖ್ಯ `.data-table` ನ ಕಾಲಮ್ ವ್ಯಾಖ್ಯಾನಗಳೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ. ಇದು ಎಲ್ಲಾ ಸಾಲುಗಳಾದ್ಯಂತ ಎಲ್ಲಾ ಕಾಲಮ್‌ಗಳು ಸ್ಥಿರ ಅಗಲಗಳು ಮತ್ತು ಜೋಡಣೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಸೆಲ್‌ಗಳು ವಿಭಿನ್ನ ಪ್ರಮಾಣದ ವಿಷಯವನ್ನು ಹೊಂದಿದ್ದರೂ ಸಹ. ಈ ಮಾದರಿಯು `display: table` ಅಥವಾ ಕಾಲಮ್ ಜೋಡಣೆಗಾಗಿ ಸಂಕೀರ್ಣ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಹ್ಯಾಕ್‌ಗಳ ಅಗತ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ, ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಸ್ಥಳೀಯ ಗ್ರಿಡ್ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ.
ಡೈನಾಮಿಕ್ ವಿಷಯದ ಗ್ರಿಡ್‌ಗಳು: ವಿಷಯದ ಏರಿಳಿತಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದು
ಬಳಕೆದಾರ-ರಚಿತ ವಿಷಯ ಅಥವಾ ಆಗಾಗ್ಗೆ ಬದಲಾಗುವ ಡೇಟಾವನ್ನು ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ, ಲೇಔಟ್‌ಗಳು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವಂತಿರಬೇಕು. ಸಬ್‌ಗ್ರಿಡ್, ವಿಶೇಷವಾಗಿ `auto`, `minmax()`, ಮತ್ತು `fr` ಘಟಕಗಳೊಂದಿಗೆ, ಈ ಹೊಂದಾಣಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ಪ್ರತಿ ಐಟಂ ಒಂದು ಗ್ರಿಡ್ ಆಗಿರುವ ವಿಷಯದ ಫೀಡ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಆದರೆ ಎಲ್ಲಾ ಐಟಂಗಳು ತಮ್ಮ ಆಂತರಿಕ ಅಂಶಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, ಟೈಮ್‌ಸ್ಟ್ಯಾಂಪ್, ಲೇಖಕ, ವಿಷಯದ ತುಣುಕುಗಳು) ಮುಖ್ಯ ಫೀಡ್ ಗ್ರಿಡ್‌ನಾದ್ಯಂತ ಜೋಡಿಸಬೇಕಾಗಿದೆ. ಪೋಷಕ ಗ್ರಿಡ್ ಹೊಂದಿಕೊಳ್ಳುವ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ, ಮತ್ತು ವಿಷಯದ ಐಟಂಗಳು `subgrid` ಅನ್ನು ಬಳಸಿದರೆ, ಯಾವುದೇ ವಿಷಯದ ಹೊಂದಾಣಿಕೆಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹರಡುತ್ತವೆ, ಸಾಮರಸ್ಯದ ಲೇಔಟ್ ಅನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುತ್ತವೆ.
ಈ ಉದಾಹರಣೆಗಳು ಸಬ್‌ಗ್ರಿಡ್ ಹೇಗೆ ಸವಾಲಿನ ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳನ್ನು ಸೊಗಸಾದ CSS ಪರಿಹಾರಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತವೆ. ಆಳವಾದ, ಆನುವಂಶಿಕ ಜೋಡಣೆಗಾಗಿ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಇದು "ಮ್ಯಾಜಿಕ್ ಸಂಖ್ಯೆಗಳು," ಸಂಕೀರ್ಣ ಲೆಕ್ಕಾಚಾರಗಳು ಮತ್ತು ದುರ್ಬಲ ಕೆಲಸದ ವಿಧಾನಗಳ ಅಗತ್ಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದು ಹೆಚ್ಚು ದೃಢವಾದ, ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಸುಧಾರಿತ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು: ಸಬ್‌ಗ್ರಿಡ್‌ನ ಸಾಮರ್ಥ್ಯವನ್ನು ಗರಿಷ್ಠಗೊಳಿಸುವುದು
ಸಬ್‌ಗ್ರಿಡ್‌ನ ಮುಖ್ಯ ಪರಿಕಲ್ಪನೆಯು ನೇರವಾಗಿದ್ದರೂ, ಅದರ ಸೂಕ್ಷ್ಮತೆಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಅದನ್ನು ದೊಡ್ಡ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಲ್ಲಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಂಯೋಜಿಸುವುದು ಸುಧಾರಿತ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗೆ ಗಮನ ನೀಡುವ ಅಗತ್ಯವಿದೆ.
ನೆಸ್ಟಿಂಗ್ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳು: ಬಹು-ಹಂತದ ಜೋಡಣೆ
ಹೌದು, ನೀವು ಸಬ್‌ಗ್ರಿಡ್‌ಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡಬಹುದು! ಒಂದು ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂ ಇನ್ನೊಂದು ಸಬ್‌ಗ್ರಿಡ್‌ಗೆ ಪೋಷಕವಾಗಿರಬಹುದು. ಇದು ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳ ಬಹು-ಹಂತದ ಆನುವಂಶಿಕತೆಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ, ಇದು ಸಂಕೀರ್ಣ UI ಗಳ ಮೇಲೆ ನಂಬಲಾಗದಷ್ಟು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.
.grandparent-grid {
display: grid;
grid-template-columns: 100px 1fr 1fr 100px;
}
.parent-subgrid {
display: grid;
grid-column: 2 / 4; /* Spans 2nd and 3rd grandparent columns */
grid-template-columns: subgrid;
/* This parent-subgrid now has two columns, inheriting the 1fr 1fr */
/* Let's define rows for its children */
grid-template-rows: auto 1fr;
}
.child-subgrid {
display: grid;
grid-column: 1 / 3; /* Spans both columns of its parent-subgrid */
grid-row: 2 / 3;
grid-template-columns: subgrid; /* Inherits the 1fr 1fr from parent-subgrid, which inherited from grandparent */
}
ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, `.child-subgrid` ತನ್ನ ತಕ್ಷಣದ ಪೋಷಕ, `.parent-subgrid` ನಿಂದ `1fr 1fr` ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ, ಇದು ತನ್ನದೇ ಆದ `.grandparent-grid` ನಿಂದ ಆ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದಿರುತ್ತದೆ. ಇದು ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಜೋಡಣೆ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಬಹು ಹಂತಗಳಲ್ಲಿನ ಅಂಶಗಳು ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡಬೇಕಾದ ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದೆ.
ಸಬ್‌ಗ್ರಿಡ್ ಮತ್ತು ಜೋಡಣೆ ಗುಣಲಕ್ಷಣಗಳು
ಸಬ್‌ಗ್ರಿಡ್ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಎಲ್ಲಾ CSS ಗ್ರಿಡ್ ಜೋಡಣೆ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ತಡೆರಹಿತವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. `align-items`, `justify-items`, `place-items`, `align-content`, `justify-content`, `place-content` ನಂತಹ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ಗೆ ಅನ್ವಯಿಸಬಹುದು, ಅದರ ನೇರ ಮಕ್ಕಳನ್ನು ಅದರ ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್‌ಗಳಲ್ಲಿ ಜೋಡಿಸಲು, ಅವು ಸಾಮಾನ್ಯ ಗ್ರಿಡ್‌ನಲ್ಲಿರುವಂತೆಯೇ.
ಇದಲ್ಲದೆ, `align-self` ಮತ್ತು `justify-self` ಅನ್ನು ವೈಯಕ್ತಿಕ ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು, ಅವುಗಳ ಆಯಾ ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ಸೆಲ್‌ಗಳಲ್ಲಿ ಅವುಗಳ ನಿಯೋಜನೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು. ಇದರರ್ಥ ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯುವಾಗ ಐಟಂ ಜೋಡಣೆಯ ಮೇಲೆ ನೀವು ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತೀರಿ.
ಸಂಕೀರ್ಣ ಗ್ರಿಡ್‌ಗಳೊಂದಿಗೆ ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು
ಸಬ್‌ಗ್ರಿಡ್ ಶಕ್ತಿಶಾಲಿ ದೃಶ್ಯ ಲೇಔಟ್ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ, CSS ದೃಶ್ಯ ಪ್ರಸ್ತುತಿಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ, ಮೂಲ ಕ್ರಮ ಅಥವಾ ಶಬ್ದಾರ್ಥದ ಅರ್ಥವನ್ನಲ್ಲ. ಸಂಕೀರ್ಣ ಗ್ರಿಡ್‌ಗಳಿಗಾಗಿ, ವಿಶೇಷವಾಗಿ ವಿಷಯವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರುಕ್ರಮಗೊಳಿಸುವಂತಹವುಗಳಿಗೆ, ತಾರ್ಕಿಕ ಓದುವ ಕ್ರಮ ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಹರಿವು ಅರ್ಥಗರ್ಭಿತ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದಂತೆ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಯಾವಾಗಲೂ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.
`display: contents` ಗುಣಲಕ್ಷಣವು ಕೆಲವೊಮ್ಮೆ ಸಬ್‌ಗ್ರಿಡ್‌ಗೆ ಪರ್ಯಾಯ ಅಥವಾ ಪೂರಕವಾಗಿರಬಹುದು. `display: contents` ಒಂದು ಬಾಕ್ಸ್ ಮತ್ತು ಅದರ ಮಕ್ಕಳನ್ನು ನೇರವಾಗಿ ಪೋಷಕರ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಸಂದರ್ಭದಲ್ಲಿ ಭಾಗವಹಿಸುವಂತೆ ಮಾಡಿದರೆ (ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಾಕ್ಸ್ ಅನ್ನು ಬಾಕ್ಸ್ ಟ್ರೀಯಿಂದ ತೆಗೆದುಹಾಕುತ್ತದೆ), ಸಬ್‌ಗ್ರಿಡ್ ಬಾಕ್ಸ್‌ನ ಒಳಗೆ ಹೊಸ ಗ್ರಿಡ್ ಸಂದರ್ಭವನ್ನು ರಚಿಸುತ್ತದೆ, ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುವಾಗ. ಲೇಔಟ್‌ನಲ್ಲಿ ಮಧ್ಯಂತರ ಬಾಕ್ಸ್ ಭೌತಿಕ ಬಾಕ್ಸ್ ಆಗಿ ಉಳಿಯಬೇಕೇ ಅಥವಾ ಕಣ್ಮರೆಯಾಗಬೇಕೇ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಆಯ್ಕೆಮಾಡಿ.
ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮಗಳು
ಸಾಮಾನ್ಯವಾಗಿ, ಸಬ್‌ಗ್ರಿಡ್ ಬಳಸುವುದರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮಗಳು ಕಡಿಮೆ ಮತ್ತು ಬ್ರೌಸರ್ ಎಂಜಿನ್‌ಗಳಿಂದ ಹೆಚ್ಚು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲ್ಪಟ್ಟಿವೆ. ಸಬ್‌ಗ್ರಿಡ್ ಸೇರಿದಂತೆ CSS ಗ್ರಿಡ್, ಪರಿಣಾಮಕಾರಿ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಕ್ಕಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಸರಳ, ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ CSS ಮತ್ತು ಕಡಿಮೆ DOM ಕುಶಲತೆಯ ಪ್ರಯೋಜನಗಳು (JS-ಆಧಾರಿತ ಲೇಔಟ್ ಪರಿಹಾರಗಳಿಗೆ ಹೋಲಿಸಿದರೆ) ಯಾವುದೇ ಸೈದ್ಧಾಂತಿಕ ಕಾರ್ಯಕ್ಷಮತೆಯ ಕಾಳಜಿಗಳನ್ನು ಮೀರಿಸುತ್ತದೆ.
ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು
2023 ರ ಕೊನೆಯಲ್ಲಿ / 2024 ರ ಆರಂಭದ ವೇಳೆಗೆ, ಸಬ್‌ಗ್ರಿಡ್ ಎಲ್ಲಾ ಪ್ರಮುಖ ಎವರ್‌ಗ್ರೀನ್ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ (ಕ್ರೋಮ್, ಎಡ್ಜ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ) ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಅಥವಾ ಗೂಡು ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಬೆಂಬಲದ ಅಗತ್ಯವಿರುವ ಯೋಜನೆಗಳಿಗೆ, ನೀವು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು ಅಥವಾ ಪ್ರಗತಿಪರ ವರ್ಧನೆಯ ತಂತ್ರಗಳನ್ನು ಪರಿಗಣಿಸಬೇಕಾಗಬಹುದು.
- ಪ್ರಗತಿಪರ ವರ್ಧನೆ: ನಿಮ್ಮ ಮುಖ್ಯ ಲೇಔಟ್ ಅನ್ನು ಸಬ್‌ಗ್ರಿಡ್‌ನೊಂದಿಗೆ ವಿನ್ಯಾಸಗೊಳಿಸಿ, ಮತ್ತು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ, ವಿಷಯವು ಸ್ವಾಭಾವಿಕವಾಗಿ ಹರಿಯಲು ಅವಕಾಶ ನೀಡಿ ಅಥವಾ ಸರಳ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್-ಆಧಾರಿತ ಜೋಡಣೆಯನ್ನು ಬಳಸಿ. `@supports` ನಂತಹ ಆಧುನಿಕ CSS ವೈಶಿಷ್ಟ್ಯಗಳು ಇಲ್ಲಿ ಅಮೂಲ್ಯವಾಗಿರಬಹುದು:
- ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆ: ಸಬ್‌ಗ್ರಿಡ್ ಲಭ್ಯತೆಯ ಆಧಾರದ ಮೇಲೆ ನಿರ್ದಿಷ್ಟ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು Modernizr ನಂತಹ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಆಧಾರಿತ ವೈಶಿಷ್ಟ್ಯ ಪತ್ತೆ ಲೈಬ್ರರಿಗಳನ್ನು (ಈಗ ಕಡಿಮೆ ಸಾಮಾನ್ಯವಾಗಿದ್ದರೂ) ಅಥವಾ ಸರಳ `@supports` ಪ್ರಶ್ನೆಗಳನ್ನು ಬಳಸಿ.
.some-grid-item {
/* Fallback for browsers without subgrid */
display: flex;
gap: 10px;
}
@supports (grid-template-columns: subgrid) {
.some-grid-item {
display: grid;
grid-template-columns: subgrid;
/* Reset fallback properties */
gap: initial;
}
}
ನಿಮ್ಮ ಯೋಜನೆಯ ಗುರಿ ಪ್ರೇಕ್ಷಕರಿಗೆ ತಿಳುವಳಿಕೆಯುಳ್ಳ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಅತ್ಯಂತ ನವೀಕರಿಸಿದ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮಾಹಿತಿಗಾಗಿ Can I use... ನಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಯಾವಾಗಲೂ ಸಂಪರ್ಕಿಸಿ.
ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ದೋಷನಿವಾರಣೆ: ಸಬ್‌ಗ್ರಿಡ್ ಸವಾಲುಗಳನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು
ಸಬ್‌ಗ್ರಿಡ್ ಅನೇಕ ಸಂಕೀರ್ಣ ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆಯಾದರೂ, ಯಾವುದೇ ಪ್ರಬಲ CSS ವೈಶಿಷ್ಟ್ಯದಂತೆ, ಇದು ತನ್ನದೇ ಆದ ಸೂಕ್ಷ್ಮತೆಗಳು ಮತ್ತು ತಪ್ಪು ತಿಳುವಳಿಕೆಗಳ ಸಂಭಾವ್ಯ ಪ್ರದೇಶಗಳನ್ನು ಹೊಂದಿದೆ. ಇವುಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಗಮನಾರ್ಹ ಡೀಬಗ್ ಮಾಡುವ ಸಮಯವನ್ನು ಉಳಿಸಬಹುದು.
ಸಬ್‌ಗ್ರಿಡ್‌ನಲ್ಲಿ `auto` ಬಗ್ಗೆ ತಪ್ಪು ತಿಳುವಳಿಕೆ
`auto` ಕೀವರ್ಡ್ ಹೆಚ್ಚು ಸಂದರ್ಭ-ಅವಲಂಬಿತವಾಗಿದೆ. ಒಂದು ಸಬ್‌ಗ್ರಿಡ್‌ನಲ್ಲಿ, `auto` ಟ್ರ್ಯಾಕ್ ತನ್ನ ಪೋಷಕರ ಒಟ್ಟಾರೆ ಲಭ್ಯವಿರುವ ಜಾಗದ ನಿರ್ಬಂಧಗಳೊಳಗೆ ತನ್ನ ಪೋಷಕರ `auto` ವರ್ತನೆಯನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ. ಪೋಷಕ ಟ್ರ್ಯಾಕ್ ಸ್ವತಃ `auto` ಆಗಿದ್ದರೆ, ಸಬ್‌ಗ್ರಿಡ್‌ನ `auto` ಟ್ರ್ಯಾಕ್ ತನ್ನ ವಿಷಯಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ, ಇದು ಪೋಷಕರ `auto` ಗಾತ್ರದ ಮೇಲೆ ಪ್ರಭಾವ ಬೀರಬಹುದು. ಪೋಷಕ ಟ್ರ್ಯಾಕ್ ಸ್ಥಿರ ಗಾತ್ರ ಅಥವಾ `fr` ಆಗಿದ್ದರೆ, ಸಬ್‌ಗ್ರಿಡ್‌ನ `auto` ಟ್ರ್ಯಾಕ್ ಆ ಆನುವಂಶಿಕ ಗಾತ್ರದವರೆಗೆ `max-content` ನಂತೆ ವರ್ತಿಸುತ್ತದೆ, ನಂತರ ಜಾಗವು ಸೀಮಿತವಾಗಿದ್ದರೆ ಕುಗ್ಗುತ್ತದೆ.
ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ, ಸಬ್‌ಗ್ರಿಡ್‌ನ ಲೆಕ್ಕಾಚಾರವು ಯಾವಾಗಲೂ ಅದರ ಆನುವಂಶಿಕ ಪೋಷಕ ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನ ಮತ್ತು ಆ ಟ್ರ್ಯಾಕ್‌ಗೆ ಹಂಚಿಕೆ ಮಾಡಲಾದ ಜಾಗಕ್ಕೆ ಸಂಬಂಧಿಸಿದೆ ಎಂಬುದನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಬೇಕು. ಇದು ಮಾಂತ್ರಿಕವಾಗಿ ಪೋಷಕರ ಗಡಿಗಳಿಂದ ಹೊರಬರುವುದಿಲ್ಲ ಅಥವಾ ಪೋಷಕರ ಗಾತ್ರದ ತರ್ಕವನ್ನು ಮರು ವ್ಯಾಖ್ಯಾನಿಸುವುದಿಲ್ಲ.
ಅತಿಕ್ರಮಿಸುವ ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳು
ಸಾಮಾನ್ಯ CSS ಗ್ರಿಡ್‌ನಂತೆಯೇ, ಸಬ್‌ಗ್ರಿಡ್‌ಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸದಿದ್ದರೆ ಅತಿಕ್ರಮಿಸುವ ಗ್ರಿಡ್ ಐಟಂಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಸಬ್‌ಗ್ರಿಡ್‌ನ ಮಕ್ಕಳು ಸ್ಪಷ್ಟವಾಗಿ ಅತಿಕ್ರಮಿಸುವಂತೆ ಇರಿಸಲ್ಪಟ್ಟರೆ, ಅಥವಾ ಅವುಗಳ ವಿಷಯವು ಓವರ್‌ಫ್ಲೋ ಆದರೆ, ಅದು ದೃಶ್ಯ ಗೊಂದಲವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು.
ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂಗಳನ್ನು ಚೆನ್ನಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪ್ರದೇಶಗಳಲ್ಲಿ ಇರಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. `grid-area`, `grid-column`, ಮತ್ತು `grid-row` ಗುಣಲಕ್ಷಣಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಿ. ಡೈನಾಮಿಕ್ ಆಗಿ ಗಾತ್ರದ ವಿಷಯದೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, `minmax()` ಮತ್ತು `auto` ಓವರ್‌ಫ್ಲೋ ತಡೆಯುವಲ್ಲಿ ನಿಮ್ಮ ಮಿತ್ರರು, ಟ್ರ್ಯಾಕ್‌ಗಳು ಜವಾಬ್ದಾರಿಯುತವಾಗಿ ಬೆಳೆಯಲು ಅಥವಾ ಕುಗ್ಗಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ.
ಸಬ್‌ಗ್ರಿಡ್‌ಗಾಗಿ ದೋಷನಿವಾರಣೆ ಉಪಕರಣಗಳು
ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು ಸಬ್‌ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಅನಿವಾರ್ಯವಾಗಿವೆ. ಆಧುನಿಕ ಬ್ರೌಸರ್ ಪರಿಕರಗಳು (ಫೈರ್‌ಫಾಕ್ಸ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಮತ್ತು ಕ್ರೋಮ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರಮುಖ ಉದಾಹರಣೆಗಳು) ಅತ್ಯುತ್ತಮ CSS ಗ್ರಿಡ್ ತಪಾಸಣೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ. ನೀವು ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ:
- ನೀವು ಗ್ರಿಡ್ ಲೈನ್‌ಗಳು, ಟ್ರ್ಯಾಕ್ ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳ ದೃಶ್ಯ ಓವರ್‌ಲೇ ಅನ್ನು ಟಾಗಲ್ ಮಾಡಬಹುದು.
- ನಿರ್ಣಾಯಕವಾಗಿ, ಸಬ್‌ಗ್ರಿಡ್‌ಗಾಗಿ, ಅದರ ಆಂತರಿಕ ರೇಖೆಗಳು ಪೋಷಕರ ರೇಖೆಗಳಿಗೆ ಹೇಗೆ ನೇರವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ನೀವು ಹೆಚ್ಚಾಗಿ ನೋಡಬಹುದು. ಓವರ್‌ಲೇ ಸಾಮಾನ್ಯವಾಗಿ ಸಬ್‌ಗ್ರಿಡ್ ಐಟಂನ ಗಡಿಯೊಳಗೆ ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ, ಆನುವಂಶಿಕತೆಯನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ.
- ಲೆಕ್ಕಾಚಾರ ಮಾಡಿದ ಶೈಲಿಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದು ಪರಿಹರಿಸಿದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ತೋರಿಸುತ್ತದೆ, ಪೋಷಕ ಮತ್ತು ಸಬ್‌ಗ್ರಿಡ್ ಎರಡೂ ಹಂತಗಳಲ್ಲಿ `fr`, `auto`, `minmax()`, ಇತ್ಯಾದಿಗಳನ್ನು ಹೇಗೆ ಲೆಕ್ಕಹಾಕಲಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಈ ಪರಿಕರಗಳನ್ನು ನಿಯಮಿತವಾಗಿ ಬಳಸುವುದರಿಂದ ಸಬ್‌ಗ್ರಿಡ್ ನಿಮ್ಮ CSS ಅನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿದೆ ಮತ್ತು ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ಹೇಗೆ ಅನ್ವಯಿಸುತ್ತಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
ಶಬ್ದಾರ್ಥದ ಮಾರ್ಕಪ್ ಮತ್ತು ಸಬ್‌ಗ್ರಿಡ್
ಯಾವಾಗಲೂ ಶಬ್ದಾರ್ಥದ HTML ಗೆ ಆದ್ಯತೆ ನೀಡಿ. ಸಬ್‌ಗ್ರಿಡ್ ನಿಮ್ಮ ವಿಷಯದ ಅರ್ಥ ಮತ್ತು ರಚನೆಗೆ ಧಕ್ಕೆಯಾಗದಂತೆ ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಹೆಚ್ಚಿಸಬೇಕು. ಉದಾಹರಣೆಗೆ, `div` ಅನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಆಗಿ ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ, ಆದರೆ ಒಂದು ಸ್ಥಳೀಯ `<table>` ಅಂಶವು ಕೋಷ್ಟಕ ಡೇಟಾಗೆ ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿದ್ದರೆ ಅದನ್ನು ಕೋಷ್ಟಕ ರಚನೆಗಳನ್ನು ಅನುಕರಿಸಲು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ (ಸಬ್‌ಗ್ರಿಡ್ ಕೋಷ್ಟಕ ಶೈಲಿಯನ್ನು ಹೆಚ್ಚು ಸುಧಾರಿಸಬಹುದಾದರೂ). ಮೊದಲು ತಾರ್ಕಿಕ ರಚನೆಯ ಬಗ್ಗೆ ಯೋಚಿಸಿ, ನಂತರ ಪ್ರಸ್ತುತಿಗಾಗಿ CSS ಗ್ರಿಡ್ ಮತ್ತು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಅನ್ವಯಿಸಿ.
ಈ ಸಂಭಾವ್ಯ ತಪ್ಪುಗಳನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಂಡು ಮತ್ತು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳ ದೃಢವಾದ ಡೀಬಗ್ ಮಾಡುವ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಿಮ್ಮ ಸಬ್‌ಗ್ರಿಡ್ ಅನುಷ್ಠಾನಗಳನ್ನು ನೀವು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ದೋಷನಿವಾರಣೆ ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಬಹುದು, ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಸ್ಥಿರವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.
CSS ಗ್ರಿಡ್ ಮತ್ತು ಸಬ್‌ಗ್ರಿಡ್‌ನ ಭವಿಷ್ಯ: ವಿಕಸಿಸುತ್ತಿರುವ ಪರಿಸರ ವ್ಯವಸ್ಥೆ
ಸಬ್‌ಗ್ರಿಡ್ ಸೇರಿದಂತೆ CSS ಗ್ರಿಡ್, ಸ್ಥಿರ ವಿವರಣೆಯಲ್ಲ; ಇದು CSS ನ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಮಾಡ್ಯೂಲ್ ಆಗಿದೆ. ವೆಬ್‌ನಲ್ಲಿ ಲೇಔಟ್ ಸಾಧ್ಯತೆಗಳನ್ನು ಮತ್ತಷ್ಟು ಹೆಚ್ಚಿಸಲು CSS ವರ್ಕಿಂಗ್ ಗ್ರೂಪ್ ಯಾವಾಗಲೂ ಹೊಸ ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ಪರಿಷ್ಕರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತಿದೆ.
ಬ್ರೌಸರ್ ಎಂಜಿನ್ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳಲ್ಲಿ ನಿರಂತರ ಸುಧಾರಣೆಗಳನ್ನು ನಿರೀಕ್ಷಿಸಿ, ಇದು ಸಂಕೀರ್ಣ ಗ್ರಿಡ್ ಲೇಔಟ್‌ಗಳ ವೇಗವಾದ ರೆಂಡರಿಂಗ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು. ಜಾಗತಿಕವಾಗಿ ಡೆವಲಪರ್‌ಗಳು ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಂಡಂತೆ, ಹೆಚ್ಚು ಮಾದರಿಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಹೊರಹೊಮ್ಮುತ್ತವೆ, ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸದಲ್ಲಿ ಅದರ ಪಾತ್ರವನ್ನು ಮತ್ತಷ್ಟು ಗಟ್ಟಿಗೊಳಿಸುತ್ತವೆ.
ಸಬ್‌ಗ್ರಿಡ್‌ಗಿಂತ ಆಚೆ, ಕಂಟೇನರ್ ಪ್ರಶ್ನೆಗಳು, ಕ್ಯಾಸ್ಕೇಡ್ ಲೇಯರ್‌ಗಳು ಮತ್ತು ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿನ ಮತ್ತಷ್ಟು ಪ್ರಗತಿಗಳು ನಂಬಲಾಗದಷ್ಟು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಟೈಲಿಂಗ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಲು ಒಟ್ಟಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ. ಸಬ್‌ಗ್ರಿಡ್ ಈ ದೊಡ್ಡ ಚಿತ್ರಕ್ಕೆ ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಭವಿಷ್ಯದ-ನಿರೋಧಕ ಮತ್ತು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರವೃತ್ತಿ ಸ್ಪಷ್ಟವಾಗಿದೆ: CSS ಹೆಚ್ಚು ಶಕ್ತಿಶಾಲಿಯಾಗುತ್ತಿದೆ, ಸ್ಥಳೀಯ, ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ಘೋಷಣಾತ್ಮಕ ಕೋಡ್‌ನೊಂದಿಗೆ ಸಂಕೀರ್ಣ ವಿನ್ಯಾಸಗಳನ್ನು ವ್ಯಕ್ತಪಡಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.
ತೀರ್ಮಾನ: ಆನುವಂಶಿಕ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದೊಂದಿಗೆ ಸ್ಪಂದಿಸುವ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಲೇಔಟ್‌ಗಳಿಗೆ ಅಧಿಕಾರ ನೀಡುವುದು
CSS ಸಬ್‌ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ, ಅದರ ಆನುವಂಶಿಕ ಗ್ರಿಡ್ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರದಿಂದ ನಡೆಸಲ್ಪಡುತ್ತದೆ, ಇದು CSS ಲೇಔಟ್ ಸಾಮರ್ಥ್ಯಗಳಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಮೈಲಿಗಲ್ಲನ್ನು ಗುರುತಿಸುತ್ತದೆ. ಇದು ನೆಸ್ಟೆಡ್ ಗ್ರಿಡ್ ಘಟಕಗಳನ್ನು ಅವುಗಳ ಪೋಷಕರ ರಚನೆಯೊಂದಿಗೆ ಜೋಡಿಸುವ ದೀರ್ಘಕಾಲದ ಸವಾಲನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ಇದು ಸ್ವಚ್ಛ, ಶಬ್ದಾರ್ಥದ ಮತ್ತು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ.
ಸಬ್‌ಗ್ರಿಡ್ ಒಂದು ಗ್ರಿಡ್ ಐಟಂ ತನ್ನ ಪೋಷಕರ ಟ್ರ್ಯಾಕ್ ವ್ಯಾಖ್ಯಾನಗಳು ಮತ್ತು ಗಾತ್ರದ ಅಲ್ಗಾರಿದಮ್‌ಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ಹೇಗೆ ಅನುಮತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಸುಲಭವಾಗಿ ಒಡೆಯುವ, ಪಿಕ್ಸೆಲ್-ಆಧಾರಿತ ಜೋಡಣೆಗಳನ್ನು ಮೀರಿ ನಿಜವಾಗಿಯೂ ಸ್ಪಂದಿಸುವ, ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಬಹುದು. `fr`, `minmax()`, `auto`, ಮತ್ತು ಸ್ಥಿರ ಘಟಕ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಘಟಕದ ಮರದ ಕೆಳಗೆ ಪ್ರಸಾರ ಮಾಡುವ ಸಾಮರ್ಥ್ಯವು ದೃಶ್ಯ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ ಮತ್ತು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಅರಿವಿನ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
ಪ್ರಮುಖ ಅಂಶಗಳು:
- ತಡೆರಹಿತ ಜೋಡಣೆ: ಸಬ್‌ಗ್ರಿಡ್ ಪೋಷಕ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ ನೆಸ್ಟೆಡ್ ಅಂಶಗಳ ಪರಿಪೂರ್ಣ ಜೋಡಣೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಊಹೆ ಮತ್ತು ಮ್ಯಾಜಿಕ್ ಸಂಖ್ಯೆಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ.
- ಆನುವಂಶಿಕ ಗಾತ್ರ: ಇದು ಪೋಷಕರಿಂದ ನಿಖರವಾದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ವ್ಯಾಖ್ಯಾನಗಳನ್ನು (
fr,px,minmax(),auto) ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ, ಲೇಔಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸ್ಥಿರ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ. - ಸರಳೀಕೃತ ಕೋಡ್: ಲೇಔಟ್ ಸಿಂಕ್ರೊನೈಸೇಶನ್‌ಗಾಗಿ ಪುನರಾವರ್ತಿತ CSS ಅಥವಾ ಸಂಕೀರ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಅಗತ್ಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
- ಸುಧಾರಿತ ನಿರ್ವಹಣೆ: ಪೋಷಕ ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸಬ್‌ಗ್ರಿಡ್‌ಗಳಿಗೆ ಪ್ರಸಾರವಾಗುತ್ತವೆ, ನವೀಕರಣಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಲೇಔಟ್ ಭಂಗದ ಸಂಭಾವ್ಯತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
- ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ಶಕ್ತಿಶಾಲಿ: ಎಲ್ಲಾ ಅಂಶಗಳಾದ್ಯಂತ ಸ್ಥಿರ ದೃಶ್ಯ ಭಾಷೆಯೊಂದಿಗೆ ದೃಢವಾದ, ಘಟಕ-ಆಧಾರಿತ UI ಗಳನ್ನು ರಚಿಸಲು ಸೂಕ್ತವಾಗಿದೆ.
- ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲ: ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದೆ, ಇದು ಹೆಚ್ಚಿನ ಜಾಗತಿಕ ಯೋಜನೆಗಳಿಗೆ ಉತ್ಪಾದನೆ-ಸಿದ್ಧವಾಗಿದೆ.
CSS ಸಬ್‌ಗ್ರಿಡ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ. ಅದನ್ನು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ವರ್ಕ್‌ಫ್ಲೋಗೆ ಸಂಯೋಜಿಸಿ. ಇದು ನಿಸ್ಸಂದೇಹವಾಗಿ ನಿಮ್ಮ ಲೇಔಟ್ ಪ್ರಕ್ರಿಯೆಗಳನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ, ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಲ್ಲಿ ಹೆಚ್ಚಿನ ಸ್ಥಿರತೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ ವಿಶ್ವಾದ್ಯಂತ ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಆನಂದಿಸಬಹುದಾದ ಬಳಕೆದಾರ ಅನುಭವಗಳಿಗೆ ಕಾರಣವಾಗುವ ಒಂದು ಪ್ರಬಲ ಸಾಧನವಾಗಿದೆ. ವೆಬ್ ಲೇಔಟ್‌ನ ಭವಿಷ್ಯ ಇಲ್ಲಿದೆ, ಮತ್ತು ಅದನ್ನು ಸಬ್‌ಗ್ರಿಡ್ ಸುಂದರವಾಗಿ ಸಂಘಟಿಸಿದೆ.
ಹೆಚ್ಚಿನ ಸಂಪನ್ಮೂಲಗಳು:
- MDN ವೆಬ್ ಡಾಕ್ಸ್: CSS ಸಬ್‌ಗ್ರಿಡ್
- ಗ್ರಿಡ್ ಬೈ ಎಕ್ಸಾಂಪಲ್: ಸಬ್‌ಗ್ರಿಡ್ ಕಲಿಯಿರಿ
- W3C CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಮಾಡ್ಯೂಲ್ ಲೆವೆಲ್ 2 ಸ್ಪೆಸಿಫಿಕೇಶನ್