🔧 NavajaSuiza

CSS Grid Generator

Generate CSS grid layouts with visual preview

tools.gridGenerator.title

tools.gridGenerator.description

tools.gridGenerator.configuration

tools.gridGenerator.preview

1
2
3
4
5
6
7
8
9

tools.gridGenerator.cssCode

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
justify-content: stretch;
align-content: stretch;

ਗ੍ਰਿਡ ਜੇਨਰੇਟਰ ਵਿਜ਼ੂਅਲ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਦੇ ਨਾਲ ਵੈਬ ਡਿਜ਼ਾਈਨ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਸੰਪੂਰਨ CSS ਗਰਿੱਡ ਲੇਆਉਟ ਬਣਾਉਂਦਾ ਹੈ। ਲਾਈਵ ਪੂਰਵਦਰਸ਼ਨ ਨਾਲ ਕਾਲਮ, ਕਤਾਰਾਂ, ਅੰਤਰਾਲ ਅਤੇ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ। ਡਿਵੈਲਪਰਾਂ, ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਵੈਬ ਬਿਲਡਰਾਂ ਲਈ ਸੰਪੂਰਨ ਜੋ ਜਵਾਬਦੇਹ ਗਰਿੱਡ ਲੇਆਉਟ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਲਾਗੂ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ। ਉਤਪਾਦਨ ਲਈ ਤਿਆਰ CSS ਕੋਡ ਨੂੰ ਤੁਰੰਤ ਕਾਪੀ ਕਰੋ।

Key Features

ਵਿਜ਼ੂਅਲ ਗਰਿੱਡ ਲੇਆਉਟ ਬਿਲਡਰ

ਅਨੁਕੂਲਿਤ ਕਾਲਮ ਅਤੇ ਕਤਾਰਾਂ

ਅਡਜੱਸਟੇਬਲ ਗੈਪ ਸਪੇਸਿੰਗ

ਅਲਾਈਨਮੈਂਟ ਵਿਕਲਪ

ਟੈਂਪਲੇਟ ਪ੍ਰੀਸੈਟਸ

ਜਵਾਬਦੇਹ ਬਰੇਕਪੁਆਇੰਟ ਸੈੱਟਅੱਪ

ਰੀਅਲ-ਟਾਈਮ CSS ਪ੍ਰੀਵਿਊ

ਕੋਡ ਨੂੰ ਤੁਰੰਤ ਕਾਪੀ ਕਰੋ

ਮੋਬਾਈਲ ਜਵਾਬਦੇਹ ਟੈਂਪਲੇਟਸ

ਡਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਇੰਟਰਫੇਸ

ਗਰਿੱਡ ਜੇਨਰੇਟਰ

1

ਕਾਲਮ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ

ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਅਤੇ ਉਹਨਾਂ ਦੇ ਆਕਾਰ (ਸਥਿਰ ਪਿਕਸਲ, ਫਰੈਕਸ਼ਨ, ਜਾਂ ਆਟੋ) ਸੈੱਟ ਕਰੋ।

2

ਕਤਾਰ ਦੀ ਉਚਾਈ ਸੈੱਟ ਕਰੋ

ਲਚਕਦਾਰ ਲੇਆਉਟ ਲਈ ਕਤਾਰ ਦੀ ਉਚਾਈ ਅਤੇ ਆਟੋਮੈਟਿਕ ਕਤਾਰ ਆਕਾਰ ਨੂੰ ਕੌਂਫਿਗਰ ਕਰੋ।

3

ਪਾੜੇ ਜੋੜੋ

ਗਰਿੱਡ ਆਈਟਮਾਂ ਵਿਚਕਾਰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਅੰਤਰਾਲ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ।

4

ਅਲਾਈਨਮੈਂਟ ਚੁਣੋ

ਆਪਣੀਆਂ ਗਰਿੱਡ ਆਈਟਮਾਂ ਲਈ ਅਲਾਈਨਮੈਂਟ ਅਤੇ ਜਾਇਜ਼ਤਾ ਵਿਕਲਪ ਚੁਣੋ।

5

CSS ਕਾਪੀ ਕਰੋ

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਰਤੋਂ ਲਈ ਤਿਆਰ CSS ਗਰਿੱਡ ਕੋਡ ਨੂੰ ਕਾਪੀ ਕਰੋ।

Use Cases

ਜਵਾਬਦੇਹ ਪੰਨਾ ਲੇਆਉਟ ਬਣਾਓ

ਡਿਜ਼ਾਈਨ ਡੈਸ਼ਬੋਰਡ ਗਰਿੱਡ

ਚਿੱਤਰ ਗੈਲਰੀ ਲੇਆਉਟ ਬਣਾਓ

ਉਤਪਾਦ ਸੂਚੀਕਰਨ ਗਰਿੱਡ ਬਣਾਓ

ਕਾਰਡ-ਆਧਾਰਿਤ ਲੇਆਉਟ ਡਿਜ਼ਾਈਨ ਕਰੋ

ਬਹੁ-ਕਾਲਮ ਸਮੱਗਰੀ ਬਣਾਓ

ਚਿਣਾਈ-ਸ਼ੈਲੀ ਦੇ ਖਾਕੇ ਬਣਾਓ

ਪੋਰਟਫੋਲੀਓ ਗਰਿੱਡ ਬਣਾਓ

ਡਿਜ਼ਾਈਨ ਫਾਰਮ ਲੇਆਉਟ

ਜਵਾਬਦੇਹ ਟੈਮਪਲੇਟ ਬਣਾਓ

Frequently Asked Questions

CSS ਗਰਿੱਡ ਕੋਲ ਕਿਹੜਾ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਹੈ?

CSS ਗਰਿੱਡ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਹੈ। IE11 ਵਰਗੇ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਕੋਲ ਸੀਮਤ ਸਮਰਥਨ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਫਾਲਬੈਕ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।

ਮੈਂ ਆਪਣੇ ਗਰਿੱਡ ਨੂੰ ਜਵਾਬਦੇਹ ਕਿਵੇਂ ਬਣਾਵਾਂ?

ਜਵਾਬਦੇਹ ਡਿਜ਼ਾਈਨ ਲਈ ਵੱਖ-ਵੱਖ ਬ੍ਰੇਕਪੁਆਇੰਟਾਂ 'ਤੇ ਕਾਲਮ ਅਤੇ ਕਤਾਰ ਸੈਟਿੰਗਾਂ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਕੀ ਮੈਂ Flexbox ਨਾਲ CSS ਗਰਿੱਡ ਨੂੰ ਜੋੜ ਸਕਦਾ ਹਾਂ?

ਹਾਂ, ਤੁਸੀਂ ਸਮੁੱਚੇ ਲੇਆਉਟ ਲਈ CSS ਗਰਿੱਡ ਅਤੇ ਵਿਅਕਤੀਗਤ ਗਰਿੱਡ ਆਈਟਮਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨ ਲਈ Flexbox ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।

Tool Information

Category
Palette Design and Color Tools
Type
Processed in browser
Tags

📤 Share This Tool

CSS Grid Generator - Gratis Online | NavajaSuiza Digital