CSS گاپ اپریٹر

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

gap ਪੈਰਾਮੀਟਰ ਫਲੈਕਸਬੋਕਸ, ਗ੍ਰਿੱਡ ਜਾਂ ਬਹੁ-ਸਤੰਭ ਲੇਆਉਟ ਵਿੱਚ ਕਰਨਾ ਸਤੰਭਾਂ ਅਤੇ ਰੇਖਾਵਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ।ਇਹ ਹੇਠ ਲਿਖੇ ਪੈਰਾਮੀਟਰਾਂ ਦਾ ਸ਼ਾਬਦਿਕ ਸਬੰਧ ਹੈ:

ਧਿਆਨ:gap ਪੈਰਾਮੀਟਰ ਪਹਿਲਾਂ ਇਸ ਨਾਮ ਨਾਲ ਜਾਣਿਆ ਜਾਂਦਾ ਸੀ: grid-gap。

ਹੋਰ ਦੇਖੋ:

CSS ਟੂਰCSS ਗ੍ਰਿੱਡ ਲੇਆਉਟ

CSS ਟੂਰCSS ਫਲੈਕਸ ਬੋਕਸ ਲੇਆਉਟ

CSS ਟੂਰCSS ਬਹੁ-ਸਤੰਭ ਲੇਆਉਟ

CSS ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼:row-gap ਪੈਰਾਮੀਟਰ

CSS ਸੰਦਰਭ ਦਸਤਾਵੇਜ਼:column-gap ਪੈਰਾਮੀਟਰ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਰੇਖਾ ਅਤੇ ਸਤੰਭਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ 50px ਸੈੱਟ ਕਰੋ:

.grid-container {
  gap: 50px;
}

ਆਪਣੇ ਆਪ ਮੰਗੋ

ਉਦਾਹਰਣ 2: ਗ੍ਰਿੱਡ ਲੇਆਉਟ

ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ ਕਰਨਾ ਸਤੰਭਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ 20px, 50px ਸੈੱਟ ਕਰੋ:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

ਆਪਣੇ ਆਪ ਮੰਗੋ

ਉਦਾਹਰਣ 3: ਫਲੈਕਸ ਬੋਕਸ ਲੇਆਉਟ

ਫਲੈਕਸ ਬੋਕਸ ਲੇਆਉਟ ਵਿੱਚ ਕਰਨਾ ਸਤੰਭਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ 20px, 70px ਸੈੱਟ ਕਰੋ:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

ਆਪਣੇ ਆਪ ਮੰਗੋ

ਉਦਾਹਰਣ 4: ਬਹੁ-ਸਤੰਭ ਲੇਆਉਟ

ਬਹੁ-ਸਤੰਭ ਲੇਆਉਟ ਵਿੱਚ ਸਤੰਭਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ 50px ਸੈੱਟ ਕਰੋ:

#newspaper {
  columns: 3;
  gap: 50px;
}

ਆਪਣੇ ਆਪ ਮੰਗੋ

CSS ਗਰੇਫਟਾਂ

gap: row-gap column-gap|initial|inherit;
ਮੁੱਲ ਵਰਣਨ
row-gap ਗ੍ਰਿੱਡ ਜਾਂ ਫਲੈਕਸ ਬੋਕਸ ਲੇਆਉਟ ਵਿੱਚ ਕਰਨਾ ਸਤੰਭਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ ਸੈੱਟ ਕਰੋ。
column-gap ਗ੍ਰਿੱਡ, ਫਲੈਕਸ ਬੋਕਸ ਜਾਂ ਬਹੁ-ਸਤੰਭ ਲੇਆਉਟ ਵਿੱਚ ਸਤੰਭਾਂ ਦਰਮਿਆਨ ਗੈਪ ਸਾਈਜ਼ ਸੈੱਟ ਕਰੋ。
initial ਇਸ ਪੈਰਾਮੀਟਰ ਨੂੰ ਉਸਦੇ ਮੂਲ ਮੁੱਲ ਨੂੰ ਸੈੱਟ ਕਰੋ।ਦੇਖੋ: initial。
inherit ਇਸ ਪੈਰਾਮੀਟਰ ਨੂੰ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਵਿਰਾਸਤ ਕਰੋ।ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: normal normal
ਵਿਰਾਸਤ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣਾ: ਸਮਰੱਥ ਹੈ।ਵੱਖਰੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਦੇਖੋ।ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਪੈਰਾਮੀਟਰ。
ਸੰਸਕਰਣ: CSS ਬਾਕਸ ਅਲਾਇਨਮੈਂਟ ਮੌਡਿਊਲ ਲੈਵਲ 3
JavaScript ਗਰੇਫਟਾਂ: object.style.gap="50px 100px"

ਬ੍ਰਾਊਜ਼ਰ ਸਮਰੱਥਾ

ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰੱਥ ਹੋਣ ਵਾਲੇ ਇਸ ਲੋੜ ਦੇ ਪਹਿਲੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਨੰਬਰ ਵਿੱਚ ਸਾਰਣੀ ਹੈ。

ਲੇਆਉਟ ਚਰੋਮੇ IE / ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪੇਰਾ
ਗ੍ਰਿੱਡ ਵਿੱਚ 66 16 61 12 53
ਫਲੈਕਸ ਬੋਕਸ ਵਿੱਚ 84 84 63 14.1 70
ਬਹੁ-ਸਤੰਭ ਵਿੱਚ 66 16 61 ਸਮਰੱਥ ਨਹੀਂ 53