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 grid ਦ੍ਰਿਸ਼ਟੀਗਤ ਢੰਗ ਨਾਲ ਡਿਜ਼ਾਈਨ ਕਰੋ: 8 ਤੱਕ ਕਾਲਮ ਅਤੇ 8 ਕਤਾਰਾਂ ਜੋੜੋ, ਹਰ track ਨੂੰ fr, px, auto ਜਾਂ min/max-content 'ਤੇ ਸੈੱਟ ਕਰੋ, ਅਤੇ ਕਤਾਰ/ਕਾਲਮ ਵਿੱਥਾਂ ਬਦਲੋ। ਨੰਬਰ ਵਾਲੀ ਲਾਈਵ ਝਲਕ ਤੁਰੰਤ ਅੱਪਡੇਟ ਹੁੰਦੀ ਹੈ ਅਤੇ ਬਣੀ grid-template CSS ਅਤੇ ਮੇਲ ਖਾਂਦਾ HTML ਤੁਹਾਡੇ ਕਲਿੱਪਬੋਰਡ ਤੋਂ ਇੱਕ ਕਲਿੱਕ ਦੂਰ ਹਨ।

  1. 1
    Grid ਨੂੰ ਆਕਾਰ ਦਿਓ
    + ਅਤੇ − ਨਾਲ ਕਾਲਮ ਅਤੇ ਕਤਾਰਾਂ ਜੋੜੋ/ਹਟਾਓ।
  2. 2
    Tracks ਸੈੱਟ ਕਰੋ
    ਹਰ ਕਾਲਮ ਅਤੇ ਕਤਾਰ ਨੂੰ ਆਪਣੀ ਇਕਾਈ ਮਿਲਦੀ ਹੈ (1fr, 100px, auto…)।
  3. 3
    ਵਿੱਥਾਂ ਸੈੱਟ ਕਰੋ
    ਵੱਖਰੇ row-gap ਅਤੇ column-gap ਸਲਾਈਡਰ।
  4. 4
    ਕੋਡ ਕਾਪੀ ਕਰੋ
    Production ਲਈ ਤਿਆਰ CSS ਅਤੇ ਮੇਲ ਖਾਂਦਾ HTML ਢਾਂਚਾ।

ਸਭ ਕੁਝ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ — ਕੁਝ ਵੀ ਅੱਪਲੋਡ ਨਹੀਂ ਹੁੰਦਾ।

ਸੰਬੰਧਿਤ ਟੂਲ

↔️

CSS ਫਲੈਕਸਬਾਕਸ ਜਨਰੇਟਰ

ਲਾਈਵ ਆਈਟਮਾਂ 'ਤੇ ਫਲੈਕਸ ਦਿਸ਼ਾ, ਰੈਪ, ਜਸਟੀਫਾਈ ਅਤੇ ਅਲਾਈਨ ਨਾਲ ਤਜਰਬਾ ਕਰੋ — ਅਤੇ CSS ਕਾਪੀ ਕਰੋ।

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ
📐

CSS clamp() ਜਨਰੇਟਰ

ਰਿਸਪੌਂਸਿਵ ਟਾਈਪੋਗ੍ਰਾਫੀ ਅਤੇ ਸਪੇਸਿੰਗ ਲਈ ਫਲੂਇਡ CSS clamp() ਕੀਮਤ ਬਣਾਓ। ਘੱਟੋ-ਘੱਟ/ਵੱਧ ਤੋਂ ਵੱਧ ਸਾਈਜ਼ ਅਤੇ ਵਿਊਪੋਰਟ ਰੇਂਜ ਸੈੱਟ ਕਰੋ, ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਵੇਖੋ, ਅਤੇ ਇੱਕ-ਲਾਈਨ CSS ਕਾਪੀ ਕਰੋ।

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ
🧾

ਇਨਵਾਇਸ ਜਨਰੇਟਰ

ਇੱਕ ਪੇਸ਼ੇਵਰ ਇਨਵਾਇਸ ਬਣਾਓ ਅਤੇ ਸਾਫ਼ PDF ਡਾਊਨਲੋਡ ਕਰੋ — ਲਾਈਨ ਆਈਟਮਾਂ, ਟੈਕਸ, ਛੋਟ, ਮਲਟੀ-ਮੁਦਰਾ। ਕੋਈ ਸਾਈਨ-ਅੱਪ ਨਹੀਂ, ਕੋਈ ਅੱਪਲੋਡ ਨਹੀਂ, ਡਰਾਫਟ ਲੋਕਲੀ ਸੇਵ ਕੀਤਾ ਗਿਆ।

ਇਸ ਨੂੰ ਅਜ਼ਮਾਓ

ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ