ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಕೀವರ್ಡ್‌ಗಳೊಂದಿಗೆ CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ವೈವಿಧ್ಯಮಯ ವಿಷಯ ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ, ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ.
CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ: ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ನಿಯಂತ್ರಣದಲ್ಲಿ ಪಾಂಡಿತ್ಯ
CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಸಂಕೀರ್ಣ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ. ಇದರ ಪ್ರಮುಖ ಶಕ್ತಿಗಳಲ್ಲಿ ಒಂದು ಅದರ ಹೊಂದಿಕೊಳ್ಳುವ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಸಾಮರ್ಥ್ಯಗಳು, ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳ ಗಾತ್ರವನ್ನು ನಿಖರವಾಗಿ ನಿಯಂತ್ರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಲು ವಿಭಿನ್ನ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಕೀವರ್ಡ್‌ಗಳು ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಈ ಲೇಖನವು CSS ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರದ ಸುಧಾರಿತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ವಿವಿಧ ವಿಷಯ ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಸಲೀಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಅವು ಹೇಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.
ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳು ಮತ್ತು ಗಾತ್ರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರದ ನಿರ್ದಿಷ್ಟತೆಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ನಾವು ನೆನಪಿಸಿಕೊಳ್ಳೋಣ.
ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳು ಎಂದರೇನು?
ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳು ಗ್ರಿಡ್ ವಿನ್ಯಾಸದ ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳಾಗಿವೆ. ಅವು ಗ್ರಿಡ್ ಐಟಂಗಳನ್ನು ಇರಿಸುವ ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಈ ಟ್ರ್ಯಾಕ್‌ಗಳ ಗಾತ್ರವು ಒಟ್ಟಾರೆ ವಿನ್ಯಾಸ ಮತ್ತು ಗ್ರಿಡ್‌ನಲ್ಲಿ ವಿಷಯವನ್ನು ಹೇಗೆ ವಿತರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದರ ಮೇಲೆ ನೇರವಾಗಿ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.
ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವುದು
ನೀವು grid-template-rows ಮತ್ತು grid-template-columns ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಈ ಪ್ರಾಪರ್ಟಿಗಳು ಸ್ಪೇಸ್-ಬೇರ್ಪಡಿಸಿದ ಮೌಲ್ಯಗಳ ಪಟ್ಟಿಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತವೆ, ಅಲ್ಲಿ ಪ್ರತಿ ಮೌಲ್ಯವು ಅನುಗುಣವಾದ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
ಈ ಕೋಡ್ ಮೂರು ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಎರಡು ಸಾಲುಗಳಿರುವ ಗ್ರಿಡ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಮೊದಲ ಮತ್ತು ಮೂರನೇ ಕಾಲಮ್‌ಗಳು ಲಭ್ಯವಿರುವ ಜಾಗದ 1 ಭಾಗವನ್ನು (fr) ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ, ಆದರೆ ಎರಡನೇ ಕಾಲಮ್ 2 ಭಾಗಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಸಾಲುಗಳು ತಮ್ಮ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಗಾತ್ರವನ್ನು ಪಡೆಯುತ್ತವೆ.
ಆಂತರಿಕ vs. ಬಾಹ್ಯ ಗಾತ್ರ
ಸುಧಾರಿತ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ತಿರುಳು ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರದ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರಲ್ಲಿದೆ. ಈ ಪರಿಕಲ್ಪನೆಗಳು ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವನ್ನು ಅದರ ವಿಷಯ ಮತ್ತು ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ಹೇಗೆ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತವೆ.
ಆಂತರಿಕ ಗಾತ್ರ: ವಿಷಯ-ಚಾಲಿತ
ಆಂತರಿಕ ಗಾತ್ರ ಎಂದರೆ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವು ಆ ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿ ಇರಿಸಲಾದ ಗ್ರಿಡ್ ಐಟಂಗಳ ವಿಷಯದಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. ಟ್ರ್ಯಾಕ್ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ, ನಿರ್ದಿಷ್ಟ ಮಿತಿಗಳವರೆಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ ಅಥವಾ ಸಂಕುಚಿತಗೊಳ್ಳುತ್ತದೆ. ಆಂತರಿಕ ಗಾತ್ರದ ಕೀವರ್ಡ್‌ಗಳು ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿವೆ:
auto: ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ. ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿನ ಗ್ರಿಡ್ ಐಟಂಗಳ ಅತಿದೊಡ್ಡ ಕನಿಷ್ಠ ಗಾತ್ರದ ಕೊಡುಗೆಯಿಂದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಇದರರ್ಥ ಟ್ರ್ಯಾಕ್ ವಿಷಯವು ಉಕ್ಕಿ ಹರಿಯದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವಷ್ಟು ದೊಡ್ಡದಾಗಿರುತ್ತದೆ, ಆದರೆ ಗ್ರಿಡ್ ಐಟಂಗಳಲ್ಲಿ ಹೊಂದಿಸಲಾದmin-width/min-heightಮೌಲ್ಯಗಳಿಂದ ಇದು ಪ್ರಭಾವಿತವಾಗಬಹುದು.min-content: ವಿಷಯವು ಉಕ್ಕಿ ಹರಿಯದಂತೆ ಅಗತ್ಯವಿರುವ ಅತಿ ಕಡಿಮೆ ಜಾಗಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಗಾತ್ರಗೊಳಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪಠ್ಯವು ಪದಗಳನ್ನು ವಿಚಿತ್ರವಾಗಿ ಮುರಿದರೂ ಸಹ, ಸಾಧ್ಯವಾದಷ್ಟು ಚಿಕ್ಕ ಹಂತದಲ್ಲಿ ಸುತ್ತಿಕೊಳ್ಳುತ್ತದೆ.max-content: ವಿಷಯವು ಉಕ್ಕಿ ಹರಿಯದಂತೆ ಅಗತ್ಯವಿರುವ ಅತಿ ದೊಡ್ಡ ಜಾಗಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಗಾತ್ರಗೊಳಿಸಲಾಗುತ್ತದೆ. ಪಠ್ಯಕ್ಕಾಗಿ, ಇದರರ್ಥ ಇದು ಸಾಧ್ಯವಾದಷ್ಟು ಸುತ್ತುವುದನ್ನು ತಪ್ಪಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ, ಇದು ತುಂಬಾ ಅಗಲವಾದ ಅಥವಾ ಎತ್ತರದ ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.fit-content(length): ಟ್ರ್ಯಾಕ್ ಅನ್ನುmax-contentಮತ್ತು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದlengthಇವುಗಳಲ್ಲಿ ಚಿಕ್ಕದಕ್ಕೆ ಗಾತ್ರಗೊಳಿಸಲಾಗುತ್ತದೆ. ಇದು ಟ್ರ್ಯಾಕ್‌ಗೆ ಗರಿಷ್ಠ ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅದೇ ಸಮಯದಲ್ಲಿ ಅದರ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಕುಗ್ಗಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
ಉದಾಹರಣೆ: min-content ಮತ್ತು max-content ನೊಂದಿಗೆ ಆಂತರಿಕ ಗಾತ್ರ
ಎರಡು ಕಾಲಮ್‌ಗಳಿರುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಮೊದಲ ಕಾಲಮ್ ಅನ್ನು min-content ನೊಂದಿಗೆ ಮತ್ತು ಎರಡನೆಯದನ್ನು max-content ನೊಂದಿಗೆ ಗಾತ್ರಗೊಳಿಸಲಾಗಿದೆ. ಮೊದಲ ಕಾಲಮ್‌ನಲ್ಲಿನ ವಿಷಯವು ದೀರ್ಘವಾದ ಪದವಾಗಿದ್ದರೆ, ಅದನ್ನು ಕನಿಷ್ಠ ವಿಷಯದ ಗಾತ್ರಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ಯಾವುದೇ ಸಂಭಾವ್ಯ ಹಂತದಲ್ಲಿ ಮುರಿಯಲಾಗುತ್ತದೆ. ಆದರೆ, ಎರಡನೇ ಕಾಲಮ್ ಸುತ್ತದೆ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ.
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
grid-gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 2;
}
<div class="grid-container">
<div class="item1">Supercalifragilisticexpialidocious</div>
<div class="item2">Short text</div>
</div>
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, "Supercalifragilisticexpialidocious" ಪದವು ಮೊದಲ ಕಾಲಮ್‌ನಲ್ಲಿ ಅನೇಕ ಸಾಲುಗಳಾಗಿ ಮುರಿಯಲ್ಪಡುತ್ತದೆ, ಆದರೆ "Short text" ಎರಡನೇ ಕಾಲಮ್‌ನಲ್ಲಿ ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಉಳಿಯುತ್ತದೆ. ಇದು ಆಂತರಿಕ ಗಾತ್ರವು ವಿಷಯದ ಅಂತರ್ಗತ ಗಾತ್ರದ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: fit-content() ನೊಂದಿಗೆ ಆಂತರಿಕ ಗಾತ್ರ
`fit-content()` ಫಂಕ್ಷನ್ ನಿಮಗೆ ಟ್ರ್ಯಾಕ್ ವಿಷಯ-ಗಾತ್ರದಲ್ಲಿರಬೇಕು, ಆದರೆ ಗರಿಷ್ಠ ಗಾತ್ರದ ಮಿತಿಯನ್ನು ಹೊಂದಿರಬೇಕೆಂದು ಬಯಸಿದಾಗ ಉಪಯುಕ್ತವಾಗಿದೆ. ಕಾಲಮ್‌ಗಳು ಅಥವಾ ಸಾಲುಗಳು ತುಂಬಾ ದೊಡ್ಡದಾಗುವುದನ್ನು ತಡೆಯಲು ಇದನ್ನು ಬಳಸಬಹುದು, ವಿಷಯವು ಚಿಕ್ಕದಾಗಿದ್ದರೆ ಅವುಗಳನ್ನು ಕುಗ್ಗಲು ಅವಕಾಶ ನೀಡುತ್ತದೆ.
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-gap: 10px;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ ಅದರ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದರೆ 200px ಅಗಲವನ್ನು ಮೀರುವುದಿಲ್ಲ. ಎರಡನೇ ಕಾಲಮ್ ಉಳಿದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಕಾಲಮ್ ಹೊಂದಿಕೊಳ್ಳುವಂತಿರಬೇಕು ಆದರೆ ಹೆಚ್ಚು ಜಾಗ ತೆಗೆದುಕೊಳ್ಳಬಾರದು ಎಂದು ನೀವು ಬಯಸುವ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಬಾಹ್ಯ ಗಾತ್ರ: ಸ್ಥಳ-ಚಾಲಿತ
ಮತ್ತೊಂದೆಡೆ, ಬಾಹ್ಯ ಗಾತ್ರ ಎಂದರೆ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ನ ಗಾತ್ರವು ವಿಷಯದ ಹೊರಗಿನ ಅಂಶಗಳಿಂದ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಸ್ಥಳ ಅಥವಾ ನಿಗದಿತ ಗಾತ್ರದ ಮೌಲ್ಯ. ಬಾಹ್ಯ ಗಾತ್ರದ ಕೀವರ್ಡ್‌ಗಳು ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿವೆ:
length: ಒಂದು ನಿಗದಿತ ಉದ್ದದ ಮೌಲ್ಯ (ಉದಾ.,100px,2em,50vh). ವಿಷಯದ ಹೊರತಾಗಿಯೂ ಟ್ರ್ಯಾಕ್ ನಿಖರವಾಗಿ ಈ ಗಾತ್ರದಲ್ಲಿರುತ್ತದೆ.percentage: ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ಗಾತ್ರದ ಶೇಕಡಾವಾರು (ಉದಾ.,50%). ಟ್ರ್ಯಾಕ್ ಲಭ್ಯವಿರುವ ಜಾಗದ ಈ ಶೇಕಡಾವಾರು ಭಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.fr(ಭಾಗಶಃ ಯೂನಿಟ್): ಎಲ್ಲಾ ಇತರ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಗಾತ್ರಗೊಳಿಸಿದ ನಂತರ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಜಾಗದ ಒಂದು ಭಾಗವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಟ್ರ್ಯಾಕ್‌ಗಳ ನಡುವೆ ಜಾಗವನ್ನು ವಿತರಿಸಲು ಇದು ಅತ್ಯಂತ ಹೊಂದಿಕೊಳ್ಳುವ ಮಾರ್ಗವಾಗಿದೆ.
ಉದಾಹರಣೆ: fr ಯೂನಿಟ್‌ಗಳೊಂದಿಗೆ ಬಾಹ್ಯ ಗಾತ್ರ
fr ಯೂನಿಟ್ ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಅಮೂಲ್ಯವಾಗಿದೆ. ಟ್ರ್ಯಾಕ್‌ಗಳಿಗೆ ಭಾಗಶಃ ಯೂನಿಟ್‌ಗಳನ್ನು ನಿಯೋಜಿಸುವ ಮೂಲಕ, ಅವು ಲಭ्यವಿರುವ ಜಾಗವನ್ನು ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೀರಿ.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ಹೊಂದಿದೆ. ಮೊದಲ ಕಾಲಮ್ ಲಭ್ಯವಿರುವ ಜಾಗದ 1 ಭಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಎರಡನೇ ಕಾಲಮ್ 2 ಭಾಗಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಗ್ರಿಡ್ ಕಂಟೇನರ್ 600px ಅಗಲವಾಗಿದ್ದರೆ, ಮೊದಲ ಕಾಲಮ್ 200px ಅಗಲ ಮತ್ತು ಎರಡನೇ ಕಾಲಮ್ 400px ಅಗಲವಾಗಿರುತ್ತದೆ (ಯಾವುದೇ ಗ್ರಿಡ್ ಗ್ಯಾಪ್ ಹೊರತುಪಡಿಸಿ). ಇದು ಪರದೆಯ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಕಾಲಮ್‌ಗಳು ಯಾವಾಗಲೂ ತಮ್ಮ ಪ್ರಮಾಣಾನುಗುಣ ಸಂಬಂಧವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಶೇಕಡಾವಾರು ಮತ್ತು ನಿಗದಿತ ಉದ್ದಗಳೊಂದಿಗೆ ಬಾಹ್ಯ ಗಾತ್ರ
.grid-container {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-gap: 10px;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ ಅನ್ನು `200px` ನ ನಿಗದಿತ ಅಗಲಕ್ಕೆ ಹೊಂದಿಸಲಾಗಿದೆ. ಎರಡನೇ ಕಾಲಮ್ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ಅಗಲದ 50% ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಅಂತಿಮವಾಗಿ, ಮೂರನೇ ಕಾಲಮ್ `1fr` ಯೂನಿಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಮೊದಲ ಎರಡು ಕಾಲಮ್‌ಗಳನ್ನು ಗಾತ್ರಗೊಳಿಸಿದ ನಂತರ ಉಳಿದಿರುವ ಯಾವುದೇ ಜಾಗವನ್ನು ಅದು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರವನ್ನು ಸಂಯೋಜಿಸುವುದು: minmax()
minmax() ಫಂಕ್ಷನ್ ನಿಮಗೆ ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರವನ್ನು ಸಂಯೋಜಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳ ಮೇಲೆ ಇನ್ನೂ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಟ್ರ್ಯಾಕ್‌ಗೆ ಸ್ವೀಕಾರಾರ್ಹ ಗಾತ್ರಗಳ ಶ್ರೇಣಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಮೌಲ್ಯ ಎರಡನ್ನೂ ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ.
minmax(min, max)
min: ಟ್ರ್ಯಾಕ್‌ನ ಕನಿಷ್ಠ ಗಾತ್ರ. ಇದು ಯಾವುದೇ ಮಾನ್ಯವಾದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಮೌಲ್ಯವಾಗಿರಬಹುದು, ಆಂತರಿಕ ಕೀವರ್ಡ್‌ಗಳು (auto,min-content,max-content) ಅಥವಾ ಬಾಹ್ಯ ಮೌಲ್ಯಗಳು (length,percentage,fr) ಸೇರಿದಂತೆ.max: ಟ್ರ್ಯಾಕ್‌ನ ಗರಿಷ್ಠ ಗಾತ್ರ. ಇದೂ ಸಹ ಯಾವುದೇ ಮಾನ್ಯವಾದ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ಮೌಲ್ಯವಾಗಿರಬಹುದು. `max` `min` ಗಿಂತ ಚಿಕ್ಕದಾಗಿದ್ದರೆ, `max` ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು `min` ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
ಉದಾಹರಣೆ: ಸ್ಪಂದನಾಶೀಲ ಕಾಲಮ್‌ಗಳಿಗಾಗಿ minmax() ಅನ್ನು ಬಳಸುವುದು
minmax() ಗಾಗಿ ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣವೆಂದರೆ ಕನಿಷ್ಠ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಆದರೆ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸಬಲ್ಲ ಸ್ಪಂದನಾಶೀಲ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸುವುದು.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
ಇಲ್ಲಿ, repeat(auto-fit, minmax(200px, 1fr)) ಕನಿಷ್ಠ 200px ಅಗಲವಿರುವ ಆದರೆ ಉಳಿದ ಜಾಗವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸಬಲ್ಲ ಸಾಧ್ಯವಾದಷ್ಟು ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. auto-fit ಕೀವರ್ಡ್ ಖಾಲಿ ಕಾಲಮ್‌ಗಳು ಕುಸಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: minmax() ಅನ್ನು ಆಂತರಿಕ ಗಾತ್ರದೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು
.grid-container {
display: grid;
grid-template-columns: minmax(min-content, 300px) 1fr;
grid-gap: 10px;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ ಅದರ ಕನಿಷ್ಠ ವಿಷಯದ ಗಾತ್ರದಷ್ಟು ಅಗಲವಾಗಿರುತ್ತದೆ, ಆದರೆ `300px` ಅನ್ನು ಮೀರುವುದಿಲ್ಲ. ಎರಡನೇ ಕಾಲಮ್ ಉಳಿದ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
ದೃಢವಾದ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
- ಸ್ಪಂದನಾಶೀಲ ನ್ಯಾವಿಗೇಷನ್: ಕನಿಷ್ಠ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಆದರೆ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸಬಲ್ಲ ನ್ಯಾವಿಗೇಷನ್ ಐಟಂಗಳನ್ನು ರಚಿಸಲು
minmax()ಬಳಸಿ. - ಹೊಂದಿಕೊಳ್ಳುವ ಕಾರ್ಡ್ ವಿನ್ಯಾಸಗಳು: ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾರ್ಡ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು
repeat(auto-fit, minmax())ಅನ್ನು ಬಳಸಿ, ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ಕಾರ್ಡ್‌ಗಳು ಸಲೀಸಾಗಿ ಸುತ್ತುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. - ವಿಷಯ-ಅರಿವಿನ ಸೈಡ್‌ಬಾರ್‌ಗಳು: ಸೈಡ್‌ಬಾರ್‌ಗಳನ್ನು ಅವುಗಳ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಗಾತ್ರಗೊಳಿಸಲು
min-contentಅಥವಾmax-contentಬಳಸಿ, ಅವುಗಳನ್ನು ಅಗತ್ಯಕ್ಕೆ ತಕ್ಕಂತೆ ವಿಸ್ತರಿಸಲು ಅಥವಾ ಸಂಕುಚಿತಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. - ನಿಗದಿತ ಅಗಲಗಳನ್ನು ತಪ್ಪಿಸಿ: ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ನಿಗದಿತ ಅಗಲಗಳ (
px) ಬಳಕೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿ ಮತ್ತು ಸಾಪೇಕ್ಷ ಯೂನಿಟ್‌ಗಳಿಗೆ (%,fr,em) ಆದ್ಯತೆ ನೀಡಿ. - ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಗ್ರಿಡ್ ವಿನ್ಯಾಸಗಳು ಸರಿಯಾಗಿ ರೆಂಡರ್ ಆಗುವುದನ್ನು ಮತ್ತು ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
ಸುಧಾರಿತ ಗ್ರಿಡ್ ಗಾತ್ರದ ತಂತ್ರಗಳು
ಮೂಲ ಕೀವರ್ಡ್‌ಗಳು ಮತ್ತು ಫಂಕ್ಷನ್‌ಗಳ ಹೊರತಾಗಿ, CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಹೆಚ್ಚು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ನೀಡುತ್ತದೆ.
repeat() ಫಂಕ್ಷನ್
repeat() ಫಂಕ್ಷನ್ ಒಂದೇ ಗಾತ್ರದ ಅನೇಕ ಟ್ರ್ಯಾಕ್‌ಗಳ ರಚನೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಇದು ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ: ಪುನರಾವರ್ತನೆಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ.
repeat(number, track-size)
ಉದಾಹರಣೆಗೆ:
grid-template-columns: repeat(3, 1fr);
ಇದು ಇದಕ್ಕೆ ಸಮಾನವಾಗಿದೆ:
grid-template-columns: 1fr 1fr 1fr;
repeat() ಫಂಕ್ಷನ್ ಅನ್ನು ಲಭ್ಯವಿರುವ ಜಾಗಕ್ಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಪಂದನಾಶೀಲ ಗ್ರಿಡ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು auto-fit ಮತ್ತು auto-fill ಕೀವರ್ಡ್‌ಗಳೊಂದಿಗೆ ಸಹ ಬಳಸಬಹುದು.
auto-fit ಮತ್ತು auto-fill ಕೀವರ್ಡ್‌ಗಳು
ಈ ಕೀವರ್ಡ್‌ಗಳನ್ನು repeat() ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ಬಳಸಿ ಗ್ರಿಡ್‌ನಲ್ಲಿನ ಐಟಂಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಲಭ್ಯವಿರುವ ಜಾಗಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ಪಂದನಾಶೀಲ ಗ್ರಿಡ್‌ಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಅವುಗಳ ನಡುವಿನ ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವು ಖಾಲಿ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದರಲ್ಲಿದೆ.
auto-fit: ಎಲ್ಲಾ ಟ್ರ್ಯಾಕ್‌ಗಳು ಖಾಲಿಯಾಗಿದ್ದರೆ, ಟ್ರ್ಯಾಕ್‌ಗಳು 0 ಅಗಲಕ್ಕೆ ಕುಸಿಯುತ್ತವೆ.auto-fill: ಎಲ್ಲಾ ಟ್ರ್ಯಾಕ್‌ಗಳು ಖಾಲಿಯಾಗಿದ್ದರೆ, ಟ್ರ್ಯಾಕ್‌ಗಳು ತಮ್ಮ ಗಾತ್ರವನ್ನು ಉಳಿಸಿಕೊಳ್ಳುತ್ತವೆ.
ಉದಾಹರಣೆ: ಸ್ಪಂದನಾಶೀಲ ಕಾಲಮ್‌ಗಳಿಗಾಗಿ auto-fit ಅನ್ನು ಬಳಸುವುದು
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಗ್ರಿಡ್ ಕನಿಷ್ಠ 200px ಅಗಲವಿರುವ ಆದರೆ ಉಳಿದ ಜಾಗವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸಬಲ್ಲ ಸಾಧ್ಯವಾದಷ್ಟು ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. ಎಲ್ಲಾ ಕಾಲಮ್‌ಗಳನ್ನು ತುಂಬಲು ಸಾಕಷ್ಟು ಐಟಂಗಳು ಇಲ್ಲದಿದ್ದರೆ, ಖಾಲಿ ಕಾಲಮ್‌ಗಳು 0 ಅಗಲಕ್ಕೆ ಕುಸಿಯುತ್ತವೆ.
ಅಂತರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n) ಗಾಗಿ ಪರಿಗಣನೆಗಳು
ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸುವಾಗ, ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಬರವಣಿಗೆಯ ನಿರ್ದೇಶನಗಳ ಪ್ರಭಾವವನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ. ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ಸರಿಯಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡದಿದ್ದರೆ, ಭಾಷೆಗಳ ನಡುವೆ ಪಠ್ಯದ ಉದ್ದವು ಗಣನೀಯವಾಗಿ ಬದಲಾಗಬಹುದು, ಇದು ವಿನ್ಯಾಸದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಅಂತರಾಷ್ಟ್ರೀಕೃತ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ:
- ಸಾಪೇಕ್ಷ ಯೂನಿಟ್‌ಗಳನ್ನು ಬಳಸಿ: ಪಿಕ್ಸೆಲ್‌ಗಳಂತಹ ನಿಗದಿತ ಯೂನಿಟ್‌ಗಳಿಗಿಂತ
em,rem, ಮತ್ತು ಶೇಕಡಾವಾರುಗಳಂತಹ ಸಾಪೇಕ್ಷ ಯೂನಿಟ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ, ಬಳಕೆದಾರರ ಫಾಂಟ್ ಗಾತ್ರದ ಆದ್ಯತೆಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಪಠ್ಯವನ್ನು ಅಳೆಯಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. - ಆಂತರಿಕ ಗಾತ್ರ:
min-content,max-content, ಮತ್ತುfit-content()ನಂತಹ ಆಂತರಿಕ ಗಾತ್ರದ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಿ, ಭಾಷೆಯ ಹೊರತಾಗಿಯೂ ಟ್ರ್ಯಾಕ್‌ಗಳು ವಿಷಯದ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. - ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳು:
leftಮತ್ತುrightನಂತಹ ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಗಳ ಬದಲುinline-startಮತ್ತುinline-endನಂತಹ ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸಿ, ಎಡದಿಂದ-ಬಲಕ್ಕೆ (LTR) ಮತ್ತು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಎರಡೂ ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸಲು. - ಪರೀಕ್ಷೆ: ಯಾವುದೇ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳನ್ನು ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಬರವಣಿಗೆಯ ನಿರ್ದೇಶನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ. ವಿಭಿನ್ನ ಭಾಷೆಗಳಲ್ಲಿ ಕಂಡುಬರಬಹುದಾದ ದೀರ್ಘವಾದ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಅನುಕರಿಸಿ.
ತೀರ್ಮಾನ
CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರವು ಸ್ಪಂದನಾಶೀಲ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಬಹುಮುಖಿ ಸಾಧನವಾಗಿದೆ. ಆಂತರಿಕ ಮತ್ತು ಬಾಹ್ಯ ಗಾತ್ರದ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, minmax() ಫಂಕ್ಷನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಮತ್ತು repeat() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ವಿವಿಧ ವಿಷಯ ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಸಲೀಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ವಿನ್ಯಾಸಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವಿನ್ಯಾಸ ಮಾಡುವಾಗ ಅಂತರಾಷ್ಟ್ರೀಕರಣ ಮತ್ತು ಸ್ಥಳೀಕರಣದ ಪ್ರಭಾವವನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ.
ವಿವಿಧ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರದ ತಂತ್ರಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ ಮತ್ತು CSS ಗ್ರಿಡ್‌ನ ಅಂತ್ಯವಿಲ್ಲದ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ವೇಷಿಸಿ. ಅಭ್ಯಾಸ ಮತ್ತು ಈ ಪರಿಕಲ್ಪನೆಗಳ ದೃಢವಾದ ತಿಳುವಳಿಕೆಯೊಂದಿಗೆ, ಯಾವುದೇ ಯೋಜನೆಗಾಗಿ ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ನೀವು ಸಜ್ಜಾಗುತ್ತೀರಿ.