LibraTool logoLibraTool

ಉಚಿತ CSS ಗ್ರಿಡ್ ಜನರೇಟರ್

CSS ಗ್ರಿಡ್ ಅನ್ನು ದೃಷ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ — ಟ್ರ್ಯಾಕ್‌ಗಳು, ಯುನಿಟ್‌ಗಳು ಮತ್ತು ಗ್ಯಾಪ್‌ಗಳು — ಮತ್ತು ಜನರೇಟ್ ಆದ CSS ಹಾಗೂ HTML ಅನ್ನು ಕಾಪಿ ಮಾಡಿ.

ಒಮ್ಮೆ ಲೋಡ್ ಆದ ನಂತರ ಆಫ್‌ಲೈನ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಪ್ರೀಸೆಟ್‌ಗಳು
ಕಾಲಮ್‌ಗಳು (3)
ಸಾಲುಗಳು (2)
ಲೈವ್ ಪ್ರಿವ್ಯೂ
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 ಎಲ್ಲವೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ರನ್ ಆಗುತ್ತದೆ — ಏನೂ ಅಪ್‌ಲೋಡ್ ಆಗುವುದಿಲ್ಲ.

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

CSS ಗ್ರಿಡ್ ಅನ್ನು ದೃಶ್ಯವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಿ: 8 ಕಾಲಂಗಳು ಮತ್ತು 8 ಸಾಲುಗಳವರೆಗೆ ಸೇರಿಸಿ, ಪ್ರತಿ ಟ್ರ್ಯಾಕ್ ಅನ್ನು fr, px, auto ಅಥವಾ min/max-content ಗೆ ಹೊಂದಿಸಿ, ಮತ್ತು ಸಾಲು/ಕಾಲಂ ಅಂತರ ಹೊಂದಿಸಿ. ಸಂಖ್ಯಿತ ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ ತಕ್ಷಣ ನವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಉತ್ಪಾದಿಸಿದ grid-template CSS ಜೊತೆಗೆ ಹೊಂದಾಣಿಕೆಯ HTML ನಿಮ್ಮ ಕ್ಲಿಪ್‌ಬೋರ್ಡ್‌ನಿಂದ ಒಂದೇ ಕ್ಲಿಕ್ ದೂರದಲ್ಲಿದೆ.

  1. 1
    ಗ್ರಿಡ್ ಆಕಾರ ಮಾಡಿ
    + ಮತ್ತು − ನೊಂದಿಗೆ ಕಾಲಂಗಳು ಮತ್ತು ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ/ತೆಗೆದುಹಾಕಿ.
  2. 2
    ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಹೊಂದಿಸಿ
    ಪ್ರತಿ ಕಾಲಂ ಮತ್ತು ಸಾಲು ತನ್ನದೇ ಘಟಕ ಪಡೆಯುತ್ತದೆ (1fr, 100px, auto…).
  3. 3
    ಅಂತರಗಳನ್ನು ಟ್ಯೂನ್ ಮಾಡಿ
    ಪ್ರತ್ಯೇಕ row-gap ಮತ್ತು column-gap ಸ್ಲೈಡರ್‌ಗಳು.
  4. 4
    ಕೋಡ್ ನಕಲಿಸಿ
    ಉತ್ಪಾದನೆ-ಸಿದ್ಧ CSS ಮತ್ತು ಹೊಂದಾಣಿಕೆಯ HTML ಸ್ಕೆಲಿಟನ್.

ಎಲ್ಲವೂ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ — ಏನೂ ಅಪ್‌ಲೋಡ್ ಆಗುವುದಿಲ್ಲ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು

↔️

CSS ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಜನರೇಟರ್

ಲೈವ್ ಐಟಂಗಳ ಮೇಲೆ ಫ್ಲೆಕ್ಸ್ ಡೈರೆಕ್ಷನ್, ವ್ರ್ಯಾಪ್, ಜಸ್ಟಿಫೈ ಮತ್ತು ಅಲೈನ್ ಅನ್ನು ಪ್ರಯೋಗಿಸಿ — ಮತ್ತು CSS ಕಾಪಿ ಮಾಡಿ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ
📐

CSS clamp() ಜನರೇಟರ್

ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಸ್ಪೇಸಿಂಗ್‌ಗಾಗಿ ಫ್ಲುಯಿಡ್ CSS clamp() ಮೌಲ್ಯ ರಚಿಸಿ. ಕನಿಷ್ಠ/ಗರಿಷ್ಠ ಗಾತ್ರ ಮತ್ತು ವ್ಯೂಪೋರ್ಟ್ ವ್ಯಾಪ್ತಿ ಹೊಂದಿಸಿ, ಲೈವ್ ಪೂರ್ವವೀಕ್ಷಣೆ ನೋಡಿ, ಮತ್ತು ಒಂದು-ಸಾಲಿನ CSS ನಕಲಿಸಿ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ
🧾

ಇನ್‌ವಾಯ್ಸ್ ಜನರೇಟರ್

ವೃತ್ತಿಪರ ಇನ್‌ವಾಯ್ಸ್ ರಚಿಸಿ ಸ್ಪಷ್ಟ PDF ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ — ಸಾಲಿನ ಐಟಂಗಳು, ತೆರಿಗೆ, ರಿಯಾಯಿತಿ, ಬಹು-ಕರೆನ್ಸಿ. ಸೈನ್-ಅಪ್ ಇಲ್ಲ, ಅಪ್‌ಲೋಡ್ ಇಲ್ಲ, ಡ್ರಾಫ್ಟ್ ಸ್ಥಳೀಯವಾಗಿ ಉಳಿಸಲಾಗುತ್ತದೆ.

ಇದನ್ನು ಪ್ರಯತ್ನಿಸಿ

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು