CSS ಗ್ರಿಡ್ ಜನರೇಟರ್

ಕಾಲಮ್‌ಗಳು, ಸಾಲುಗಳು ಮತ್ತು ಅಂತರವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ವಿವರಿಸಿ, ನಂತರ ನಿಮ್ಮ ಲೇಔಟ್‌ಗಾಗಿ CSS ಗ್ರಿಡ್ ಟೆಂಪ್ಲೇಟ್ ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿ.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

ಕಾಲಮ್‌ಗಳು, ಸಾಲುಗಳು ಮತ್ತು ಅಂತರವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ವಿವರಿಸಿ, ನಂತರ CSS ಗ್ರಿಡ್ ಟೆಂಪ್ಲೇಟ್ ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿ.
ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಆಗುತ್ತದೆ
ಬಳಸಲು ಉಚಿತ

ಹೇಗೆ ಬಳಸುವುದು

ಕಾಲಮ್ ಮತ್ತು ಸಾಲು ಎಣಿಕೆಗಳನ್ನು ಹೊಂದಿಸಿ.
ಟ್ಯೂನ್ ಅಂತರ ಮತ್ತು ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ.
ಗ್ರಿಡ್ CSS ಅನ್ನು ನಕಲಿಸಿ.

How this tool works

ಕಾಲಮ್ ಮತ್ತು ಸಾಲು ಎಣಿಕೆಗಳನ್ನು ಹೊಂದಿಸಿ.
ಟ್ಯೂನ್ ಅಂತರ ಮತ್ತು ಟ್ರ್ಯಾಕ್ ಗಾತ್ರ.
ಗ್ರಿಡ್ CSS ಅನ್ನು ನಕಲಿಸಿ.

Recommended settings

ಮೊದಲು ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿ, ನಂತರ ಅಗತ್ಯವಿದ್ದರೆ ಹೊಂದಿಸಿ

Supported formats

Text / on-page input

File size and limits

ಬಹಳ ಸಂಕೀರ್ಣವಾದ ಬಹು-ಪದರದ ಪೂರ್ವವೀಕ್ಷಣೆಗಳು ಹಳೆಯ ಫೋನ್‌ಗಳಲ್ಲಿ ನಿಧಾನವಾಗಬಹುದು.

Privacy

ಬಣ್ಣ ಮತ್ತು CSS ಜನರೇಟರ್‌ಗಳು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ರನ್ ಆಗುತ್ತವೆ. ಪೂರ್ವವೀಕ್ಷಣೆಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ಎಂದಿಗೂ ಅಪ್‌ಲೋಡ್ ಮಾಡುವುದಿಲ್ಲ.

Common use cases

ನಿಮಗೆ ಅಗತ್ಯವಿರುವಾಗ CSS ಗ್ರಿಡ್ ಜನರೇಟರ್ ಅನ್ನು ಬಳಸಿ: ಕಾಲಮ್‌ಗಳು, ಸಾಲುಗಳು ಮತ್ತು ಅಂತರವನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ವಿವರಿಸಿ, ನಂತರ CSS ಗ್ರಿಡ್ ಟೆಂಪ್ಲೇಟ್ ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿ.

Troubleshooting

ಪೇಸ್ಟ್ ಮಾಡಿದ ನಂತರ ಪೂರ್ವವೀಕ್ಷಣೆ ವಿಭಿನ್ನವಾಗಿ ಕಾಣುತ್ತದೆ

ನಿಮ್ಮ ಪುಟದಲ್ಲಿ ಸ್ಪರ್ಧಾತ್ಮಕ CSS ಅನ್ನು ಪರಿಶೀಲಿಸಿ (ಮರುಹೊಂದಿಕೆಗಳು, ಆನುವಂಶಿಕ ಬಣ್ಣಗಳು). ರಚಿಸಲಾದ ನಿಯಮವನ್ನು ಮೊದಲು ಪ್ರತ್ಯೇಕವಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗೆ ನಕಲಿಸಿ.

FAQ

ಇದು ನನ್ನ CSS ಅನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆಯೇ?

ಇಲ್ಲ. ಜನರೇಟರ್‌ಗಳು ಮತ್ತು ಪರಿವರ್ತಕಗಳು ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆಯೊಂದಿಗೆ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಆಗುತ್ತವೆ.

ನನಗೆ ಖಾತೆ ಬೇಕೇ?

ಇಲ್ಲ. ಉಪಕರಣವನ್ನು ತೆರೆಯಿರಿ, ನಿಯಂತ್ರಣಗಳನ್ನು ಟ್ವೀಕ್ ಮಾಡಿ ಮತ್ತು CSS ಅನ್ನು ನಕಲಿಸಿ.