CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ಜಾಗತಿಕ ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಡೈನಾಮಿಕ್ ಲೇಔಟ್ ಗಾತ್ರದ ಲೆಕ್ಕಾಚಾರ

CSS ಗ್ರಿಡ್ ಲೇಔಟ್, ಸಂಕೀರ್ಣ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಾಟಿಯಿಲ್ಲದ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ನೀಡುವ ಮೂಲಕ, ನಾವು ವೆಬ್ ವಿನ್ಯಾಸವನ್ನು ಅನುಸರಿಸುವ ವಿಧಾನವನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಿದೆ. CSS ಗ್ರಿಡ್‌ನ ಶಕ್ತಿಯ ಕೇಂದ್ರದಲ್ಲಿ ಅದರ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳು ಇವೆ – fr, minmax(), ಮತ್ತು auto – ಇವು ಗ್ರಿಡ್ ಸಾಲುಗಳು ಮತ್ತು ಕಾಲಮ್‌ಗಳಿಗೆ ಡೈನಾಮಿಕ್ ಮತ್ತು ಬುದ್ಧಿವಂತ ಗಾತ್ರದ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತವೆ. ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು, ವಿಷಯದ ಪ್ರಮಾಣಗಳು ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಕರಣದ ಅವಶ್ಯಕತೆಗಳಿಗೆ ಸಲೀಸಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

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

fr ಯೂನಿಟ್: ಭಾಗಶಃ ಸ್ಥಳ ಹಂಚಿಕೆ

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

fr ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

fr ಯೂನಿಟ್, ಒಟ್ಟು ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಗಾತ್ರದಿಂದ ಸ್ಥಿರ-ಗಾತ್ರದ ಟ್ರ್ಯಾಕ್‌ಗಳು ಆಕ್ರಮಿಸಿಕೊಂಡಿರುವ ಸ್ಥಳವನ್ನು ಕಳೆದು ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಉಳಿದ ಸ್ಥಳವನ್ನು ನಂತರ ಪ್ರತಿ ಟ್ರ್ಯಾಕ್‌ಗೆ ನಿಗದಿಪಡಿಸಲಾದ fr ಮೌಲ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ಅನುಪಾತದಲ್ಲಿ ವಿಂಗಡಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ: ಸರಳ ಮೂರು-ಕಾಲಮ್ ಲೇಔಟ್

ಸರಳ ಮೂರು-ಕಾಲಮ್ ಲೇಔಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ, ಅಲ್ಲಿ ಮೊದಲ ಕಾಲಮ್ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಅರ್ಧದಷ್ಟು ತೆಗೆದುಕೊಳ್ಳಬೇಕು, ಮತ್ತು ಉಳಿದ ಎರಡು ಕಾಲಮ್‌ಗಳು ತಲಾ ಕಾಲು ಭಾಗ ತೆಗೆದುಕೊಳ್ಳಬೇಕು.

            .grid-container {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್‌ಗೆ 2fr ನಿಗದಿಪಡಿಸಲಾಗಿದೆ, ಮತ್ತು ಇತರ ಎರಡಕ್ಕೆ ತಲಾ 1fr ನಿಗದಿಪಡಿಸಲಾಗಿದೆ. ಒಟ್ಟು ಭಾಗಗಳ ಸಂಖ್ಯೆ 4 (2 + 1 + 1). ಆದ್ದರಿಂದ, ಮೊದಲ ಕಾಲಮ್ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ 50% (2/4) ಅನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ, ಆದರೆ ಉಳಿದ ಕಾಲಮ್‌ಗಳು ತಲಾ 25% (1/4) ಅನ್ನು ಆಕ್ರಮಿಸುತ್ತವೆ.

fr ಜೊತೆಗೆ ಸ್ಥಿರ-ಗಾತ್ರದ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ನೀವು fr ಯೂನಿಟ್‌ಗಳನ್ನು ಸ್ಥಿರ-ಗಾತ್ರದ ಟ್ರ್ಯಾಕ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ನಿಮಗೆ 200px ಸ್ಥಿರ ಅಗಲದ ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ಉಳಿದ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ ಬೇಕು ಎಂದು ಭಾವಿಸೋಣ.

            .grid-container {
 display: grid;
 grid-template-columns: 200px 1fr;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಸೈಡ್‌ಬಾರ್ ಯಾವಾಗಲೂ 200px ಅಗಲವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ಉಳಿದ ಸ್ಥಳವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸುತ್ತದೆ. ಗ್ರಿಡ್ ಕಂಟೇನರ್ 800px ಅಗಲವಾಗಿದ್ದರೆ, ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು 600px ಅಗಲವಾಗಿರುತ್ತದೆ (800px - 200px = 600px).

ಅಂತರರಾಷ್ಟ್ರೀಕರಣ ಮತ್ತು fr

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

ಉದಾಹರಣೆ: ನಮ್ಯವಾದ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು

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

            .nav-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* or auto-fill */
 gap: 10px; /* optional gap */
}

            

              
                Copy
              
            
          

ಇದು ಪ್ರತಿ ಮೆನು ಐಟಂ ತನ್ನ ಪಠ್ಯ ಲೇಬಲ್‌ನ ಉದ್ದವನ್ನು ಲೆಕ್ಕಿಸದೆ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ ಸಮಾನ ಭಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. minmax(100px, 1fr) ಪ್ರತಿ ಐಟಂಗೆ ಕನಿಷ್ಠ 100px ಅಗಲವಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ ಆದರೆ ಉಳಿದ ಸ್ಥಳವನ್ನು ಅನುಪಾತದಲ್ಲಿ ತುಂಬಲು ವಿಸ್ತರಿಸಬಹುದು. `auto-fit` ಕೀವರ್ಡ್ ಕಂಟೇನರ್ ಗಾತ್ರ ಮತ್ತು ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ.

minmax() ಫಂಕ್ಷನ್: ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

minmax() ಫಂಕ್ಷನ್ ನಿಮಗೆ ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ವಿಭಿನ್ನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಟ್ರ್ಯಾಕ್‌ಗಳು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ ಎಂಬುದರ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅವು ತುಂಬಾ ಚಿಕ್ಕದಾಗುವುದನ್ನು ಅಥವಾ ತುಂಬಾ ದೊಡ್ಡದಾಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಸಿಂಟ್ಯಾಕ್ಸ್ minmax(min, max), ಇಲ್ಲಿ min ಕನಿಷ್ಠ ಗಾತ್ರ ಮತ್ತು max ಗರಿಷ್ಠ ಗಾತ್ರವಾಗಿದೆ.

minmax() ಗಾಗಿ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

• ವಿಷಯ ಉಕ್ಕಿ ಹರಿಯುವುದನ್ನು ತಡೆಯುವುದು: ಒಂದು ಕಾಲಮ್ ಅದರ ವಿಷಯದ ಅಗಲಕ್ಕಿಂತ ಕಿರಿದಾಗದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಪಠ್ಯ ಉಕ್ಕಿ ಹರಿಯುವುದನ್ನು ತಡೆಯಿರಿ.
• ದೃಶ್ಯ ಸಮತೋಲನವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದು: ಒಂದು ಕಾಲಮ್ ಇತರ ಕಾಲಮ್‌ಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ಅಸಮಾನವಾಗಿ ದೊಡ್ಡದಾಗುವುದನ್ನು ತಡೆಯಲು ಅದರ ಗರಿಷ್ಠ ಅಗಲವನ್ನು ಸೀಮಿತಗೊಳಿಸಿ.
• ರೆಸ್ಪಾನ್ಸಿವ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು: ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಸ್ಕ್ರೀನ್ ಗಾತ್ರದ ಆಧಾರದ ಮೇಲೆ min ಮತ್ತು max ಮೌಲ್ಯಗಳನ್ನು ಸರಿಹೊಂದಿಸಿ.

ಉದಾಹರಣೆ: ಕನಿಷ್ಠ ಕಾಲಮ್ ಅಗಲವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು

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

            .grid-container {
 display: grid;
 grid-template-columns: minmax(200px, 1fr) 2fr;
}

            

              
                Copy
              
            
          

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಸ್ಕ್ರೀನ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ ಮೊದಲ ಕಾಲಮ್ 200px ಗಿಂತ ಕಿರಿದಾಗಿರುವುದಿಲ್ಲ. ಲಭ್ಯವಿರುವ ಸ್ಥಳವು 200px ಗಿಂತ ಕಡಿಮೆಯಿದ್ದರೆ, ಕಾಲಮ್ ಗ್ರಿಡ್ ಕಂಟೇನರ್‌ನ ಸಂಪೂರ್ಣ ಅಗಲವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಎರಡನೇ ಕಾಲಮ್ ಮುಂದಿನ ಸಾಲಿಗೆ ಸುತ್ತಿಕೊಳ್ಳುತ್ತದೆ (grid-auto-flow ಅನ್ನು row ಗೆ ಹೊಂದಿಸಿದ್ದರೆ). ಲಭ್ಯವಿರುವ ಸ್ಥಳವು 200px ಗಿಂತ ಹೆಚ್ಚಿದ್ದರೆ, ಕಾಲಮ್ ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಅನುಪಾತದಲ್ಲಿ ತುಂಬಲು ವಿಸ್ತರಿಸುತ್ತದೆ (1fr ಮೌಲ್ಯದಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಗರಿಷ್ಠದವರೆಗೆ).

minmax() ಮತ್ತು fr ಅನ್ನು ಸಂಯೋಜಿಸುವುದು

ನೀವು minmax() ಮತ್ತು fr ಅನ್ನು ಸಂಯೋಜಿಸಿ ಶಕ್ತಿಯುತ ಮತ್ತು ನಮ್ಯವಾದ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ನೀವು ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ ಮತ್ತು ಸೈಡ್‌ಬಾರ್ ಬಯಸುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಸೈಡ್‌ಬಾರ್ ಕನಿಷ್ಠ 150px ಅಗಲವನ್ನು ಹೊಂದಿರಬೇಕು ಆದರೆ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ 1fr ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ವಿಸ್ತರಿಸಬಹುದು. ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ಉಳಿದ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬೇಕು.

            .grid-container {
 display: grid;
 grid-template-columns: minmax(150px, 1fr) 2fr;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಸೈಡ್‌ಬಾರ್ ಎಂದಿಗೂ 150px ಗಿಂತ ಕಿರಿದಾಗಿರುವುದಿಲ್ಲ. ಲಭ್ಯವಿರುವ ಸ್ಥಳವು ಸೀಮಿತವಾಗಿದ್ದರೆ, ಸೈಡ್‌ಬಾರ್ 150px ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ಉಳಿದ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಸಾಕಷ್ಟು ಸ್ಥಳವಿದ್ದರೆ, ಸೈಡ್‌ಬಾರ್ ಲಭ್ಯವಿರುವ ಸ್ಥಳದ 1fr ತೆಗೆದುಕೊಳ್ಳಲು ವಿಸ್ತರಿಸಬಹುದು, ಆದರೆ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು 2fr ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

minmax() ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆ

minmax() ಬಳಸುವಾಗ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ನಿಮ್ಮ ಕನಿಷ್ಠ ಗಾತ್ರಗಳು ವಿಭಿನ್ನ ಭಾಷೆಗಳಲ್ಲಿ ಮತ್ತು ವಿವಿಧ ಫಾಂಟ್ ಗಾತ್ರಗಳಲ್ಲಿ ವಿಷಯವನ್ನು સમાಯಿಸಲು ಸಾಕಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರು ಫಾಂಟ್ ಗಾತ್ರಗಳನ್ನು ಹೆಚ್ಚಿಸಬಹುದು, ಇದು ಕನಿಷ್ಠ ಗಾತ್ರವು ತುಂಬಾ ಚಿಕ್ಕದಾಗಿದ್ದರೆ ವಿಷಯ ಉಕ್ಕಿ ಹರಿಯಲು ಕಾರಣವಾಗಬಹುದು. ವಿಭಿನ್ನ ಫಾಂಟ್ ಗಾತ್ರಗಳು ಮತ್ತು ಭಾಷೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಅತ್ಯಗತ್ಯ.

ಉದಾಹರಣೆ: ನಮ್ಯವಾದ ಚಿತ್ರ ಗ್ಯಾಲರಿ

ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ನಮ್ಯವಾದ ಚಿತ್ರ ಗ್ಯಾಲರಿಯನ್ನು ರಚಿಸಿ. ದೃಶ್ಯ ಸ್ಪಷ್ಟತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಪ್ರತಿ ಚಿತ್ರವು ಕನಿಷ್ಠ ಅಗಲವನ್ನು ಹೊಂದಿರಬೇಕು, ಆದರೆ ಗ್ಯಾಲರಿಯು ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸಬೇಕು.

            .gallery-container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 10px;
}

.gallery-item {
 width: 100%;
 height: auto;
}

.gallery-item img {
 width: 100%;
 height: auto;
 display: block;
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, 1fr)) ಕನಿಷ್ಠ 150px ಅಗಲವಿರುವ ಮತ್ತು ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸುವ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. auto-fit ಕೀವರ್ಡ್ ಸ್ಕ್ರೀನ್ ಗಾತ್ರದ ಆಧಾರದ ಮೇಲೆ ಗ್ಯಾಲರಿಯು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಗ್ಯಾಲರಿ ಐಟಂಗಳೊಳಗಿನ ಚಿತ್ರಗಳನ್ನು ಕಂಟೇನರ್ ಅನ್ನು ತುಂಬಲು width: 100% ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ.

auto ಕೀವರ್ಡ್: ಆಂತರಿಕ ಗಾತ್ರ ನಿರ್ಣಯ

auto ಕೀವರ್ಡ್ ಗ್ರಿಡ್‌ಗೆ ಅದರ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಗಾತ್ರ ಮಾಡಲು ಸೂಚಿಸುತ್ತದೆ. ನೀವು ಒಂದು ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಚಿಕ್ಕದಾಗಿರಿಸಲು ಬಯಸಿದಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ಅದರ ವಿಷಯವನ್ನು ಉಕ್ಕಿ ಹರಿಯದೆ સમાಯಿಸುತ್ತದೆ.

auto ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

auto ಬಳಸಿದಾಗ, ಗ್ರಿಡ್ ಅಲ್ಗಾರಿದಮ್ ಟ್ರ್ಯಾಕ್‌ನೊಳಗಿನ ವಿಷಯದ ಆಂತರಿಕ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಈ ಗಾತ್ರವನ್ನು ವಿಷಯದ ಅಗಲ ಅಥವಾ ಎತ್ತರದಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ, ಅದು ಕಾಲಮ್ ಅಥವಾ ಸಾಲು ಎಂಬುದರ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ಟ್ರ್ಯಾಕ್ ನಂತರ ವಿಷಯವನ್ನು સમાಯಿಸಲು ತನ್ನ ಗಾತ್ರವನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ.

auto ಗಾಗಿ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

• ವಿಷಯ-ಆಧಾರಿತ ಗಾತ್ರ: ಒಂದು ಕಾಲಮ್ ಅಥವಾ ಸಾಲು ಅದರಲ್ಲಿರುವ ವಿಷಯದ ಪ್ರಮಾಣವನ್ನು ಆಧರಿಸಿ ವಿಸ್ತರಿಸಲು ಅಥವಾ ಸಂಕುಚಿತಗೊಳ್ಳಲು ಅನುಮತಿಸಿ.
• ನಮ್ಯವಾದ ಸೈಡ್‌ಬಾರ್‌ಗಳನ್ನು ರಚಿಸುವುದು: ಅದರ ವಿಶಾಲವಾದ ಅಂಶದ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಸೈಡ್‌ಬಾರ್ ಅನ್ನು ಗಾತ್ರ ಮಾಡಿ.
• ರೆಸ್ಪಾನ್ಸಿವ್ ಹೆಡರ್‌ಗಳು ಮತ್ತು ಫೂಟರ್‌ಗಳನ್ನು ಅಳವಡಿಸುವುದು: ಹೆಡರ್ ಅಥವಾ ಫೂಟರ್‌ನ ಎತ್ತರವನ್ನು ಅದರ ವಿಷಯದ ಎತ್ತರವನ್ನು ಆಧರಿಸಿ ಸರಿಹೊಂದಿಸಿ.

ಉದಾಹರಣೆ: ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಕಾಲಮ್ ಅನ್ನು ಗಾತ್ರ ಮಾಡುವುದು

ನೀವು ಸೈಡ್‌ಬಾರ್ ಮತ್ತು ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವನ್ನು ಹೊಂದಿರುವ ಗ್ರಿಡ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ಸೈಡ್‌ಬಾರ್ ಅದರ ವಿಶಾಲವಾದ ಅಂಶವನ್ನು સમાಯಿಸಲು ಸಾಕಷ್ಟು ಅಗಲವಾಗಿರಬೇಕು, ಆದರೆ ಅದಕ್ಕಿಂತ ಅಗಲವಾಗಿರಬಾರದು. ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ಉಳಿದ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬೇಕು.

            .grid-container {
 display: grid;
 grid-template-columns: auto 1fr;
}

            

              
                Copy
              
            
          

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಸೈಡ್‌ಬಾರ್ ತನ್ನ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ತನ್ನ ಅಗಲವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿನ ವಿಶಾಲವಾದ ಅಂಶವು 250px ಅಗಲವಾಗಿದ್ದರೆ, ಸೈಡ್‌ಬಾರ್ 250px ಅಗಲವಾಗಿರುತ್ತದೆ. ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ನಂತರ ಉಳಿದ ಸ್ಥಳವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

auto ಅನ್ನು minmax() ಜೊತೆ ಸಂಯೋಜಿಸುವುದು

ನೀವು auto ಅನ್ನು minmax() ಜೊತೆ ಸಂಯೋಜಿಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಗಾತ್ರ ಮಾಡಲಾದ ಟ್ರ್ಯಾಕ್‌ಗೆ ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಗಾತ್ರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದು ಕಾಲಮ್ ಕನಿಷ್ಠ 100px ಅಗಲವಾಗಿರಬೇಕೆಂದು ಬಯಸಬಹುದು ಆದರೆ ಅದರ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಗರಿಷ್ಠ 300px ಅಗಲದವರೆಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಸ್ತರಿಸಬೇಕು.

            .grid-container {
 display: grid;
 grid-template-columns: minmax(100px, auto) 1fr;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಮೊದಲ ಕಾಲಮ್ ಎಂದಿಗೂ 100px ಗಿಂತ ಕಿರಿದಾಗಿರುವುದಿಲ್ಲ. ಕಾಲಮ್‌ನೊಳಗಿನ ವಿಷಯಕ್ಕೆ ಹೆಚ್ಚು ಸ್ಥಳ ಬೇಕಾದರೆ, ಕಾಲಮ್ ಗರಿಷ್ಠ 300px ವರೆಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ. ಅದರಾಚೆಗೆ, ಕಾಲಮ್‌ನ ಅಗಲವು 300px ನಲ್ಲಿ ಸ್ಥಿರಗೊಳ್ಳುತ್ತದೆ. ಉಳಿದ ಸ್ಥಳವನ್ನು 1fr ಕಾಲಮ್‌ಗೆ ನೀಡಲಾಗುತ್ತದೆ.

auto ಮತ್ತು ಡೈನಾಮಿಕ್ ವಿಷಯ

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

ಉದಾಹರಣೆ: ಡೈನಾಮಿಕ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿ

ಒಂದು ಡೈನಾಮಿಕ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಯನ್ನು ರಚಿಸಿ, ಅಲ್ಲಿ ಪ್ರತಿ ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ನ ಅಗಲವು ಉತ್ಪನ್ನದ ಹೆಸರಿನ ಉದ್ದವನ್ನು ಆಧರಿಸಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ.

            .product-listing {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, auto));
 gap: 10px;
}

.product-card {
 border: 1px solid #ccc;
 padding: 10px;
}

.product-name {
 font-weight: bold;
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, auto)) ಕನಿಷ್ಠ 150px ಅಗಲವಿರುವ ಮತ್ತು ಉತ್ಪನ್ನದ ಹೆಸರಿನ ಉದ್ದವನ್ನು ಆಧರಿಸಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿಸ್ತರಿಸುವ ಕಾಲಮ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ. auto-fit ಕೀವರ್ಡ್ ಸ್ಕ್ರೀನ್ ಗಾತ್ರ ಮತ್ತು ಪ್ರತಿ ಉತ್ಪನ್ನ ಕಾರ್ಡ್‌ನೊಳಗಿನ ವಿಷಯದ ಆಧಾರದ ಮೇಲೆ ಪಟ್ಟಿಯು ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಹೊಂದಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಸುಧಾರಿತ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳ ನಿಜವಾದ ಶಕ್ತಿಯು ಸಂಕೀರ್ಣ ಮತ್ತು ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅವುಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಸಾಮರ್ಥ್ಯದಲ್ಲಿದೆ. fr, minmax(), ಮತ್ತು auto ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಸಾಂಪ್ರದಾಯಿಕ CSS ಲೇಔಟ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಹಿಂದೆ ಸಾಧಿಸಲಾಗದ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯ ಮಟ್ಟವನ್ನು ಸಾಧಿಸಬಹುದು.

ಉದಾಹರಣೆ: ರೆಸ್ಪಾನ್ಸಿವ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಲೇಔಟ್

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

            .dashboard-container {
 display: grid;
 grid-template-columns: 200px 1fr auto;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
 "header header header"
 "sidebar main right"
 "footer footer footer";
 height: 100vh; /* or however you want to handle your layout height */
}

header {
 grid-area: header;
 background-color: #f0f0f0;
 padding: 20px;
}

sidebar {
 grid-area: sidebar;
 background-color: #e0e0e0;
 padding: 20px;
}

main {
 grid-area: main;
 padding: 20px;
}

right {
 grid-area: right;
 background-color: #d0d0d0;
 padding: 20px;
}

footer {
 grid-area: footer;
 background-color: #f0f0f0;
 padding: 20px;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಸೈಡ್‌ಬಾರ್‌ಗೆ 200px ಸ್ಥಿರ ಅಗಲವಿದೆ, ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶವು ಉಳಿದ ಸ್ಥಳವನ್ನು (1fr) ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ಬಲ ಸೈಡ್‌ಬಾರ್ ಅದರ ವಿಷಯಕ್ಕೆ (auto) ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಹೆಡರ್ ಮತ್ತು ಫೂಟರ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ ಸಂಪೂರ್ಣ ಅಗಲದಾದ್ಯಂತ ಹರಡಿಕೊಂಡಿವೆ. ಈ ಲೇಔಟ್ ಹೆಚ್ಚು ರೆಸ್ಪಾನ್ಸಿವ್ ಆಗಿದೆ ಮತ್ತು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳು ಮತ್ತು ವಿಷಯ ವ್ಯತ್ಯಾಸಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. grid-template-areas ಹೆಸರಿಸಲಾದ ಗ್ರಿಡ್ ಪ್ರದೇಶಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಓದುವಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

CSS ಗ್ರಿಡ್ ಟ್ರ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಯೋಜಿಸಿ: ಯಾವುದೇ ಕೋಡ್ ಬರೆಯುವ ಮೊದಲು, ನಿಮ್ಮ ಲೇಔಟ್ ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಯೋಜಿಸಿ ಮತ್ತು ನಮ್ಯವಾಗಿರಬೇಕಾದ ಮತ್ತು ಸ್ಥಿರವಾಗಿರಬೇಕಾದ ಪ್ರದೇಶಗಳನ್ನು ಗುರುತಿಸಿ.
• ಸರಿಯಾದ ಯೂನಿಟ್‌ಗಳನ್ನು ಆರಿಸಿ: ಪ್ರತಿ ಟ್ರ್ಯಾಕ್‌ನ ನಿರ್ದಿಷ್ಟ ಅವಶ್ಯಕತೆಗಳ ಆಧಾರದ ಮೇಲೆ ಸೂಕ್ತವಾದ ಯೂನಿಟ್‌ಗಳನ್ನು (fr, px, em, auto) ಆಯ್ಕೆಮಾಡಿ.
• minmax() ಅನ್ನು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಬಳಸಿ: ಗಾತ್ರದ ನಿರ್ಬಂಧಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ವಿಷಯ ಉಕ್ಕಿ ಹರಿಯುವುದನ್ನು ತಡೆಯಲು minmax() ಬಳಸಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯವಾಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ಸ್ಕ್ರೀನ್ ಗಾತ್ರಗಳಲ್ಲಿ ಮತ್ತು ವಿಭಿನ್ನ ವಿಷಯ ಪ್ರಮಾಣಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.
• ಅಂತರರಾಷ್ಟ್ರೀಕರಣವನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವಾಗ ವಿಭಿನ್ನ ಭಾಷೆಗಳಲ್ಲಿ ಪಠ್ಯದ ಉದ್ದದಲ್ಲಿನ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳಿ.
• ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ: CSS ಗ್ರಿಡ್ ಬಳಸುವಾಗ ಯಾವಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ. ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ವಿಕಲಾಂಗ ವ್ಯಕ್ತಿಗಳಿಂದ ಬಳಸಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

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

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

ತೀರ್ಮಾನ

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