CSS گرید کی کیئسٹری

  • ਪਿਛਲੀ ਪੰਨਾ gap
  • ਅਗਲਾ ਪੰਨਾ grid-area

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

grid ਪ੍ਰਤੀਯੋਗਿਤਾ ਹੇਠ ਲਿਖੀਆਂ ਪ੍ਰਤੀਯੋਗਿਤਾਵਾਂ ਦਾ ਸ਼ਾਬਦਿਕ ਲਘੂਰੂਪ ਹੈ:

ਹੋਰ ਦੇਖੋ:

CSS ਟੂਰੀਅਲ:CSS ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

ਇੱਕ ਤਿੰਨ ਸਤੰਭ ਗ੍ਰਿੱਡ ਲੇਆਉਣ, ਜਿਸ ਵਿੱਚ ਪਹਿਲੇ ਪਾਰ ਦੀ ਉਚਾਈ 150 ਪਿਕਸਲ ਹੁੰਦੀ ਹੈ:

.grid-container {
  display: grid;
  grid: 150px / auto auto auto;
}

ਆਪਣੇ ਆਪ ਦੇਖੋ

ਉਦਾਹਰਣ 2

ਦੋ ਪਾਰੇ ਨਿਰਧਾਰਤ ਕਰੋ, ਜਿਸ ਵਿੱਚ "item1" ਪਹਿਲੇ ਦੋ ਪਾਰਿਆਂ ਵਿੱਚ ਪਹਿਲੇ ਦੋ ਸਤੰਭਾਂ ਵਿੱਚ ਫੈਲਦਾ ਹੈ (ਪੰਜ ਸਤੰਭ ਗ੍ਰਿੱਡ ਲੇਆਉਣ):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid:
    'myArea myArea ...'
    'myArea myArea ...';
}

ਆਪਣੇ ਆਪ ਦੇਖੋ

ਉਦਾਹਰਣ 3

ਸਾਰੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦਾ ਨਾਮ ਦੇਣ ਅਤੇ ਇੱਕ ਮੁੱਢਲੀ ਵੈੱਬ ਟੈਮਪਲੇਟ ਬਣਾਓ:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

ਆਪਣੇ ਆਪ ਦੇਖੋ

CSS ਗਰੁੱਪ:

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

ਪੈਰਾਮੀਟਰ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
none ਮੂਲਰਚਨਾ ਮੁੱਲ. ਰਾਇਫ਼ਲਾਂ ਅਤੇ ਸਵਾਲਾਂ ਦੀ ਸਾਈਜ਼ ਨਹੀਂ ਨਿਰਧਾਰਿਤ ਕੀਤੀ ਜਾਂਦੀ ਹੈ。
grid-template-rows / grid-template-columns ਸਵਾਲਾਂ ਅਤੇ ਰਾਇਫ਼ਲਾਂ ਦੀ ਸਾਈਜ਼ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
grid-template-areas ਨਾਮਕ ਸਵਾਲਾਂ ਦੀ ਵਰਤੋਂ ਵਾਲੇ ਗ੍ਰਿੱਡ ਲੇਆਊਟ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
grid-template-rows / grid-auto-columns ਰਾਇਫ਼ਲਾਂ ਦੀ ਸਾਈਜ਼ (ਉਚਾਈ) ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਸਵਾਲਾਂ ਦੀ ਆਪਣੇ ਆਪ ਸਾਈਜ਼ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。
grid-auto-rows / grid-template-columns ਰਾਇਫ਼ਲਾਂ ਦੀ ਆਪਣੇ ਆਪ ਸਾਈਜ਼ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਅਤੇ grid-template-columns ਪੈਰਾਮੀਟਰ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。
grid-template-rows / grid-auto-flow grid-auto-columns ਰਾਇਫ਼ਲਾਂ ਦੀ ਸਾਈਜ਼ (ਉਚਾਈ) ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਸਵਾਲਾਂ ਵਿੱਚ ਸਥਾਨ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ, ਅਤੇ ਸਵਾਲਾਂ ਦੀ ਆਪਣੇ ਆਪ ਸਾਈਜ਼ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ。
grid-auto-flow grid-auto-rows / grid-template-columns ਸਵਾਲਾਂ ਵਿੱਚ ਸਥਾਨ ਬਣਾਉਣ ਦੇ ਤਰੀਕੇ, ਰਾਇਫ਼ਲਾਂ ਦੀ ਆਪਣੇ ਆਪ ਸਾਈਜ਼ ਨੂੰ ਅਤੇ grid-template-columns ਪੈਰਾਮੀਟਰ ਨੂੰ ਸੈਟ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。
initial ਇਹ ਪੈਰਾਮੀਟਰ ਉਸ ਦੇ ਮੂਲਰਚਨਾ ਮੁੱਲ ਨੂੰ ਸੈਟ ਕਰਦਾ ਹੈ. ਹੋਰ ਦੇਖੋ: initial。
inherit ਇਹ ਪੈਰਾਮੀਟਰ ਆਪਣੇ ਮਾਪੇ ਤੋਂ ਵਿਰਾਸਤੀ ਕਰਦਾ ਹੈ. ਹੋਰ ਦੇਖੋ: inherit。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲਰਚਨਾ ਮੁੱਲ: none none none auto auto row
ਵਿਰਾਸਤੀ ਕੀਤਾ ਗਿਆ: ਨਹੀਂ
ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ: ਹਾਂ, ਅਲੱਗ-ਅਲੱਗ ਪੈਰਾਮੀਟਰਾਂ ਦੇਖੋ. ਹੋਰ ਦੇਖੋ:ਐਨੀਮੇਸ਼ਨ ਸਬੰਧੀ ਪੈਰਾਮੀਟਰ。
ਵਰਜਨ: CSS Grid Layout Module Level 1
JavaScript ਗਰੁੱਪ: object.style.grid="250px / auto auto auto"

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

ਸਾਰੇ ਬਰੀਤੇ ਗਿਣਤੀਆਂ ਇਸ ਪੈਰਾਮੀਟਰ ਦੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਪਹਿਲੇ ਬਰਾਉਜ਼ਰ ਵਰਜਨ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ。

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

ਹੋਰ ਦੇਖੋ:

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-template-areas ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-template-rows ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-template-columns ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-auto-rows ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-auto-columns ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-auto-flow ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-row-gap ਪੈਰਾਮੀਟਰ

CSS ਰੈਫਰੰਸ ਮੈਨੂਅਲ：grid-column-gap ਪੈਰਾਮੀਟਰ

  • ਪਿਛਲੀ ਪੰਨਾ gap
  • ਅਗਲਾ ਪੰਨਾ grid-area