CSS grid-template-columns ਪ੍ਰਾਪਰਟੀ

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

grid-template-columns ਵਿਸ਼ੇਸ਼ਤਾ ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ ਕੋਲਮ ਦੀ ਸੰਖਿਆ (ਅਤੇ ਚੌਦਾਰਤਾ) ਨਿਰਧਾਰਿਤ ਕਰਦੀ ਹੈ。

ਇਹ ਮੁੱਲ ਖਾਲੀ ਜਗ੍ਹਾ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਹੋਰ ਮੁੱਲਾਂ ਦੀ ਲਿਸਟ ਹੈ ਜਿਸ ਵਿੱਚ ਹਰੇਕ ਮੁੱਲ ਹਰੇਕ ਕੋਲਮ ਦਾ ਅਕਾਰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਹੋਰ ਦੇਖੋ:

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

CSS ਸੰਦਰਭ ਪੁਸਤਕgrid-template-rows ਵਿਸ਼ੇਸ਼ਤਾ

CSS ਸੰਦਰਭ ਪੁਸਤਕgrid-template ਵਿਸ਼ੇਸ਼ਤਾ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਚਾਰ ਕੋਲਮ ਵਾਲੀ ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ ਬਣਾਓ:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

ਸਵੈ ਮੋਹਰਾ ਕਰੋ

ਉਦਾਹਰਣ 2

ਇੱਕ ਚਾਰ ਕੋਲਮ ਵਾਲੀ ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਬਣਾਓ ਅਤੇ ਹਰੇਕ ਕੋਲਮ ਦਾ ਅਕਾਰ ਨਿਰਧਾਰਿਤ ਕਰੋ:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

ਸਵੈ ਮੋਹਰਾ ਕਰੋ

CSS ਗਰੇਫਟਾਈਰ

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

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

ਮੁੱਲ ਵਰਣਨ
none ਮੂਲ ਮੁੱਲ। ਜ਼ਰੂਰਤ ਹੋਣ ਤੇ ਕੋਲਮ ਬਣਾਓ。
auto ਕੋਲਮ ਦਾ ਅਕਾਰ ਕੋਲਮ ਦੇ ਅਕਾਰ ਅਤੇ ਕੋਲਮ ਵਿੱਚ ਆਈਟਮ ਦੇ ਅਕਾਰ ਦੇ ਅਨੁਸਾਰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
max-content ਕੋਲਮ ਦਾ ਅਕਾਰ ਕੋਲਮ ਵਿੱਚ ਸਭ ਤੋਂ ਵੱਡੇ ਆਈਟਮ ਦੇ ਅਕਾਰ ਦੇ ਅਨੁਸਾਰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
min-content ਕੋਲਮ ਦਾ ਅਕਾਰ ਕੋਲਮ ਵਿੱਚ ਸਭ ਤੋਂ ਛੋਟੇ ਆਈਟਮ ਦੇ ਅਕਾਰ ਦੇ ਅਨੁਸਾਰ ਨਿਰਧਾਰਿਤ ਕਰੋ。
length ਸਿਰਫ ਲੰਬਾਈ ਇਕਾਈ ਦੀ ਸਹੀ ਮਾਤਰਾ ਦੀ ਵਰਤੋਂ ਨਾਲ ਸਿਰਫ ਸਿਰਫ ਕੋਲਮ ਦਾ ਅਕਾਰ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਦੇਖੋ:ਲੰਬਾਈ ਇਕਾਈ.
initial ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਆਪਣੇ ਮੂਲ ਮੁੱਲ ਤੇ ਰੱਖੀ ਜਾਵੇ। ਦੇਖੋ: initial.
inherit ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਆਪਣੇ ਮਾਤਾ ਤੱਤ ਤੋਂ ਵਿਰਾਸਤੀ ਲਈ ਹੈ। ਦੇਖੋ: inherit.

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

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

ਸਾਰੇ ਪੱਧਰਾਂ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਪ੍ਰਾਪਰਤੀ ਵਿੱਚ ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਪਹਿਲਾ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਦਿਸਾਈ ਗਈ ਹੈ。

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