CSS ಗ್ರಿಡ್ ಜನರೇಟರ್ ಎಂದರೇನು?
"CSS ಗ್ರಿಡ್ ಜನರೇಟರ್" ಎನ್ನುವುದು ವೆಬ್ ವಿನ್ಯಾಸಕರು ಮತ್ತು ಡೆವಲಪರ್ಗಳಿಗಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ದೃಶ್ಯ ಸಾಧನವಾಗಿದೆ. ಈ ಉಪಕರಣದ ಸಹಾಯದಿಂದ ನೀವು ಕಾಲಂಗಳು ಮತ್ತು ರೋಗಳ ಸಂಖ್ಯೆಯನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ಅವುಗಳ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ಮತ್ತು ಅವುಗಳ ನಡುವಿನ ಗ್ಯಾಪ್ಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಮೂಲಕ CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ದೃಶ್ಯ ರೂಪದಲ್ಲಿ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು. ಗ್ರಿಡ್ನಾದ್ಯಂತ ಸೆಲ್ಗಳನ್ನು ಎಳೆಯುವ ಮೂಲಕ ನೀವು ಲೇಔಟ್ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಇರಿಸಬಹುದು. ಈ ಉಪಕರಣವು ನಿಮ್ಮ ವಿನ್ಯಾಸಕ್ಕೆ ಅನುಗುಣವಾಗಿ CSS ಮತ್ತು HTML ಕೋಡ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಚಿಸುತ್ತದೆ, ಇದನ್ನು ನೀವು ಸುಲಭವಾಗಿ ನಕಲಿಸಿ ನಿಮ್ಮ ಸ್ವಂತ ಪ್ರಾಜೆಕ್ಟ್ಗಳಲ್ಲಿ ಬಳಸಬಹುದು.
ಈ ಉಪಕರಣವು ಮುಖ್ಯವಾಗಿ ಈ ಕೆಳಗಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಿದೆ:
- CSS ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ತ್ವರಿತವಾಗಿ ಪ್ರೊಟೊಟೈಪ್ ಮಾಡಲು ಬಯಸುವವರಿಗೆ.
- ಹಸ್ತಚಾಲಿತವಾಗಿ ಕೋಡ್ ಬರೆಯದೆಯೇ ಗ್ರಿಡ್ ಲೇಔಟ್ಗಾಗಿ CSS ಮತ್ತು HTML ಅನ್ನು ರಚಿಸಲು ಬಯಸುವವರಿಗೆ.
- ವಿಭಿನ್ನ ಕಾಲಂ ಮತ್ತು ರೋ ಗಾತ್ರಗಳು ಗ್ರಿಡ್ ಲೇಔಟ್ ಮೇಲೆ ಹೇಗೆ ಪ್ರಭಾವ ಬೀರುತ್ತವೆ ಎಂಬುದನ್ನು ದೃಶ್ಯ ರೂಪದಲ್ಲಿ ನೋಡಲು ಬಯಸುವವರಿಗೆ.
- ಸೈಡ್ಬಾರ್, ಹೆಡರ್ ಮತ್ತು ಫುಟರ್, ಗ್ಯಾಲರಿ ಅಥವಾ ಡ್ಯಾಶ್ಬೋರ್ಡ್ ರಚನೆಯನ್ನು ಹೊಂದಿರುವ ಲೇಔಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ರಚಿಸಲು ಬಯಸುವವರಿಗೆ.
ಇನ್ಪುಟ್ಗಳು ಮತ್ತು ನಿಯಂತ್ರಣಗಳು
ನಿಮ್ಮ ಗ್ರಿಡ್ ವಿನ್ಯಾಸವನ್ನು ರೂಪಿಸಲು ಈ ಕೆಳಗಿನ ಇನ್ಪುಟ್ಗಳನ್ನು ಬಳಸಬಹುದು:
- ಕಾಲಂಗಳು: 1 ರಿಂದ 12 ರವರೆಗಿನ ಸಂಖ್ಯೆಯನ್ನು ಇಲ್ಲಿ ಹೊಂದಿಸಬಹುದು.
- ರೋಗಳು: 1 ರಿಂದ 12 ರವರೆಗಿನ ಸಂಖ್ಯೆಯನ್ನು ಇಲ್ಲಿ ಹೊಂದಿಸಬಹುದು.
- ಕಾಲಂ ಗ್ಯಾಪ್: 0 ರಿಂದ 48px ವರೆಗಿನ ಸಂಖ್ಯೆಯನ್ನು ಗ್ಯಾಪ್ ಆಗಿ ನೀಡಬಹುದು.
- ರೋ ಗ್ಯಾಪ್: 0 ರಿಂದ 48px ವರೆಗಿನ ಸಂಖ್ಯೆಯನ್ನು ಗ್ಯಾಪ್ ಆಗಿ ನೀಡಬಹುದು.
- ಕಾಲಂ ಗಾತ್ರಗಳು:
1fr,200px,auto,min-content, ಅಥವಾminmax(120px, 1fr)ನಂತಹ ಯಾವುದೇ ಮಾನ್ಯವಾದ CSS ಗ್ರಿಡ್ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಬಹುದು. - ರೋ ಗಾತ್ರಗಳು:
1fr,200px,auto,min-content, ಅಥವಾminmax(120px, 1fr)ನಂತಹ ಯಾವುದೇ ಮಾನ್ಯವಾದ CSS ಗ್ರಿಡ್ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಬಹುದು. - ಐಟಂ ಇರಿಸುವಿಕೆ: ಗ್ರಿಡ್ನ ಸೆಲ್ಗಳಾದ್ಯಂತ ಎಳೆಯುವ ಮೂಲಕ ಆಯತಾಕಾರದ ಪ್ರದೇಶವನ್ನು ಗುರುತಿಸಿ ಐಟಂಗಳನ್ನು ಇರಿಸಬಹುದು.
ಕಾರ್ಯನಿರ್ವಹಣೆಯ ನಿಯಮಗಳು ಮತ್ತು ಮಿತಿಗಳು
ಈ ಉಪಕರಣವನ್ನು ಬಳಸುವಾಗ ಕೆಲವು ಪ್ರಮುಖ ನಿಯಮಗಳು ಮತ್ತು ಮಿತಿಗಳನ್ನು ಗಮನಿಸಬೇಕು:
- ಸೆಲ್ಗಳ ಮೇಲೆ ಒತ್ತಿ ಹಿಡಿದು ಎಳೆಯುವ ಮೂಲಕ ಆಯತಾಕಾರದ ಆಕಾರವನ್ನು ಗುರುತಿಸಿ ಮೌಸ್ ಬಿಟ್ಟಾಗ, ಆಯ್ದ ಕಾಲಂಗಳು ಮತ್ತು ರೋಗಳನ್ನು ಆವರಿಸುವ ಒಂದು ಚೈಲ್ಡ್ ಐಟಂ ರಚನೆಯಾಗುತ್ತದೆ.
- ನೀವು ರಚಿಸುವ ಪ್ರತಿ ಐಟಂ CSS ನಲ್ಲಿ ತನ್ನದೇ ಆದ
grid-columnಮತ್ತುgrid-rowನಿಯಮವನ್ನು ಹಾಗೂ HTML ನಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯಾಗುವdivಅನ್ನು ಪಡೆಯುತ್ತದೆ. - ಐಟಂಗಳು ಒಂದರ ಮೇಲೊಂದು ಬರಬಹುದು (ಓವರ್ಲ್ಯಾಪ್ ಆಗಬಹುದು); ನಂತರ ರಚಿಸಲಾದ ಐಟಂ ಮೇಲ್ಭಾಗದಲ್ಲಿರುತ್ತದೆ.
- ಐಟಂ ಮೇಲಿರುವ "×" ಗುರುತನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಆ ಐಟಂ ಅನ್ನು ತೆಗೆದುಹಾಕಬಹುದು.
- ಪ್ರತಿ ಟ್ರ್ಯಾಕ್ (ಕಾಲಂ ಅಥವಾ ರೋ) ತನ್ನದೇ ಆದ ಗಾತ್ರದ ಬಾಕ್ಸ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಅಲ್ಲಿ ನೀವು ಯಾವುದೇ ಗ್ರಿಡ್ ಮೌಲ್ಯವನ್ನು ಟೈಪ್ ಮಾಡಬಹುದು.
- ಒಂದೇ ಗಾತ್ರವನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಟ್ರ್ಯಾಕ್ಗಳನ್ನು ಔಟ್ಪುಟ್ CSS ನಲ್ಲಿ
repeat()ನಿಯಮದ ಅಡಿಯಲ್ಲಿ ಸಂಯೋಜಿಸಲಾಗುತ್ತದೆ. - ಕಾಲಂ ಗ್ಯಾಪ್ ಮತ್ತು ರೋ ಗ್ಯಾಪ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಹೊಂದಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅವುಗಳ ಮೌಲ್ಯಗಳು ಒಂದೇ ಆಗಿದ್ದಾಗ ಔಟ್ಪುಟ್ CSS ನಲ್ಲಿ ಅವು ಒಂದೇ
gapಪ್ರಾಪರ್ಟಿಯಾಗಿ ಕುಗ್ಗುತ್ತವೆ. - ಈ ಉಪಕರಣವು ಗರಿಷ್ಠ 16 ಐಟಂಗಳನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತದೆ.
- ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಕ್ಕಾಗಿ
not-a-grid-trackನಂತಹ ಅಮಾನ್ಯ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಿದರೆ, ಇನ್ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಅಮಾನ್ಯ ಎಂದು ಗುರುತಿಸಲಾಗುತ್ತದೆ, ಆದರೆ CSS ಔಟ್ಪುಟ್ ಕೊನೆಯದಾಗಿ ನಮೂದಿಸಲಾದ ಮಾನ್ಯ ಮೌಲ್ಯವನ್ನೇ ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ. - "ಐಟಂಗಳನ್ನು ತೆರವುಗೊಳಿಸಿ" ಆಯ್ಕೆಯನ್ನು ಬಳಸಿದಾಗ HTML ಕಂಟೇನರ್ ಖಾಲಿಯಾಗುತ್ತದೆ ಮತ್ತು ಐಟಂಗಳ ಸಂಖ್ಯೆ 0 ಆಗುತ್ತದೆ.
- "ಐಟಂ ಸೇರಿಸಿ" ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಒಂದು HTML ಐಟಂ ರಚನೆಯಾಗುತ್ತದೆ.
ಲೇಔಟ್ ಪ್ರಿಸೆಟ್ಗಳು
ಬಳಕೆದಾರರ ಅನುಕೂಲಕ್ಕಾಗಿ ಈ ಉಪಕರಣವು ಕೆಲವು ಸಿದ್ಧ ಲೇಔಟ್ ಪ್ರಿಸೆಟ್ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅವುಗಳೆಂದರೆ:
- ಸೈಡ್ಬಾರ್
- ಹೆಡರ್ ಮತ್ತು ಫುಟರ್
- ಗ್ಯಾಲರಿ: ಈ ಪ್ರಿಸೆಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿದಾಗ ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ 3 ಕಾಲಂಗಳು, 2 ರೋಗಳು ಮತ್ತು 3 ಐಟಂಗಳನ್ನು ರಚಿಸುತ್ತದೆ.
- ಡ್ಯಾಶ್ಬೋರ್ಡ್
ಔಟ್ಪುಟ್ ಮತ್ತು ಕೋಡ್ ಉತ್ಪಾದನೆ
ನಿಮ್ಮ ವಿನ್ಯಾಸ ಪೂರ್ಣಗೊಂಡ ನಂತರ, ಉಪಕರಣವು ಈ ಕೆಳಗಿನ ಔಟ್ಪುಟ್ಗಳನ್ನು ನೀಡುತ್ತದೆ:
- CSS: ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಮತ್ತು ಅದರಲ್ಲಿ ಇರಿಸಲಾದ ಪ್ರತಿ ಐಟಂಗೆ ಅಗತ್ಯವಿರುವ CSS ಕೋಡ್.
- HTML: ಗ್ರಿಡ್ ಕಂಟೇನರ್ ಮತ್ತು ಪ್ರತಿ ಐಟಂಗೆ ಹೊಂದಿಕೆಯಾಗುವ
divಎಲಿಮೆಂಟ್ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ HTML ಕೋಡ್.
ಗೌಪ್ಯತೆ ಮತ್ತು ಡೇಟಾ ಸಂಸ್ಕರಣೆ
ನಿಮ್ಮ ವಿನ್ಯಾಸದ ಸುರಕ್ಷತೆ ಮತ್ತು ಗೌಪ್ಯತೆಗೆ ಇಲ್ಲಿ ಆದ್ಯತೆ ನೀಡಲಾಗಿದೆ. ನಿಮ್ಮ ಗ್ರಿಡ್ ಅನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲೇ ನಿರ್ಮಿಸಲಾಗುತ್ತದೆ. ನೀವು ಈ ಉಪಕರಣದಲ್ಲಿ ಹೊಂದಿಸುವ ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು BroBroGo ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆಗಳು (FAQ)
ಗ್ರಿಡ್ನಲ್ಲಿ ಐಟಂಗಳನ್ನು ಇರಿಸುವುದು ಹೇಗೆ?
ಸೆಲ್ಗಳ ಮೇಲೆ ಒತ್ತಿ ಹಿಡಿದು ಎಳೆಯುವ ಮೂಲಕ ಆಯತಾಕಾರದ ಆಕಾರವನ್ನು ಗುರುತಿಸಿ — ನೀವು ಕೈಬಿಟ್ಟಾಗ ಅದು ಆ ಕಾಲಂಗಳು ಮತ್ತು ರೋಗಳನ್ನು ಆವರಿಸುವ ಚೈಲ್ಡ್ ಎಲಿಮೆಂಟ್ ಆಗಿ ಬದಲಾಗುತ್ತದೆ. ನೀವು ರಚಿಸುವ ಪ್ರತಿ ಐಟಂ CSS ನಲ್ಲಿ ತನ್ನದೇ ಆದ grid-column ಮತ್ತು grid-row ನಿಯಮವನ್ನು ಹಾಗೂ HTML ನಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯಾಗುವ div ಅನ್ನು ಪಡೆಯುತ್ತದೆ. ಐಟಂಗಳು ಒಂದರ ಮೇಲೊಂದು ಬರಬಹುದು, ಮತ್ತು ನಂತರ ರಚಿಸಿದ ಐಟಂ ಮೇಲ್ಭಾಗದಲ್ಲಿರುತ್ತದೆ; ಐಟಂ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಅದರ ಮೇಲಿರುವ × ಗುರುತನ್ನು ಬಳಸಿ.
ಕಾಲಂಗಳು ಮತ್ತು ರೋಗಳು ವಿಭಿನ್ನ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿರಬಹುದೇ?
ಹೌದು. ಪ್ರತಿ ಟ್ರ್ಯಾಕ್ ತನ್ನದೇ ಆದ ಗಾತ್ರದ ಬಾಕ್ಸ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ನೀವು ಅಲ್ಲಿ ಯಾವುದೇ ಗ್ರಿಡ್ ಮೌಲ್ಯವನ್ನು ಟೈಪ್ ಮಾಡಬಹುದು — 1fr, 200px, auto, min-content ಅಥವಾ minmax(120px, 1fr). ಒಂದೇ ಗಾತ್ರವನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಟ್ರ್ಯಾಕ್ಗಳನ್ನು repeat() ನಲ್ಲಿ ಸಂಯೋಜಿಸಲಾಗುತ್ತದೆ ಇದರಿಂದ ಔಟ್ಪುಟ್ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ. ಕಾಲಂ ಗ್ಯಾಪ್ ಮತ್ತು ರೋ ಗ್ಯಾಪ್ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಹೊಂದಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅವು ಹೊಂದಿಕೆಯಾದಾಗ ಒಂದೇ gap ಆಗಿ ಕುಗ್ಗುತ್ತವೆ.
ರಚಿಸಲಾದ ಕೋಡ್ ಅನ್ನು ನಾನು ಏನು ಮಾಡಬೇಕು?
CSS ಮತ್ತು HTML ಕೋಡ್ಗಳನ್ನು ಪಕ್ಕಪಕ್ಕದಲ್ಲೇ ನಕಲಿಸಿ. HTML ನಿಮಗೆ ಪ್ರತಿ ಐಟಂಗೆ ಒಂದೊಂದು div ಇರುವ ಕಂಟೇನರ್ ಅನ್ನು ನೀಡುತ್ತದೆ, ಮತ್ತು CSS ಗ್ರಿಡ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಹಾಗೂ ಪ್ರತಿ ಐಟಂ ಅನ್ನು ಇರಿಸುತ್ತದೆ. ಎರಡನ್ನೂ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಪೇಸ್ಟ್ ಮಾಡಿ ಮತ್ತು ನೀವು ಇಲ್ಲಿ ರಚಿಸಿದ ಲೇಔಟ್ ಅನ್ನೇ ಪಡೆಯಿರಿ.