𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
ನಿಮ್ಮ CSS ಲೇಔಟ್ಗಳೊಂದಿಗೆ ಹೋರಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ.
ನಾನು Flexbox ಬಳಸಿ ಹಾಳಾದ ಲೇಔಟ್ಗಳನ್ನು ಸರಿಪಡಿಸಲು ಗಂಟೆಗಟ್ಟಲೆ ಸಮಯ ವ್ಯರ್ಥ ಮಾಡುತ್ತಿದ್ದೆ. ಐಟಂಗಳನ್ನು ಒಂದು ಸಾಲಿನಲ್ಲಿ ಜೋಡಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದೆ, ಆದರೆ ಕೊನೆಯ ಐಟಂ ಇಡೀ ಪರದೆಯನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳುತ್ತಿತ್ತು. ಅದು ನೋಡಲು ಸರಿಯಾಗಿ ಕಾಣುತ್ತಿರಲಿಲ್ಲ. ನಾನು ಮಾರ್ಜಿನ್ಗಳು ಮತ್ತು ಇತರ ತಂತ್ರಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿದೆ, ಆದರೆ ಯಾವುದೂ ಕೆಲಸ ಮಾಡಲಿಲ್ಲ.
ನಂತರ ನಾನು ನನ್ನ ಮನಸ್ಥಿತಿಯನ್ನು CSS Grid ಕಡೆಗೆ ಬದಲಾಯಿಸಿದೆ.
ವ್ಯತ್ಯಾಸವು ಸರಳವಾಗಿದೆ:
- Flexbox ಎಂಬುದು ಒಂದು-ಆಯಾಮದ (one-dimensional) ಲೇಔಟ್ಗಳಿಗಾಗಿ. ಇದನ್ನು ಒಂದು ಸಾಲು ಅಥವಾ ಒಂದು ಕಾಲಂಗಾಗಿ ಬಳಸಿ.
- CSS Grid ಎಂಬುದು ಎರಡು-ಆಯಾಮದ (two-dimensional) ಲೇಔಟ್ಗಳಿಗಾಗಿ. ನೀವು ಏಕಕಾಲದಲ್ಲಿ ಸಾಲುಗಳು (rows) ಮತ್ತು ಕಾಲಂಗಳನ್ನು (columns) ನಿಯಂತ್ರಿಸಬೇಕಾದಾಗ ಇದನ್ನು ಬಳಸಿ.
Flexbox ಅನ್ನು ಸಣ್ಣ ಕೆಲಸಗಳಿಗಾಗಿ ಬಳಸುವ ಸಾಧನವೆಂದು ಭಾವಿಸಿ. Grid ಅನ್ನು ನಿಮ್ಮ ಇಡೀ ಪೇಜ್ ರಚನೆಗಾಗಿ ಬಳಸುವ ಸಾಧನವೆಂದು ಭಾವಿಸಿ.
Flexbox ಎಂಬ ಬಲೆ: ನೀವು ಗ್ಯಾಲರಿಗಾಗಿ Flexbox ಬಳಸಿದಾಗ, ಐಟಂಗಳು ಪ್ರತಿ ಸ್ಕ್ರೀನ್ ಗಾತ್ರದಲ್ಲೂ ಸರಿಯಾಗಿ ಜೋಡಣೆಯಾಗದಿರಬಹುದು. ವಿನ್ಯಾಸದ ಲಯವನ್ನು ಹಾಳುಮಾಡುವ "orphan" (ಒಂಟಿ) ಐಟಂಗಳು ಹೆಚ್ಚಾಗಿ ಕಂಡುಬರುತ್ತವೆ.
Grid ಪರಿಹಾರ: Grid ಬಳಸಿ, ನೀವು ಕೇವಲ ಒಂದು ಸಾಲಿನ ಕೋಡ್ನಲ್ಲಿ ರೆಸ್ಪಾನ್ಸಿವ್ ಗ್ಯಾಲರಿಗಳನ್ನು ರಚಿಸಬಹುದು.
ಇದನ್ನು ಬಳಸಿ: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
ಇದು ಸಾಧ್ಯವಾದಷ್ಟು ಹೆಚ್ಚು 250px ಕಾಲಂಗಳನ್ನು ಹೊಂದಿಸಲು ಬ್ರೌಸರ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ನಿಮಗಾಗಿ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಇನ್ನು ಮುಂದೆ ಊಹಾಪೋಹಗಳ ಅಗತ್ಯವಿಲ್ಲ. ಇನ್ನು ಮುಂದೆ ಹಾಳಾದ ಸಾಲುಗಳ ಕಾಟವಿಲ್ಲ.
ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಉದಾಹರಣೆ: ಸೈಡ್ಬಾರ್, ಮುಖ್ಯ ಕಂಟೆಂಟ್ ಮತ್ತು ಫುಟರ್ ಇರುವ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ಅನ್ನು Flexbox ಬಳಸಿ ನಿರ್ಮಿಸುವುದು ಕಷ್ಟ. ಫುಟರ್ ಇಡೀ ಅಗಲವನ್ನು ಆವರಿಸಲು ನೀವು ಹೆಚ್ಚಾಗಿ ನೆಸ್ಟೆಡ್ ಕಂಟೇನರ್ಗಳು ಮತ್ತು ಗೊಂದಲಮಯ ಕೋಡ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ.
Grid ಬಳಸಿ, ನೀವು ಟ್ರ್ಯಾಕ್ಗಳನ್ನು ಒಮ್ಮೆ ವ್ಯಾಖ್ಯಾನಿಸಿದರೆ ಸಾಕು: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
ಒಂದು ಕಮಾಂಡ್ ಬಳಸಿ ಫುಟರ್ ಅನ್ನು ಮೊದಲ ಕಾಲಂನಿಂದ ಕೊನೆಯ ಕಾಲಂವರೆಗೆ ವಿಸ್ತರಿಸಲು ನೀವು ಸೂಚಿಸಬಹುದು. ನಿಮ್ಮ ಕೋಡ್ ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಓದಲು ಸುಲಭವಾಗುತ್ತದೆ.
ನನ್ನ ಸಲಹೆ:
• ಹೆಡರ್ ಅಥವಾ ಬಟನ್ಗಳಲ್ಲಿ ಸರಳ ಜೋಡಣೆಗಾಗಿ Flexbox ಬಳಸಿ.
• ಮುಖ್ಯ ಪೇಜ್ ಲೇಔಟ್ಗಳು ಮತ್ತು ಸಂಕೀರ್ಣ ಗ್ಯಾಲರಿಗಳಿಗಾಗಿ Grid ಬಳಸಿ.
• ಕೇವಲ ಲೇಔಟ್ ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸಲು ಕಂಟೇನರ್ಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸಿ.
• ಜಾಗವನ್ನು ಸುಲಭವಾಗಿ ಹಂಚಿಕೆ ಮಾಡಲು fr ಯುನಿಟ್ ಬಳಸಿ.
ಇದನ್ನು ಇಂದು ಪ್ರಯತ್ನಿಸಿ. ನೀವು Flexbox ಬಳಸಿ ನಿರ್ಮಿಸಿದ ಹಳೆಯ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ. ಅದನ್ನು CSS Grid ಬಳಸಿ ಮರುಬರೆಯಿರಿ. ನಿಮ್ಮ ಕೋಡ್ ಚಿಕ್ಕದಾಗುವುದನ್ನು ಮತ್ತು ನಿಮ್ಮ ಲೇಔಟ್ಗಳು ಬಲಗೊಳ್ಳುವುದನ್ನು ನೀವು ನೋಡುವಿರಿ.