CSS ਗਰਿੱਡ ਜਨਰੇਟਰ
ਆਪਣੇ ਕਾਲਮ ਅਤੇ ਰੋਅ ਸੈੱਟ ਕਰੋ, ਆਈਟਮਾਂ ਰੱਖਣ ਲਈ ਸੈੱਲਾਂ ਦੇ ਉੱਪਰ ਖਿੱਚੋ, ਅਤੇ ਇੱਕ ਕਲਿੱਕ ਵਿੱਚ ਮੇਲ ਖਾਂਦੇ HTML ਦੇ ਨਾਲ ਗਰਿੱਡ CSS ਕਾਪੀ ਕਰੋ।
ਤੁਹਾਡਾ ਗਰਿੱਡ ਸਿੱਧਾ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਵੱਲੋਂ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਕੋਈ ਵੀ ਡਾਟਾ BroBroGo 'ਤੇ ਅੱਪਲੋਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।
ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ
ਮੈਂ ਗਰਿੱਡ 'ਤੇ ਆਈਟਮਾਂ ਨੂੰ ਕਿਵੇਂ ਰੱਖਾਂ?
ਇੱਕ ਆਇਤਾਕਾਰ ਬਣਾਉਣ ਲਈ ਸੈੱਲਾਂ ਦੇ ਉੱਪਰ ਦਬਾਓ ਅਤੇ ਖਿੱਚੋ — ਜਦੋਂ ਤੁਸੀਂ ਛੱਡਦੇ ਹੋ ਤਾਂ ਇਹ ਉਹਨਾਂ ਕਾਲਮਾਂ ਅਤੇ ਰੋਅ ਵਿੱਚ ਫੈਲਿਆ ਹੋਇਆ ਇੱਕ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਬਣ ਜਾਂਦਾ ਹੈ। ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਹਰੇਕ ਆਈਟਮ ਨੂੰ CSS ਵਿੱਚ ਆਪਣਾ grid-column ਅਤੇ grid-row ਨਿਯਮ ਅਤੇ HTML ਵਿੱਚ ਇੱਕ ਮੇਲ ਖਾਂਦਾ div ਮਿਲਦਾ ਹੈ। ਆਈਟਮਾਂ ਇੱਕ ਦੂਜੇ ਦੇ ਉੱਪਰ ਆ ਸਕਦੀਆਂ ਹਨ, ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਬਣਾਈ ਗਈ ਆਈਟਮ ਉੱਪਰ ਰਹੇਗੀ; ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਹਟਾਉਣ ਲਈ ਉਸ 'ਤੇ × ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕੀ ਕਾਲਮ ਅਤੇ ਰੋਅ ਵੱਖ-ਵੱਖ ਆਕਾਰਾਂ ਦੇ ਹੋ ਸਕਦੇ ਹਨ?
ਹਾਂ। ਹਰੇਕ ਟ੍ਰੈਕ ਦਾ ਆਪਣਾ ਆਕਾਰ ਬਾਕਸ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਉੱਥੇ ਕੋਈ ਵੀ ਗਰਿੱਡ ਮੁੱਲ ਟਾਈਪ ਕਰ ਸਕਦੇ ਹੋ — 1fr, 200px, auto, min-content ਜਾਂ minmax(120px, 1fr)। ਇੱਕੋ ਜਿਹੇ ਆਕਾਰ ਨੂੰ ਸਾਂਝਾ ਕਰਨ ਵਾਲੇ ਟ੍ਰੈਕਾਂ ਨੂੰ repeat() ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਜੋ ਆਉਟਪੁੱਟ ਛੋਟੀ ਰਹੇ। ਕਾਲਮ ਗੈਪ ਅਤੇ ਰੋਅ ਗੈਪ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਸੈੱਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਅਤੇ ਮੇਲ ਖਾਣ 'ਤੇ ਇੱਕ ਸਿੰਗਲ ਗੈਪ ਵਿੱਚ ਬਦਲ ਜਾਂਦੇ ਹਨ।
ਮੈਂ ਤਿਆਰ ਕੀਤੇ ਕੋਡ ਨਾਲ ਕੀ ਕਰਾਂ?
CSS ਅਤੇ HTML ਨੂੰ ਨਾਲੋ-ਨਾਲ ਕਾਪੀ ਕਰੋ। HTML ਤੁਹਾਨੂੰ ਪ੍ਰਤੀ ਆਈਟਮ ਇੱਕ div ਦੇ ਨਾਲ ਕੰਟੇਨਰ ਦਿੰਦਾ ਹੈ, ਅਤੇ CSS ਗਰਿੱਡ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਹਰੇਕ ਆਈਟਮ ਨੂੰ ਸਥਿਤੀ ਦਿੰਦਾ ਹੈ। ਦੋਵਾਂ ਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ ਅਤੇ ਤੁਹਾਨੂੰ ਉਹੀ ਲੇਆਉਟ ਮਿਲੇਗਾ ਜੋ ਤੁਸੀਂ ਇੱਥੇ ਬਣਾਇਆ ਹੈ।