ਕੋਰਸ ਪ੍ਰਸਤਾਵ:

ਵਿਵਰਣ ਅਤੇ ਵਰਤੋਂ

grid-area ਪ੍ਰਤੀਭਾਵ ਨੂੰ ਗ੍ਰਿੱਡ ਆਈਟਮ ਨੂੰ ਨਾਮ ਦੇਣ ਲਈ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਫਿਰ, ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਗ੍ਰਿੱਡ ਆਈਟਮ ਦੇ ਮੰਡਰਾ, ਮਾਪ ਅਤੇ ਸਥਾਨ ਨੂੰ ਸੰਕਲਿਤ ਕਰਨ ਲਈ ਇਹ ਪ੍ਰਤੀਭਾਵ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ: grid-template-areas ਪ੍ਰਤੀਭਾਵ ਨਾਮ ਦੇ ਗ੍ਰਿੱਡ ਪ੍ਰੋਜੈਕਟ ਲਈ ਪ੍ਰਤੀਭਾਵ ਵਰਣਨ ਦੇਖੋ ਹੇਠ ਵਿੱਚ ਉਦਾਹਰਣ ਵਿੱਚ。

ਹੋਰ ਦੇਖੋ:

CSS ਸਿਖਲਾਈ ਪੁਸਤਕ:CSS ਗ੍ਰਿੱਡ ਲੈਗ ਸਿਖਲਾਈ

ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 1

item1 ਨੂੰ ਕਤਾਰ 2 ਸਤਰ 1 ਤੋਂ ਸ਼ੁਰੂ ਕਰਕੇ ਦੋ ਕਤਾਰ ਤੇ ਤਿੰਨ ਸਤਰ ਤੱਕ ਹੋਰ ਕਰੋ:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸੁਝਾਅ:ਪੰਨੇ ਦੇ ਨੀਚੇ ਹੋਰ ਉਦਾਹਰਨਾਂ ਮਿਲਣਗੇ。

CSS ਵਿਧੀ

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

ਪ੍ਰਤੀਭਾਵ

ਮੁੱਲ ਵਰਣਨ
grid-row-start ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ ਵਾਲੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਕਿਸ ਕਤਾਰ ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇਗਾ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰੋ。
grid-column-start ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ ਵਾਲੇ ਪ੍ਰੋਜੈਕਟ ਲਈ ਕਿਸ ਸਤਰ ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇਗਾ ਇਹ ਨਿਰਧਾਰਿਤ ਕਰੋ。
grid-row-end ਵਸਤੂ ਨੂੰ ਕਿਸ ਫਲਾਣੇ ਤੱਕ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਜਾਂ ਕਿੰਨੇ ਫਲਾਣੇ ਤੱਕ ਫੈਲਾਉਣਾ ਨਿਰਧਾਰਿਤ ਕਰੇ
grid-column-end ਵਸਤੂ ਨੂੰ ਕਿਸ ਸਤਾਨਾ ਤੱਕ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਜਾਂ ਕਿੰਨੇ ਸਤਾਨਾ ਤੱਕ ਫੈਲਾਉਣਾ ਨਿਰਧਾਰਿਤ ਕਰੇ
itemname ਗ੍ਰਿੱਡ ਵਸਤੂ ਦੇ ਨਾਮ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰੇ

ਤਕਨੀਕੀ ਵੇਰਵੇ

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

ਹੋਰ ਉਦਾਹਰਣ

ਉਦਾਹਰਣ 2

Item1 ਦਾ ਨਾਮ 'myArea' ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਪੰਜ ਸਤਾਨਾ ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ ਸਾਰੇ ਪੰਜ ਸਤਾਨਾ ਫੈਲਾਇਆ ਗਿਆ ਹੈ:

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 3

myArea ਨੂੰ ਪੰਜ ਸਤਾਨਾ ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ ਦੋ ਸਤਾਨਾ ਫੈਲਾਓ (ਪੁਆਇੰਟ ਨਾਮ ਹੋਰ ਵਸਤੂਆਂ ਦਾ ਨਾਮ ਨਹੀਂ ਹੈ):

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

item1 ਨੂੰ ਦੋ ਸਤਾਨਾ ਅਤੇ ਦੋ ਫਲਾਣੇ ਤੱਕ ਫੈਲਾਓ:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 5

ਸਾਰੇ ਵਸਤੂਆਂ ਦਾ ਨਾਮ ਕਰੋ ਅਤੇ ਇੱਕ ਮੁੱਢਲੀ ਵੈੱਬਸਾਈਟ ਮੋਡਲ ਬਣਾਓ:

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

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

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

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

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