CSS Grid ಎಂದರೇನು?
CSS Grid Layout ಆಧುನಿಕ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಅಂತರ್ನಿರ್ಮಿತ ಎರಡು-ಆಯಾಮದ ಲೇಔಟ್ ವ್ಯವಸ್ಥೆ. display: grid ಬಳಸಿ ಗ್ರಿಡ್ ಕಂಟೇನರ್ ವ್ಯಾಖ್ಯಾನಿಸಿ, ನಂತರ grid-template-columns ಮೂಲಕ ಕಾಲಮ್ಗಳನ್ನು ಮತ್ತು grid-template-rows ಮೂಲಕ ಸಾಲುಗಳನ್ನು ನಿಯಂತ್ರಿಸಿ. ಭಾಗ ಘಟಕಗಳು (fr) ಲಭ್ಯವಿರುವ ಸ್ಥಳವನ್ನು ಅನುಪಾತದಲ್ಲಿ ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ. ಮಕ್ಕಳ ಐಟಂಗಳು grid-column: span N ಮತ್ತು grid-row: span N ಬಳಸಿ ಹಲವು ಕಾಲಮ್ಗಳು ಅಥವಾ ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಬಹುದು.
CSS Grid ಜನರೇಟರ್ ಹೇಗೆ ಬಳಸಬೇಕು
-
ಸಂಖ್ಯಾ ಇನ್ಪುಟ್ಗಳನ್ನು (ಪ್ರತಿಯೊಂದು 1–12) ಬಳಸಿ ಕಾಲಮ್ಗಳು ಮತ್ತು ಸಾಲುಗಳ ಸಂಖ್ಯೆ ಹೊಂದಿಸಿ.
-
ಗಾತ್ರಗಳನ್ನು ನಿಯಂತ್ರಿಸಲು grid-template-columns ಮತ್ತು grid-template-rows ಸರಿಹೊಂದಿಸಿ (ಉದಾ: 1fr 2fr, 200px auto).
-
ಸೆಲ್ಗಳ ನಡುವೆ ಅಂತರ ಹೊಂದಿಸಿ (ಉದಾ: 10px, 1rem).
-
ಆಯ್ಕೆ ಮಾಡಲು ಪ್ರಿವ್ಯೂನಲ್ಲಿ ಯಾವುದೇ ಸೆಲ್ ಕ್ಲಿಕ್ ಮಾಡಿ (ಕಿತ್ತಳೆ ಬಣ್ಣವಾಗುತ್ತದೆ).
-
ಸೆಲ್ ಸ್ಪ್ಯಾನ್ ಪ್ಯಾನೆಲ್ನಲ್ಲಿ col-span ಮತ್ತು row-span ಹೊಂದಿಸಿ, ನಂತರ ಅನ್ವಯಿಸಿ ಕ್ಲಿಕ್ ಮಾಡಿ. ಸ್ಪ್ಯಾನ್ ಸೆಲ್ಗಳು ಹಸಿರಾಗುತ್ತವೆ.
-
ಔಟ್ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್ ಬದಲಾಯಿಸಲು CSS ಅಥವಾ HTML ಟ್ಯಾಬ್ ಕ್ಲಿಕ್ ಮಾಡಿ, ನಂತರ ಕ್ಲಿಪ್ಬೋರ್ಡ್ಗೆ ನಕಲಿಸಿ.
-
ಹೊಸ 3×3 ಗ್ರಿಡ್ನೊಂದಿಗೆ ಮತ್ತೆ ಪ್ರಾರಂಭಿಸಲು ಎಲ್ಲವನ್ನೂ ಮರುಹೊಂದಿಸಿ ಕ್ಲಿಕ್ ಮಾಡಿ.