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 ਦੀ ਜਾਂਚ ਕਰੋ (ਰੀਸੈੱਟ, ਵਿਰਾਸਤੀ ਰੰਗ)। ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਨਿਯਮ ਨੂੰ ਇੱਕ ਅਲੱਗ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।

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

ਕੀ ਇਹ ਮੇਰਾ CSS ਅੱਪਲੋਡ ਕਰਦਾ ਹੈ?

ਨਹੀਂ। ਜਨਰੇਟਰ ਅਤੇ ਕਨਵਰਟਰ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਚੱਲਦੇ ਹਨ।

ਕੀ ਮੈਨੂੰ ਇੱਕ ਖਾਤੇ ਦੀ ਲੋੜ ਹੈ?

ਨਹੀਂ। ਟੂਲ ਖੋਲ੍ਹੋ, ਨਿਯੰਤਰਣ ਬਦਲੋ, ਅਤੇ CSS ਦੀ ਨਕਲ ਕਰੋ।