CSS grid-gap ਪ੍ਰਾਪਰਟੀ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

grid-gap ਵਿਸ਼ੇਸ਼ਤਾ ਗ੍ਰਿੱਡ ਲੇਆਊਟ ਵਿੱਚ ਰੋਜ਼ ਅਤੇ ਕੋਲਮ ਦਰਮਿਆਨ ਅੰਤਰ ਸਿਜ਼ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ, ਇਹ ਹੇਠ ਲਿਖੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਲਘੂ ਗ੍ਰਿੱਡ-ਗੈਪ ਹਨ:

ਧਿਆਨ:ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ CSS3 ਵਿੱਚ ਇਸ ਨਾਮ ਨਾਲ ਰੂਪਾਂਤਰਿਤ ਹੋ ਗਈ ਹੈ gap.

ਹੋਰ ਦੇਖੋ:

CSS ਸਿੱਖਣ ਵਾਲਾCSS ਗ੍ਰਿੱਡ ਲੇਆਊਟ

CSS ਜਾਣਕਾਰੀ ਕੈਸ਼ਲਸਟਰgrip-row-gap ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਜਾਣਕਾਰੀ ਕੈਸ਼ਲਸਟਰgrip-column-gap ਵਿਸ਼ੇਸ਼ਤਾ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਰੋਜ਼ ਅਤੇ ਕੋਲਮ ਦਰਮਿਆਨ ਲਘੂ ਗ੍ਰਿੱਡ-ਗੈਪ ਸੈਟ ਕਰੋ:

.grid-container {
  grid-gap: 50px;
}

ਖੁਦ ਸਿਖਣ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 2

ਰੋਜ਼ ਅੰਤਰ 20 ਪਿਕਸਲ ਅਤੇ ਕੋਲਮ ਅੰਤਰ 50 ਪਿਕਸਲ ਸੈਟ ਕਰੋ:

.grid-container {
  grid-gap: 20px 50px;
}

ਖੁਦ ਸਿਖਣ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੰਟੇਸ਼ਨ

grid-gap: grid-row-gap grid-column-gap;

ਵਿਸ਼ੇਸ਼ਤਾ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
grid-row-gap ਗ੍ਰਿੱਡ ਲੇਆਊਟ ਵਿੱਚ ਰੋਜ਼ ਅੰਤਰ ਸਿਜ਼ ਸੈਟ ਕਰੋ।ਮੂਲ ਮੁੱਲ 0 ਹੈ。
grid-column-gap ਕੋਲਮ ਅੰਤਰ ਸਿਜ਼ ਸੈਟ ਕਰੋ।ਮੂਲ ਮੁੱਲ 0 ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: 0 0
ਵਿਰਾਸਤੀ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰਥਨ ਹੈ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ.
ਸੰਸਕਰਣ: CSS Grid Layout Module Level 1
ਜੈਵਾਸਕ੍ਰਿਪਟ ਗਰੰਟੇਸ਼ਨ: object.style.gridGap="50px 100px"

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਪਸ਼ਟ ਪੱਧਰ 'ਤੇ ਦਿੱਤੇ ਗਏ ਨੰਬਰ ਇਹ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਹਨ ਜੋ ਇਸ ਲੋੜ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਹਨ。

ਚਰਮੋਨਾ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
57 16 52 10 44