CSS grid-column-end ਪ੍ਰਾਪਰਟੀ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

grid-column-end ਵਿਸ਼ੇਸ਼ਤਾ ਪ੍ਰੋਜੈਕਟ ਕਿਸ ਸਿਰਲੇਖ ਤੱਕ ਪਾਸ ਕਰੇਗਾ ਜਾਂ ਪ੍ਰੋਜੈਕਟ ਕਿਸ ਸਿਰਲੇਖ ਲਾਈਨ (column-line) ਤੇ ਸਮਾਪਤ ਹੋਵੇਗਾ。

ਪੇਜ਼ ਦੇ ਅੰਤ ਵਿੱਚ ਦੇ ਉਦਾਹਰਣ ਦੇਖੋ。

ਇਸ ਤੋਂ ਵੀ ਦੇਖੋ:

CSS ਟ੍ਰੇਨਿੰਗCSS Grid Layout

ਪ੍ਰਯੋਗ

ਉਦਾਹਰਣ 1

item1 ਨੂੰ ਤਿੰਨ ਸਿਰਲੇਖਾਂ ਤੱਕ ਪਾਸ ਕਰਨ ਦੀ ਨਿਰਦੇਸ਼ਾਂ ਦਿੰਦਾ ਹੈ:

.item1 {
  grid-column-end: span 3;
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਉਦਾਹਰਣ 2

ਤੁਸੀਂ ਕਿਸੇ ਸਿਰਲੇਖ ਨੂੰ ਪਾਸ ਕਰਨ ਵਾਲੇ ਸਿਰਲੇਖ ਦੀ ਸਥਾਨ ਵਿੱਚ ਸਿਰਲੇਖ ਲਾਈਨ ਦਾ ਮੁੱਲ ਵਰਤ ਸਕਦੇ ਹੋ

.item1 {
  grid-column-end: 3;
}

ਆਪਣੇ ਆਪ ਕੋਸ਼ਿਸ਼ ਕਰੋ

CSS ਗਰੇਫਿਕਸ

grid-column-end: auto|span n|column-line;

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

ਮੁੱਲ ਵਰਣਨ
auto ਮੂਲ ਮੁੱਲ। ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਸਿਰਲੇਖ ਤੱਕ ਪੂਰਾ ਹੋਵੇਗਾ。
span n ਪ੍ਰੋਜੈਕਟ ਕਿਸ ਸਿਰਲੇਖ ਤੱਕ ਪੂਰਾ ਹੋਵੇਗਾ ਦਾ ਨਿਰਦੇਸ਼ ਦਿੰਦਾ ਹੈ。
column-line ਕਿਸ ਸਿਰਲੇਖ 'ਤੇ ਪ੍ਰਦਰਸ਼ਨ ਰੁਕਣ ਦੀ ਨਿਰਦੇਸ਼ਾਂ ਦਿੱਤੀ ਗਈ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

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

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