𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
ਆਪਣੇ CSS layouts ਨਾਲ ਲੜਨਾ ਬੰਦ ਕਰੋ।
ਮੈਂ Flexbox ਨਾਲ ਟੁੱਟੇ ਹੋਏ layouts ਨੂੰ ਠੀਕ ਕਰਨ ਵਿੱਚ ਘੰਟਿਆਂ ਬੱਧੀ ਸਮਾਂ ਬਰਬਾਦ ਕਰਦਾ ਸੀ। ਮੈਂ ਚੀਜ਼ਾਂ ਨੂੰ ਇੱਕ row ਵਿੱਚ ਲਿਆਉਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਸੀ, ਪਰ ਆਖਰੀ ਆਈਟਮ ਪੂਰੀ ਸਕ੍ਰੀਨ 'ਤੇ ਫੈਲ ਜਾਂਦੀ ਸੀ। ਇਹ ਦੇਖਣ ਵਿੱਚ ਗਲਤ ਲੱਗਦਾ ਸੀ। ਮੈਂ margins ਅਤੇ ਹੋਰ hacks ਦੀ ਵਰਤੋਂ ਕੀਤੀ, ਪਰ ਕੁਝ ਵੀ ਕੰਮ ਨਹੀਂ ਆਇਆ।
ਫਿਰ ਮੈਂ ਆਪਣੀ ਸੋਚ ਬਦਲ ਕੇ CSS Grid ਵੱਲ ਕਰ ਦਿੱਤੀ।
ਫਰਕ ਸਧਾਰਨ ਹੈ:
- Flexbox ਇੱਕ-ਆਯਾਮੀ (one-dimensional) layouts ਲਈ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ ਇੱਕ ਸਿੰਗਲ row ਜਾਂ ਇੱਕ ਸਿੰਗਲ column ਲਈ ਕਰੋ।
- CSS Grid ਦੋ-ਆਯਾਮੀ (two-dimensional) layouts ਲਈ ਹੈ। ਇਸਦੀ ਵਰਤੋਂ ਉਦੋਂ ਕਰੋ ਜਦੋਂ ਤੁਹਾਨੂੰ ਇੱਕੋ ਸਮੇਂ rows ਅਤੇ columns ਦੋਵਾਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇ।
Flexbox ਨੂੰ ਛੋਟੇ ਕੰਮਾਂ ਲਈ ਇੱਕ ਟੂਲ ਵਜੋਂ ਸਮਝੋ। Grid ਨੂੰ ਆਪਣੇ ਪੂਰੇ ਪੇਜ ਦੇ ਢਾਂਚੇ (structure) ਲਈ ਇੱਕ ਟੂਲ ਵਜੋਂ ਸਮਝੋ।
Flexbox ਦਾ ਜਾਲ: ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ gallery ਲਈ Flexbox ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਚੀਜ਼ਾਂ ਹਰ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ 'ਤੇ ਸਹੀ ਤਰ੍ਹਾਂ align ਨਹੀਂ ਹੋ ਸਕਦੀਆਂ। ਅਕਸਰ ਤੁਹਾਡੇ ਕੋਲ "orphan" ਆਈਟਮਾਂ ਰਹਿ ਜਾਂਦੀਆਂ ਹਨ ਜੋ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਦੇ ਤਾਲਮੇਲ ਨੂੰ ਵਿਗਾੜ ਦਿੰਦੀਆਂ ਹਨ।
Grid ਦਾ ਹੱਲ: Grid ਦੇ ਨਾਲ, ਤੁਸੀਂ ਇੱਕ ਲਾਈਨ ਦੇ ਕੋਡ ਵਿੱਚ responsive galleries ਬਣਾ ਸਕਦੇ ਹੋ।
ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਜਿੰਨੇ ਹੋ ਸਕੇ 250px ਦੇ columns ਫਿੱਟ ਕੀਤੇ ਜਾਣ। ਬ੍ਰਾਊਜ਼ਰ ਤੁਹਾਡੇ ਲਈ ਗਣਨਾ ਕਰਦਾ ਹੈ। ਹੁਣ ਕੋਈ ਅੰਦਾਜ਼ਾ ਲਗਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ। ਹੁਣ ਕੋਈ ਟੁੱਟੀਆਂ ਹੋਈਆਂ rows ਨਹੀਂ ਹੋਣਗੀਆਂ।
Dashboard ਦੀ ਉਦਾਹਰਣ: Flexbox ਨਾਲ ਇੱਕ sidebar, ਮੁੱਖ ਸਮੱਗਰੀ (main content), ਅਤੇ ਇੱਕ footer ਵਾਲਾ dashboard ਬਣਾਉਣਾ ਮੁਸ਼ਕਲ ਹੈ। ਅਕਸਰ footer ਨੂੰ ਪੂਰੀ ਚੌੜਾਈ ਵਿੱਚ ਫੈਲਾਉਣ ਲਈ ਤੁਹਾਨੂੰ nested containers ਅਤੇ ਉਲਝੇ ਹੋਏ ਕੋਡ ਦੀ ਲੋੜ ਪੈਂਦੀ ਹੈ।
Grid ਦੇ ਨਾਲ, ਤੁਸੀਂ ਇੱਕ ਵਾਰ ਵਿੱਚ tracks ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
ਤੁਸੀਂ ਇੱਕ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ footer ਨੂੰ ਪਹਿਲੇ column ਤੋਂ ਆਖਰੀ column ਤੱਕ ਫੈਲਾਉਣ ਲਈ ਕਹਿ ਸਕਦੇ ਹੋ। ਤੁਹਾਡਾ ਕੋਡ ਸਾਫ਼ ਅਤੇ ਪੜ੍ਹਨ ਵਿੱਚ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
ਮੇਰੀ ਸਲਾਹ:
• Headers ਜਾਂ buttons ਵਿੱਚ ਸਧਾਰਨ alignment ਲਈ Flexbox ਦੀ ਵਰਤੋਂ ਕਰੋ। • ਮੁੱਖ ਪੇਜ layouts ਅਤੇ ਗੁੰਝਲਦਾਰ galleries ਲਈ Grid ਦੀ ਵਰਤੋਂ ਕਰੋ। • ਸਿਰਫ਼ ਇੱਕ layout ਸਮੱਸਿਆ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ containers ਨੂੰ nested ਕਰਨਾ ਬੰਦ ਕਰੋ। • ਸਪੇਸ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਵੰਡਣ ਲਈ fr unit ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਅੱਜ ਹੀ ਇਸਨੂੰ ਅਜ਼ਮਾਓ। ਕੋਈ ਪੁਰਾਣਾ component ਲਓ ਜੋ ਤੁਸੀਂ Flexbox ਨਾਲ ਬਣਾਇਆ ਸੀ। ਇਸਨੂੰ CSS Grid ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ। ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਤੁਹਾਡਾ ਕੋਡ ਛੋਟਾ ਹੋ ਰਿਹਾ ਹੈ ਅਤੇ ਤੁਹਾਡੇ layouts ਹੋਰ ਮਜ਼ਬੂਤ ਹੋ ਰਹੇ ਹਨ।