CSS ਗਰਿੱਡ ਲੇਆਉਟ ਦੀ ਜਾਣ-ਪਛਾਣ
CSS ਗਰਿੱਡ ਲੇਆਉਟ ਵੈੱਬ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਦੋ-ਪਾਸਾਰੀ (two-dimensional) ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਇੱਕ ਬਹੁਤ ਹੀ ਸ਼ਕਤੀਸ਼ਾਲੀ ਪ੍ਰਣਾਲੀ ਹੈ। ਇਸ ਪ੍ਰਣਾਲੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਪੇਜ ਦੇ ਤੱਤਾਂ ਨੂੰ ਕਾਲਮਾਂ ਅਤੇ ਰੋਅ ਦੇ ਰੂਪ ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰ ਸਕਦੇ ਹੋ। "CSS ਗਰਿੱਡ ਜਨਰੇਟਰ" ਇੱਕ ਵਿਜ਼ੂਅਲ ਟੂਲ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਬਿਨਾਂ ਕੋਡ ਲਿਖੇ ਗਰਿੱਡ ਲੇਆਉਟ ਡਿਜ਼ਾਈਨ ਕਰਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦਾ ਹੈ। ਤੁਸੀਂ ਕਾਲਮਾਂ ਅਤੇ ਰੋਅ ਦੀ ਗਿਣਤੀ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ, ਉਹਨਾਂ ਦੇ ਆਕਾਰ ਬਦਲ ਸਕਦੇ ਹੋ, ਅਤੇ ਆਈਟਮਾਂ ਨੂੰ ਸਿੱਧਾ ਗਰਿੱਡ 'ਤੇ ਰੱਖ ਕੇ ਲੋੜੀਂਦਾ HTML ਅਤੇ CSS ਕੋਡ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ।
ਇਹ ਟੂਲ ਉਹਨਾਂ ਡਿਵੈਲਪਰਾਂ ਲਈ ਬਹੁਤ ਉਪਯੋਗੀ ਹੈ ਜੋ ਤੇਜ਼ੀ ਨਾਲ CSS ਗਰਿੱਡ ਲੇਆਉਟ ਦਾ ਪ੍ਰੋਟੋਟਾਈਪ ਤਿਆਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ, ਬਿਨਾਂ ਮੈਨੂਅਲ ਕੋਡਿੰਗ ਦੇ CSS ਅਤੇ HTML ਜਨਰੇਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਨ, ਜਾਂ ਇਹ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹਨ ਕਿ ਵੱਖ-ਵੱਖ ਕਾਲਮ ਅਤੇ ਰੋਅ ਦੇ ਆਕਾਰ ਲੇਆਉਟ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦੇ ਹਨ।
grid-template-columns ਅਤੇ grid-template-rows ਨੂੰ ਸਮਝਣਾ
ਗਰਿੱਡ ਦੇ ਢਾਂਚੇ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਦੋ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ: grid-template-columns (ਕਾਲਮਾਂ ਲਈ) ਅਤੇ grid-template-rows (ਰੋਅ ਲਈ)। ਇਸ ਟੂਲ ਵਿੱਚ, ਤੁਸੀਂ 1 ਤੋਂ 12 ਤੱਕ ਕਾਲਮ ਅਤੇ 1 ਤੋਂ 12 ਤੱਕ ਰੋਅ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ।
ਹਰੇਕ ਟ੍ਰੈਕ (ਕਾਲਮ ਜਾਂ ਰੋਅ) ਦਾ ਆਪਣਾ ਆਕਾਰ ਬਾਕਸ ਹੁੰਦਾ ਹੈ, ਜਿੱਥੇ ਤੁਸੀਂ ਕੋਈ ਵੀ ਵੈਧ CSS ਗਰਿੱਡ ਮੁੱਲ ਦਰਜ ਕਰ ਸਕਦੇ ਹੋ:
1fr: ਉਪਲਬਧ ਖਾਲੀ ਥਾਂ ਦਾ ਇੱਕ ਹਿੱਸਾ (fractional unit)।200px: ਪਿਕਸਲ ਵਿੱਚ ਨਿਸ਼ਚਿਤ ਆਕਾਰ।auto: ਸਮੱਗਰੀ ਦੇ ਅਧਾਰ 'ਤੇ ਆਪਣੇ ਆਪ ਨਿਰਧਾਰਤ ਹੋਣ ਵਾਲਾ ਆਕਾਰ।min-content: ਸਮੱਗਰੀ ਦਾ ਘੱਟੋ-ਘੱਟ ਸੰਭਵ ਆਕਾਰ।minmax(120px, 1fr): ਇੱਕ ਸੀਮਾ, ਜੋ ਘੱਟੋ-ਘੱਟ 120px ਅਤੇ ਵੱਧ ਤੋਂ ਵੱਧ 1fr ਆਕਾਰ ਨਿਰਧਾਰਤ ਕਰਦੀ ਹੈ।
ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਟ੍ਰੈਕ ਦੇ ਆਕਾਰ ਲਈ ਕੋਈ ਅਵੈਧ ਮੁੱਲ (ਜਿਵੇਂ ਕਿ not-a-grid-track) ਦਰਜ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਅਵੈਧ ਵਜੋਂ ਚਿੰਨ੍ਹਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਆਉਟਪੁੱਟ CSS ਵਿੱਚ ਆਖਰੀ ਵੈਧ ਮੁੱਲ ਹੀ ਬਣਿਆ ਰਹਿੰਦਾ ਹੈ।
CSS ਗਰਿੱਡ ਵਿੱਚ fr ਯੂਨਿਟ ਅਤੇ repeat() ਦੀ ਵਰਤੋਂ
fr ਯੂਨਿਟ CSS ਗਰਿੱਡ ਦੀ ਇੱਕ ਵਿਲੱਖਣ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਜੋ ਗਰਿੱਡ ਕੰਟੇਨਰ ਵਿੱਚ ਬਚੀ ਹੋਈ ਮੁਫਤ ਜਗ੍ਹਾ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ ਤਿੰਨ ਕਾਲਮਾਂ ਦਾ ਆਕਾਰ 1fr 1fr 1fr ਹੈ, ਤਾਂ ਤਿੰਨੋਂ ਕਾਲਮ ਬਰਾਬਰ ਜਗ੍ਹਾ ਲੈਣਗੇ।
ਕੋਡ ਨੂੰ ਛੋਟਾ ਅਤੇ ਸਾਫ਼ ਰੱਖਣ ਲਈ, ਇਹ ਟੂਲ repeat() ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਇੱਕੋ ਜਿਹੇ ਆਕਾਰ ਵਾਲੇ ਕਈ ਟ੍ਰੈਕ ਲਗਾਤਾਰ ਆਉਂਦੇ ਹਨ, ਤਾਂ ਟੂਲ ਉਹਨਾਂ ਨੂੰ ਆਉਟਪੁੱਟ CSS ਵਿੱਚ ਆਪਣੇ ਆਪ ਜੋੜ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, 1fr 1fr 1fr ਲਿਖਣ ਦੀ ਬਜਾਏ, ਇਹ ਕੋਡ ਵਿੱਚ repeat(3, 1fr) ਜਨਰੇਟ ਕਰਦਾ ਹੈ।
column-gap ਅਤੇ row-gap ਨਾਲ ਗਰਿੱਡ ਗੈਪ ਨਿਰਧਾਰਤ ਕਰਨਾ
ਗਰਿੱਡ ਦੀਆਂ ਆਈਟਮਾਂ ਵਿਚਕਾਰ ਦੂਰੀ (ਗੈਪ) ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਟੂਲ ਵਿੱਚ ਸੁਤੰਤਰ ਇਨਪੁਟਸ ਦਿੱਤੇ ਗਏ ਹਨ:
- ਕਾਲਮ ਗੈਪ: 0 ਤੋਂ 48px ਦੇ ਵਿਚਕਾਰ।
- ਰੋਅ ਗੈਪ (Row gap): 0 ਤੋਂ 48px ਦੇ ਵਿਚਕਾਰ।
ਹਾਲਾਂਕਿ ਇਹ ਦੋਵੇਂ ਸੁਤੰਤਰ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਪਰ ਜੇਕਰ ਦੋਵਾਂ ਦਾ ਮੁੱਲ ਇੱਕੋ ਜਿਹਾ ਹੋਵੇ (ਉਦਾਹਰਨ ਲਈ, ਦੋਵੇਂ 20px ਹੋਣ), ਤਾਂ ਟੂਲ ਆਉਟਪੁੱਟ CSS ਵਿੱਚ ਇਹਨਾਂ ਨੂੰ ਇੱਕ ਸਿੰਗਲ gap ਪ੍ਰਾਪਰਟੀ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।
grid-column ਅਤੇ grid-row ਨਾਲ ਆਈਟਮਾਂ ਨੂੰ ਰੱਖਣਾ
ਗਰਿੱਡ ਦੇ ਉੱਪਰ ਮਾਊਸ ਨਾਲ ਡਰੈਗ (drag) ਕਰਕੇ ਤੁਸੀਂ ਆਈਟਮਾਂ ਨੂੰ ਰੱਖ ਸਕਦੇ ਹੋ। ਜਦੋਂ ਤੁਸੀਂ ਸੈੱਲਾਂ ਦੇ ਉੱਪਰ ਖਿੱਚ ਕੇ ਮਾਊਸ ਛੱਡਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਚਾਈਲਡ ਆਈਟਮ ਬਣ ਜਾਂਦੀ ਹੈ ਜੋ ਚੁਣੇ ਗਏ ਕਾਲਮਾਂ ਅਤੇ ਰੋਅ ਵਿੱਚ ਫੈਲ ਜਾਂਦੀ ਹੈ।
- ਆਈਟਮਾਂ ਦੀ ਸੀਮਾ: ਇਹ ਟੂਲ ਵੱਧ ਤੋਂ ਵੱਧ 16 ਆਈਟਮਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।
- ਓਵਰਲੈਪਿੰਗ (Overlap): ਆਈਟਮਾਂ ਇੱਕ ਦੂਜੇ ਦੇ ਉੱਪਰ ਆ ਸਕਦੀਆਂ ਹਨ। ਜੋ ਆਈਟਮ ਬਾਅਦ ਵਿੱਚ ਬਣਾਈ ਜਾਂਦੀ ਹੈ, ਉਹ ਪਹਿਲਾਂ ਵਾਲੀ ਆਈਟਮ ਦੇ ਉੱਪਰ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ।
- ਹਟਾਉਣਾ: ਕਿਸੇ ਵੀ ਆਈਟਮ ਨੂੰ ਹਟਾਉਣ ਲਈ ਉਸ ਉੱਪਰ ਦਿੱਤੇ "×" ਨਿਸ਼ਾਨ 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
- ਕੋਡ ਜਨਰੇਸ਼ਨ: ਹਰੇਕ ਬਣਾਈ ਗਈ ਆਈਟਮ ਲਈ CSS ਵਿੱਚ ਵਿਸ਼ੇਸ਼
grid-columnਅਤੇgrid-rowਨਿਯਮ ਤਿਆਰ ਹੁੰਦੇ ਹਨ, ਅਤੇ HTML ਵਿੱਚ ਇੱਕ ਮੇਲ ਖਾਂਦਾdivਐਲੀਮੈਂਟ ਬਣਦਾ ਹੈ।
ਆਮ ਲੇਆਉਟ ਪੈਟਰਨ ਅਤੇ ਪ੍ਰੀਸੈੱਟ
ਵੱਖ-ਵੱਖ ਵੈੱਬਸਾਈਟ ਢਾਂਚਿਆਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਲਈ, ਇਹ ਟੂਲ ਚਾਰ ਪ੍ਰਮੁੱਖ ਪ੍ਰੀਸੈੱਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
- ਸਾਈਡਬਾਰ: ਮੁੱਖ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕ ਪਾਸੇ ਵਾਲਾ ਕਾਲਮ ਬਣਾਉਣ ਲਈ।
- ਹੈਡਰ ਅਤੇ ਫੁੱਟਰ: ਉੱਪਰ ਹੈਡਰ, ਵਿਚਕਾਰ ਸਮੱਗਰੀ ਅਤੇ ਹੇਠਾਂ ਫੁੱਟਰ ਵਾਲਾ ਰਵਾਇਤੀ ਢਾਂਚਾ।
- ਗੈਲਰੀ: ਇਹ ਪ੍ਰੀਸੈੱਟ 3 ਕਾਲਮ, 2 ਰੋਅ ਅਤੇ 3 ਆਈਟਮਾਂ ਜਨਰੇਟ ਕਰਦਾ ਹੈ।
- ਡੈਸ਼ਬੋਰਡ: ਗੁੰਝਲਦਾਰ ਐਪਲੀਕੇਸ਼ਨ ਇੰਟਰਫੇਸਾਂ ਲਈ ਇੱਕ ਵਿਵਸਥਿਤ ਗਰਿੱਡ।
ਨਿੱਜਤਾ ਅਤੇ ਪ੍ਰੋਸੈਸਿੰਗ
ਇਸ ਟੂਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਤੁਹਾਡੀ ਨਿੱਜਤਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦੀ ਹੈ। ਤੁਹਾਡਾ ਗਰਿੱਡ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ। ਸਾਰੀ ਪ੍ਰਕਿਰਿਆ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਕਲਾਇੰਟ-ਸਾਈਡ 'ਤੇ ਹੁੰਦੀ ਹੈ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ (FAQ)
ਮੈਂ ਗਰਿੱਡ 'ਤੇ ਆਈਟਮਾਂ ਨੂੰ ਕਿਵੇਂ ਰੱਖਾਂ?
ਇੱਕ ਆਇਤਾਕਾਰ ਬਣਾਉਣ ਲਈ ਸੈੱਲਾਂ ਦੇ ਉੱਪਰ ਦਬਾਓ ਅਤੇ ਖਿੱਚੋ — ਜਦੋਂ ਤੁਸੀਂ ਛੱਡਦੇ ਹੋ ਤਾਂ ਇਹ ਉਹਨਾਂ ਕਾਲਮਾਂ ਅਤੇ ਰੋਅ ਵਿੱਚ ਫੈਲਿਆ ਹੋਇਆ ਇੱਕ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਬਣ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਹਰੇਕ ਆਈਟਮ ਨੂੰ CSS ਵਿੱਚ ਆਪਣਾ grid-column ਅਤੇ grid-row ਨਿਯਮ ਅਤੇ HTML ਵਿੱਚ ਇੱਕ ਮੇਲ ਖਾਂਦਾ div ਮਿਲਦਾ ਹੈ। ਆਈਟਮਾਂ ਇੱਕ ਦੂਜੇ ਦੇ ਉੱਪਰ ਆ ਸਕਦੀਆਂ ਹਨ, ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਬਣਾਈ ਗਈ ਆਈਟਮ ਉੱਪਰ ਰਹੇਗੀ; ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਹਟਾਉਣ ਲਈ ਉਸ 'ਤੇ × ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕੀ ਕਾਲਮ ਅਤੇ ਰੋਅ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਦੇ ਹੋ ਸਕਦੇ ਹਨ?
ਹਾਂ। ਹਰੇਕ ਟ੍ਰੈਕ ਦਾ ਆਪਣਾ ਆਕਾਰ ਬਾਕਸ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਉੱਥੇ ਕੋਈ ਵੀ ਗਰਿੱਡ ਮੁੱਲ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ — 1fr, 200px, auto, min-content ਜਾਂ minmax(120px, 1fr)। ਇੱਕੋ ਜਿਹੇ ਆਕਾਰ ਨੂੰ ਸਾਂਝਾ ਕਰਨ ਵਾਲੇ ਟ੍ਰੈਕਾਂ ਨੂੰ repeat() ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਆਉਟਪੁੱਟ ਛੋਟੀ ਰਹੇ। ਕਾਲਮ ਗੈਪ ਅਤੇ ਰੋਅ ਗੈਪ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਮੇਲ ਖਾਣ 'ਤੇ ਇੱਕ ਸਿੰਗਲ ਗੈਪ ਵਿੱਚ ਬਦਲ ਜਾਂਦੇ ਹਨ।
ਮੈਂ ਤਿਆਰ ਕੀਤੇ ਕੋਡ ਨਾਲ ਕੀ ਕਰਾਂ?
CSS ਅਤੇ HTML ਨੂੰ ਨਾਲੋ-ਨਾਲ ਕਾਪੀ ਕਰੋ। HTML ਤੁਹਾਨੂੰ ਪ੍ਰਤੀ ਆਈਟਮ ਇੱਕ div ਦੇ ਨਾਲ ਕੰਟੇਨਰ ਦਿੰਦਾ ਹੈ, ਅਤੇ CSS ਗਰਿੱਡ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਹਰੇਕ ਆਈਟਮ ਨੂੰ ਸਥਿਤੀ ਦਿੰਦਾ ਹੈ। ਦੋਵਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ ਅਤੇ ਤੁਹਾਨੂੰ ਉਹੀ ਲੇਆਉਟ ਮਿਲੇਗਾ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਬਣਾਇਆ ਹੈ।
ਕੀ ਮੈਂ ਇੱਕ ਵਾਰ ਵਿੱਚ ਸਾਰੀਆਂ ਆਈਟਮਾਂ ਨੂੰ ਹਟਾ ਸਕਦਾ ਹਾਂ?
ਹਾਂ, ਟੂਲ ਵਿੱਚ "ਆਈਟਮਾਂ ਸਾਫ਼ ਕਰੋ" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਸਾਰੀਆਂ ਰੱਖੀਆਂ ਗਈਆਂ ਆਈਟਮਾਂ ਹਟ ਜਾਂਦੀਆਂ ਹਨ। ਇਸ ਨਾਲ HTML ਕੰਟੇਨਰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਖਾਲੀ ਹੋ ਜਾਂਦਾ ਹੈ ਅਤੇ ਆਈਟਮਾਂ ਦੀ ਕੁੱਲ ਗਿਣਤੀ 0 ਹੋ ਜਾਂਦੀ ਹੈ।