CSS گرید آئٹم

1
2
3
4
5

خود کو بچار

ਉਪ ਤੱਤ (ਪ੍ਰੋਜੈਕਟ)

ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ ਗ੍ਰਿੱਡ ਪ੍ਰੋਜੈਕਟ ਦਾ ਸਮੂਹ ਹੈ。

ਮੂਲ ਰੂਪ ਵਿੱਚ, ਕੰਟੇਨਰ ਦੀ ਹਰ ਕਿਸਮ ਦੀ ਹਰ ਸਤਾਨੇ 'ਤੇ ਇੱਕ ਗ੍ਰਿੱਡ ਪ੍ਰੋਜੈਕਟ ਹੁੰਦਾ ਹੈ, ਪਰ ਤੁਸੀਂ ਗ੍ਰਿੱਡ ਪ੍ਰੋਜੈਕਟ ਦੀ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ, ਤਾਕਿ ਉਹ ਕਈ ਸਤਾਨਾ ਅਤੇ/ਜਾਂ ਕਈ ਕਿਸਮਾਂ 'ਤੇ ਫੈਲਣ ਹੋਣ。

grid-column ਸ਼ੈਸ਼ਨ:

grid-column ਇਹ ਸ਼ੈਸ਼ਨ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਕਿਸ ਸਤਾਨੇ 'ਤੇ ਰੱਖਣਾ ਹੈ, ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ。

ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਦੀ ਸ਼ੁਰੂਆਤ ਸਥਾਨ ਅਤੇ ਸਮਾਪਤ ਸਥਾਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ਟਿੱਪਣੀ:grid-column ਗ੍ਰਿੱਡ-ਕੋਲਮ-ਸ਼ੁਰੂ ਅਤੇ ਗ੍ਰਿੱਡ-ਕੋਲਮ-ਅੰਤ ਦੀਆਂ ਸ਼ਾਰਟਕੈਟ ਸ਼ੈਸ਼ਨ ਹਨ。

ਜੇਕਰ ਕੋਈ ਪ੍ਰੋਜੈਕਟ ਲਗਾਉਣਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਲਾਈਨ ਨੰਬਰ (line numbers) ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ, ਜਾਂ "span" ਕੀਵਰਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ ਪ੍ਰੋਜੈਕਟ ਕਿੰਨੇ ਸਤਾਨਾ ਤੱਕ ਫੈਲੇਗਾ, ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ。

مثال

ਇਹ 'item1' ਕੋਲਾਂ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ ਕੋਲਾਂ 5 'ਤੇ ਸਮਾਪਤ ਹੋਵੇ:

.item1 {
  grid-column: 1 / 5;
}

خود کو بچار

مثال

ਇਹ 'item1' ਕੋਲਾਂ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ 3 ਕੋਲਾਂ ਨੂੰ ਕਵਰ ਕਰੇ:

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

خود کو بچار

مثال

ਇਹ 'item2' ਕੋਲਾਂ 2 ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ 3 ਕੋਲਾਂ ਨੂੰ ਕਵਰ ਕਰੇ:

.item2 {
  grid-column: 2 / span 3;
}

خود کو بچار

grid-row ਪ੍ਰਤੀਭਾਵਕਤਾ:

grid-row ਪ੍ਰਤੀਭਾਵਕਤਾ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਕਿਸ ਰੋਅ 'ਤੇ ਸਥਾਪਿਤ ਕਰੇ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ。

ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਦੀ ਸ਼ੁਰੂਆਤ ਸਥਾਨ ਅਤੇ ਸਮਾਪਤ ਸਥਾਨ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ਟਿੱਪਣੀ:grid-row ਪ੍ਰਤੀਭਾਵਕਤਾ ਗ੍ਰਿੱਡ-ਰੋਅ-ਸਟਾਰਟ ਅਤੇ ਗ੍ਰਿੱਡ-ਰੋਅ-ਐਂਡ ਪ੍ਰਤੀਭਾਵਕਤਾ ਦੇ ਸ਼ਾਬਦਿਕ ਰੂਪ ਹਨ。

ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸਥਾਪਿਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਰੋਅ ਨੰਬਰ ਦਾ ਹਵਾਲਾ ਲੈ ਸਕਦੇ ਹੋ ਜਾਂ 'span' ਕੀਵਾਰਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ ਪ੍ਰੋਜੈਕਟ ਕਿੰਨੇ ਰੋਅਾਂ ਨੂੰ ਕਵਰ ਕਰੇ ਇਹ ਪਰਿਭਾਸ਼ਿਤ ਕਰ ਸਕਦੇ ਹੋ。

مثال

ਇਹ 'item1' ਰੋਅ-ਲਾਈਨ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ ਰੋਅ-ਲਾਈਨ 4 'ਤੇ ਸਮਾਪਤ ਹੋਵੇ:

.item1 {
  grid-row: 1 / 4;
}

خود کو بچار

مثال

ਇਹ 'item1' ਪਹਿਲੇ ਰੋਅ ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ 2 ਰੋਅ ਨੂੰ ਕਵਰ ਕਰੇ:

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

خود کو بچار

grid-area ਪ੍ਰਤੀਭਾਵਕਤਾ

grid-area ਪ੍ਰਤੀਭਾਵਕਤਾ ਗ੍ਰਿੱਡ-ਰੋਅ-ਸਟਾਰਟ, ਗ੍ਰਿੱਡ-ਕੋਲਾਂ-ਸਟਾਰਟ, ਗ੍ਰਿੱਡ-ਰੋਅ-ਐਂਡ, ਅਤੇ ਗ੍ਰਿੱਡ-ਕੋਲਾਂ-ਐਂਡ ਪ੍ਰਤੀਭਾਵਕਤਾ ਦੇ ਲਈ ਸ਼ਾਬਦਿਕ ਰੂਪ ਹੈ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

مثال

ਇਹ 'item8' ਰੋਅ-ਲਾਈਨ 1 ਅਤੇ ਕਲਾਮ-ਲਾਈਨ 2 ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ ਰੋਅ-ਲਾਈਨ 5 ਅਤੇ ਕਲਾਮ-ਲਾਈਨ 6 'ਤੇ ਸਮਾਪਤ ਹੋਵੇ:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

خود کو بچار

مثال

ਇਹ 'item8' ਰੋਅ-ਲਾਈਨ 2 ਅਤੇ ਕਲਾਮ-ਲਾਈਨ ਤੋਂ ਸ਼ੁਰੂ ਹੋਵੇ ਅਤੇ 2 ਰੋਅ ਅਤੇ 3 ਕੋਲਾਂ ਨੂੰ ਕਵਰ ਕਰੇ:

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

خود کو بچار

ਨਾਮਕਰਣ ਗ੍ਰਿੱਡ ਆਈਟਮ

grid-area ਗ੍ਰਿੱਡ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਮ ਨੂੰ ਅਲਾਟ ਕਰਨ ਲਈ ਪ੍ਰਤੀਭਾਵਕਤਾ ਵੀ ਵਰਤੀ ਜਾ ਸਕਦੀ ਹੈ。

ਹੈੱਡਰ
ਮੇਨੂ
ਮੁੱਖ
ਰਾਇਟ
ਫੂਟਰ

ਗ੍ਰਿੱਡ ਕੰਟੇਨਰ ਦੇ ਮਾਧਿਅਮ ਨਾਲ ਹੋ ਸਕਦਾ ਹੈ: grid-template-areas ਗ੍ਰਿੱਡ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਮ ਦੇ ਹਵਾਲੇ ਲਈ ਪ੍ਰਤੀਭਾਵਕਤਾ ਹੈ。

مثال

item1 ਦਾ ਨਾਮ 'ਮੇਅਰੇਆ' ਹੈ ਅਤੇ ਪੰਜ ਗ੍ਰਿੱਡ ਲੈਜ਼ਾਊਟ ਵਿੱਚ ਸਾਰੇ ਪੰਜ ਕੋਲਾਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ:

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'ਮੇਅਰੇਆ ਮੇਅਰੇਆ ਮੇਅਰੇਆ ਮੇਅਰੇਆ ਮੇਅਰੇਆ';
}

خود کو بچار

ਹਰੇਕ ਪਾਰਟੀ ਗਿਲੋਕ (''') ਦੇ ਦਾਇਰੇ ਵਿੱਚ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।

ਹਰੇਕ ਪਾਰਟੀ ਵਿੱਚ ਕੋਲਾਂ ਦਾ ਨਾਮ ਗਿਲੋਕ ਵਿੱਚ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਸਪੇਸ ਨਾਲ ਵੰਡਿਆ ਜਾਂਦਾ ਹੈ。

ਟਿੱਪਣੀ:ਪੁਨਜੀ ਸਾਬਤ ਗ੍ਰਿੱਡ ਆਈਟਮ ਦੇ ਨਾਮ ਨਹੀਂ ਹੈ。

مثال

ਜੇਕਰ ਤੁਸੀਂ 'myArea' ਨੂੰ ਗ੍ਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ ਦੋ ਕੋਲਾਂ ਵਿੱਚ ਚੜ੍ਹਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ:

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

خود کو بچار

ਜੇਕਰ ਤੁਸੀਂ ਦੋ ਪਾਰਟੀਆਂ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਦੂਜੇ ਗਿਲੋਕ ਵਿੱਚ ਦੂਜੀ ਪਾਰਟੀ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹੋ:

مثال

ਜੇਕਰ ਤੁਸੀਂ 'item1' ਨੂੰ ਦੋ ਕੋਲਾਂ ਅਤੇ ਦੋ ਪਾਰਟੀਆਂ ਵਿੱਚ ਚੜ੍ਹਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ:

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

خود کو بچار

مثال

ਸਾਰੇ ਆਈਟਮਾਂ ਦਾ ਨਾਮ ਕਰੋ ਅਤੇ ਇੱਕ ਤਿਆਰ ਵੇਬਸਾਈਟ ਟੈਮਪਲੇਟ ਬਣਾਓ:

.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';
}

خود کو بچار

ਆਈਟਮਾਂ ਦੀ ਕਿਸਮ

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

HTML ਕੋਡ ਵਿੱਚ ਪਹਿਲਾ ਆਈਟਮ ਗ੍ਰਿੱਡ ਵਿੱਚ ਪਹਿਲਾ ਨਹੀਂ ਦਿਖਾਇਆ ਜਾਣਾ ਹੈ。

1
2
3
4
5
6

مثال

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

خود کو بچار

ਤੁਸੀਂ ਕੁਝ ਸਕਰੀਨ ਸਾਈਜ਼ ਦੀ ਕਿਸਮ ਵਿੱਚ ਪੁਨਰਵਿਵਸਥਾ ਕਰਨ ਲਈ ਮੀਡੀਆ ਕਿਊਰੀ ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹੋ

مثال

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

خود کو بچار