ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

CSS ਗਰਿੱਡ

ਉਦਾਹਰਨਾਂ ਅਤੇ ਕੋਡ ਸਨਿੱਪਟਾਂ ਦੇ ਨਾਲ CSS ਗਰਿੱਡ 'ਤੇ ਬਣੇ ਸਾਡੇ ਵਿਕਲਪਿਕ ਲੇਆਉਟ ਸਿਸਟਮ ਨੂੰ ਕਿਵੇਂ ਸਮਰੱਥ, ਵਰਤੋਂ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਹੈ ਸਿੱਖੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਬੂਟਸਟਰੈਪ ਦਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ ਦਹਾਕੇ ਤੋਂ ਵੱਧ CSS ਲੇਆਉਟ ਤਕਨੀਕਾਂ ਦੇ ਸਿਖਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ, ਲੱਖਾਂ ਲੋਕਾਂ ਦੁਆਰਾ ਅਜ਼ਮਾਇਆ ਅਤੇ ਪਰਖਿਆ ਗਿਆ। ਪਰ, ਇਹ ਬਹੁਤ ਸਾਰੀਆਂ ਆਧੁਨਿਕ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਤਕਨੀਕਾਂ ਦੇ ਬਿਨਾਂ ਵੀ ਬਣਾਇਆ ਗਿਆ ਸੀ ਜੋ ਅਸੀਂ ਨਵੇਂ CSS ਗਰਿੱਡ ਵਰਗੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਦੇਖ ਰਹੇ ਹਾਂ।

ਧਿਆਨ ਦਿਓ—ਸਾਡਾ CSS ਗਰਿੱਡ ਸਿਸਟਮ ਪ੍ਰਯੋਗਾਤਮਕ ਹੈ ਅਤੇ v5.1.0 ਦੇ ਅਨੁਸਾਰ ਔਪਟ-ਇਨ ਹੈ! ਅਸੀਂ ਇਸਨੂੰ ਤੁਹਾਡੇ ਲਈ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਸਾਡੇ ਦਸਤਾਵੇਜ਼ ਦੇ CSS ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ, ਪਰ ਇਹ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਅਸਮਰੱਥ ਹੈ। ਆਪਣੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਇਸਨੂੰ ਕਿਵੇਂ ਸਮਰੱਥ ਕਰਨਾ ਹੈ ਇਹ ਸਿੱਖਣ ਲਈ ਪੜ੍ਹਦੇ ਰਹੋ।

ਕਿਦਾ ਚਲਦਾ

ਬੂਟਸਟਰੈਪ 5 ਦੇ ਨਾਲ, ਅਸੀਂ ਇੱਕ ਵੱਖਰੇ ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਦਾ ਵਿਕਲਪ ਜੋੜਿਆ ਹੈ ਜੋ CSS ਗਰਿੱਡ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ, ਪਰ ਇੱਕ ਬੂਟਸਟਰੈਪ ਮੋੜ ਦੇ ਨਾਲ। ਤੁਸੀਂ ਅਜੇ ਵੀ ਕਲਾਸਾਂ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਜਵਾਬਦੇਹ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਇੱਕ ਤਰਕ ਨਾਲ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ, ਪਰ ਹੁੱਡ ਦੇ ਹੇਠਾਂ ਇੱਕ ਵੱਖਰੀ ਪਹੁੰਚ ਨਾਲ।

  • CSS ਗਰਿੱਡ ਔਪਟ-ਇਨ ਹੈ। ਸੈੱਟ ਕਰਕੇ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਨੂੰ ਅਸਮਰੱਥ ਕਰੋ $enable-grid-classes: falseਅਤੇ ਸੈੱਟ ਕਰਕੇ CSS ਗਰਿੱਡ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ $enable-cssgrid: true। ਫਿਰ, ਆਪਣੇ Sass ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ.

  • ਦੇ ਉਦਾਹਰਨਾਂ ਨੂੰ .rowਨਾਲ ਬਦਲੋ .grid. .gridਕਲਾਸ ਸੈੱਟ ਕਰਦਾ ਹੈ ਅਤੇ ਉਸ display: gridਨੂੰ ਬਣਾਉਂਦਾ ਹੈ grid-templateਜੋ ਤੁਸੀਂ ਆਪਣੇ HTML ਨਾਲ ਬਣਾਉਂਦੇ ਹੋ।

  • .col-*ਕਲਾਸਾਂ ਨੂੰ ਕਲਾਸਾਂ ਨਾਲ ਬਦਲੋ .g-col-*। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਸਾਡੇ CSS ਗਰਿੱਡ ਕਾਲਮ grid-columnਦੀ ਬਜਾਏ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ width।

  • ਕਾਲਮ ਅਤੇ ਗਟਰ ਦੇ ਆਕਾਰ CSS ਵੇਰੀਏਬਲ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਮਾਤਾ-ਪਿਤਾ 'ਤੇ ਸੈਟ ਕਰੋ .gridਅਤੇ ਜਿਵੇਂ ਵੀ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ, ਇਨਲਾਈਨ ਜਾਂ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ, ਅਤੇ ਨਾਲ ਅਨੁਕੂਲਿਤ --bs-columnsਕਰੋ --bs-gap।

ਭਵਿੱਖ ਵਿੱਚ, ਬੂਟਸਟਰੈਪ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ ਇੱਕ ਹਾਈਬ੍ਰਿਡ ਹੱਲ ਵਿੱਚ ਤਬਦੀਲ ਹੋ ਜਾਵੇਗਾ ਕਿਉਂਕਿ gapਸੰਪੱਤੀ ਨੇ flexbox ਲਈ ਲਗਭਗ ਪੂਰਾ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਪ੍ਰਾਪਤ ਕਰ ਲਿਆ ਹੈ।

ਮੁੱਖ ਅੰਤਰ

ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਮੁਕਾਬਲੇ:

  • ਫਲੈਕਸ ਉਪਯੋਗਤਾਵਾਂ CSS ਗਰਿੱਡ ਕਾਲਮਾਂ ਨੂੰ ਉਸੇ ਤਰ੍ਹਾਂ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਕਰਦੀਆਂ ਹਨ।

  • ਗੈਪ ਗਟਰਾਂ ਦੀ ਥਾਂ ਲੈਂਦੇ ਹਨ। ਸੰਪੱਤੀ ਸਾਡੇ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਤੋਂ gapਹਰੀਜੱਟਲ ਨੂੰ ਬਦਲਦੀ ਹੈ ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਹੋਰ ਫੰਕਸ਼ਨ ਕਰਦੀ ਹੈ ।paddingmargin

  • ਜਿਵੇਂ ਕਿ, s ਦੇ ਉਲਟ .row, .grids ਦਾ ਕੋਈ ਨਕਾਰਾਤਮਕ ਮਾਰਜਿਨ ਨਹੀਂ ਹੈ ਅਤੇ ਗਰਿੱਡ ਗਟਰਾਂ ਨੂੰ ਬਦਲਣ ਲਈ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਗਰਿੱਡ ਗੈਪ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਰੂਪ ਵਿੱਚ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਅਨੁਕੂਲਿਤ ਸੈਕਸ਼ਨ ਦੇਖੋ ।

  • ਇਨਲਾਈਨ ਅਤੇ ਕਸਟਮ ਸਟਾਈਲ ਨੂੰ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, style="--bs-columns: 3;"ਬਨਾਮ class="row-cols-3") ਦੇ ਬਦਲ ਵਜੋਂ ਦੇਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

  • ਨੇਸਟਿੰਗ ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਇੱਕ ਨੇਸਟਡ ਦੇ ਹਰੇਕ ਮੌਕੇ 'ਤੇ ਆਪਣੇ ਕਾਲਮ ਦੀ ਗਿਣਤੀ ਨੂੰ ਰੀਸੈਟ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ .grid। ਵੇਰਵਿਆਂ ਲਈ ਆਲ੍ਹਣਾ ਭਾਗ ਵੇਖੋ ।

ਉਦਾਹਰਨਾਂ

ਤਿੰਨ ਕਾਲਮ

.g-col-4ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਾਰੇ ਵਿਊਪੋਰਟਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਤਿੰਨ ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ। ਵਿਊਪੋਰਟ ਆਕਾਰ ਦੁਆਰਾ ਖਾਕਾ ਬਦਲਣ ਲਈ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ।

.g-col-4
.g-col-4
.g-col-4 
<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ਜਵਾਬਦੇਹ

ਵਿਊਪੋਰਟਸ ਵਿੱਚ ਆਪਣੇ ਲੇਆਉਟ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਨ ਲਈ ਜਵਾਬਦੇਹ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇੱਥੇ ਅਸੀਂ ਸਭ ਤੋਂ ਤੰਗ ਵਿਊਪੋਰਟਾਂ 'ਤੇ ਦੋ ਕਾਲਮਾਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਮੱਧਮ ਵਿਊਪੋਰਟਾਂ ਅਤੇ ਇਸ ਤੋਂ ਉੱਪਰ ਦੇ ਤਿੰਨ ਕਾਲਮਾਂ ਤੱਕ ਵਧਦੇ ਹਾਂ।

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4 
<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

ਇਸ ਦੀ ਤੁਲਨਾ ਸਾਰੇ ਵਿਊਪੋਰਟਾਂ 'ਤੇ ਇਸ ਦੋ ਕਾਲਮ ਲੇਆਉਟ ਨਾਲ ਕਰੋ।

.g-col-6
.g-col-6 
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ਸਮੇਟਣਾ

ਗਰਿੱਡ ਆਈਟਮਾਂ ਆਟੋਮੈਟਿਕਲੀ ਅਗਲੀ ਲਾਈਨ 'ਤੇ ਲਪੇਟਦੀਆਂ ਹਨ ਜਦੋਂ ਖਿਤਿਜੀ ਤੌਰ 'ਤੇ ਕੋਈ ਹੋਰ ਥਾਂ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ gapਗਰਿੱਡ ਆਈਟਮਾਂ ਵਿਚਕਾਰ ਖਿਤਿਜੀ ਅਤੇ ਲੰਬਕਾਰੀ ਪਾੜੇ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।

.g-col-6
.g-col-6
.g-col-6
.g-col-6 
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ

ਸਟਾਰਟ ਕਲਾਸਾਂ ਦਾ ਉਦੇਸ਼ ਸਾਡੀ ਡਿਫੌਲਟ ਗਰਿੱਡ ਦੀਆਂ ਆਫਸੈੱਟ ਕਲਾਸਾਂ ਨੂੰ ਬਦਲਣਾ ਹੈ, ਪਰ ਉਹ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇੱਕੋ ਜਿਹੀਆਂ ਨਹੀਂ ਹਨ। CSS ਗਰਿੱਡ ਸਟਾਈਲ ਰਾਹੀਂ ਇੱਕ ਗਰਿੱਡ ਟੈਮਪਲੇਟ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ "ਇਸ ਕਾਲਮ ਤੋਂ ਸ਼ੁਰੂ" ਅਤੇ "ਇਸ ਕਾਲਮ 'ਤੇ ਖ਼ਤਮ ਹੋਣ ਲਈ ਕਹਿੰਦੇ ਹਨ।" ਉਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ grid-column-startਅਤੇ grid-column-end. ਸ਼ੁਰੂਆਤੀ ਕਲਾਸਾਂ ਸਾਬਕਾ ਲਈ ਸ਼ਾਰਟਹੈਂਡ ਹਨ। ਉਹਨਾਂ ਨੂੰ ਕਾਲਮ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਆਕਾਰ ਦੇ ਅਨੁਸਾਰ ਜੋੜੋ ਅਤੇ ਆਪਣੇ ਕਾਲਮਾਂ ਨੂੰ ਅਲਾਈਨ ਕਰੋ ਹਾਲਾਂਕਿ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ। ਸ਼ੁਰੂਆਤੀ ਕਲਾਸਾਂ ਇਹਨਾਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ ਇੱਕ ਅਵੈਧ ਮੁੱਲ ਦੇ 1ਤੌਰ 'ਤੇ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ।0

.ਜੀ-ਕੋਲ-3 .ਜੀ-ਸਟਾਰਟ-2
.ਜੀ-ਕੋਲ-4 .ਜੀ-ਸਟਾਰਟ-6 
<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ਆਟੋ ਕਾਲਮ

ਜਦੋਂ ਗਰਿੱਡ ਆਈਟਮਾਂ (a ਦੇ ਤਤਕਾਲੀ ਬੱਚੇ) 'ਤੇ ਕੋਈ ਕਲਾਸਾਂ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨ .grid, ਤਾਂ ਹਰੇਕ ਗਰਿੱਡ ਆਈਟਮ ਨੂੰ ਆਪਣੇ ਆਪ ਇੱਕ ਕਾਲਮ ਵਿੱਚ ਆਕਾਰ ਦਿੱਤਾ ਜਾਵੇਗਾ।

1
1
1
1
1
1
1
1
1
1
1
1 
<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ਇਸ ਵਿਵਹਾਰ ਨੂੰ ਗਰਿੱਡ ਕਾਲਮ ਕਲਾਸਾਂ ਨਾਲ ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।

.g-col-6
1
1
1
1
1
1 
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

ਆਲ੍ਹਣਾ

ਸਾਡੇ ਡਿਫਾਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਵਾਂਗ, ਸਾਡਾ CSS ਗਰਿੱਡ .grids ਦੇ ਆਸਾਨ ਆਲ੍ਹਣੇ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, ਡਿਫੌਲਟ ਦੇ ਉਲਟ, ਇਹ ਗਰਿੱਡ ਕਤਾਰਾਂ, ਕਾਲਮਾਂ ਅਤੇ ਅੰਤਰਾਲਾਂ ਵਿੱਚ ਬਦਲਾਅ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਣ 'ਤੇ ਗੌਰ ਕਰੋ:

  • ਅਸੀਂ ਇੱਕ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਕਾਲਮਾਂ ਦੀ ਡਿਫੌਲਟ ਸੰਖਿਆ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹਾਂ: --bs-columns: 3.
  • ਪਹਿਲੇ ਆਟੋ-ਕਾਲਮ ਵਿੱਚ, ਕਾਲਮ ਦੀ ਗਿਣਤੀ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੀ ਹੈ ਅਤੇ ਹਰੇਕ ਕਾਲਮ ਉਪਲਬਧ ਚੌੜਾਈ ਦਾ ਇੱਕ ਤਿਹਾਈ ਹੁੰਦਾ ਹੈ।
  • ਦੂਜੇ ਆਟੋ-ਕਾਲਮ ਵਿੱਚ, ਅਸੀਂ ਨੇਸਟਡ 'ਤੇ ਕਾਲਮ ਦੀ ਗਿਣਤੀ .gridਨੂੰ 12 (ਸਾਡੇ ਡਿਫਾਲਟ) 'ਤੇ ਰੀਸੈਟ ਕੀਤਾ ਹੈ।
  • ਤੀਜੇ ਆਟੋ-ਕਾਲਮ ਵਿੱਚ ਕੋਈ ਨੇਸਟਡ ਸਮੱਗਰੀ ਨਹੀਂ ਹੈ।

ਅਭਿਆਸ ਵਿੱਚ ਇਹ ਸਾਡੇ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਦੀ ਤੁਲਨਾ ਵਿੱਚ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਅਤੇ ਕਸਟਮ ਲੇਆਉਟ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।

ਪਹਿਲਾ ਸਵੈ-ਕਾਲਮ
ਆਟੋ-ਕਾਲਮ
ਆਟੋ-ਕਾਲਮ
ਦੂਜਾ ਆਟੋ-ਕਾਲਮ
12 ਵਿੱਚੋਂ 6
12 ਵਿੱਚੋਂ 4
12 ਵਿੱਚੋਂ 2
ਤੀਜਾ ਆਟੋ-ਕਾਲਮ 
<div class="grid" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

ਅਨੁਕੂਲਿਤ

ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ, ਕਤਾਰਾਂ ਦੀ ਸੰਖਿਆ, ਅਤੇ ਅੰਤਰਾਲ ਦੀ ਚੌੜਾਈ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ।

ਵੇਰੀਏਬਲ ਫਾਲਬੈਕ ਮੁੱਲ ਵਰਣਨ
--bs-rows 1 ਤੁਹਾਡੇ ਗਰਿੱਡ ਟੈਮਪਲੇਟ ਵਿੱਚ ਕਤਾਰਾਂ ਦੀ ਗਿਣਤੀ
--bs-columns 12 ਤੁਹਾਡੇ ਗਰਿੱਡ ਟੈਮਪਲੇਟ ਵਿੱਚ ਕਾਲਮਾਂ ਦੀ ਗਿਣਤੀ
--bs-gap 1.5rem ਕਾਲਮਾਂ ਵਿਚਕਾਰ ਪਾੜੇ ਦਾ ਆਕਾਰ (ਲੰਬਕਾਰੀ ਅਤੇ ਖਿਤਿਜੀ)

ਇਹਨਾਂ CSS ਵੇਰੀਏਬਲਾਂ ਦਾ ਕੋਈ ਡਿਫੌਲਟ ਮੁੱਲ ਨਹੀਂ ਹੈ; ਇਸਦੀ ਬਜਾਏ, ਉਹ ਫਾਲਬੈਕ ਮੁੱਲਾਂ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹਨ ਜੋ ਸਥਾਨਕ ਉਦਾਹਰਣ ਪ੍ਰਦਾਨ ਕੀਤੇ ਜਾਣ ਤੱਕ ਵਰਤੇ ਜਾਂਦੇ ਹਨ । ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ var(--bs-rows, 1)ਆਪਣੀਆਂ CSS ਗਰਿੱਡ ਕਤਾਰਾਂ ਲਈ ਵਰਤਦੇ ਹਾਂ, ਜੋ ਕਿ ਅਣਡਿੱਠ ਕਰ ਦਿੰਦੀਆਂ ਹਨ --bs-rowsਕਿਉਂਕਿ ਇਹ ਅਜੇ ਤੱਕ ਕਿਤੇ ਵੀ ਸੈੱਟ ਨਹੀਂ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ। ਇੱਕ ਵਾਰ ਇਹ ਹੋ ਜਾਣ 'ਤੇ, .gridਉਦਾਹਰਨ ਫਾਲਬੈਕ ਮੁੱਲ ਦੀ ਬਜਾਏ ਉਸ ਮੁੱਲ ਦੀ ਵਰਤੋਂ ਕਰੇਗੀ 1।

ਕੋਈ ਗਰਿੱਡ ਕਲਾਸਾਂ ਨਹੀਂ ਹਨ

ਦੇ ਤਤਕਾਲ ਬੱਚਿਆਂ ਦੇ ਤੱਤ .gridਗਰਿੱਡ ਆਈਟਮਾਂ ਹਨ, ਇਸਲਈ ਉਹਨਾਂ ਦਾ ਆਕਾਰ ਸਪਸ਼ਟ ਤੌਰ 'ਤੇ .g-colਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕੀਤੇ ਬਿਨਾਂ ਕੀਤਾ ਜਾਵੇਗਾ।

ਆਟੋ-ਕਾਲਮ
ਆਟੋ-ਕਾਲਮ
ਆਟੋ-ਕਾਲਮ 
<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ਕਾਲਮ ਅਤੇ ਪਾੜੇ

ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਅਤੇ ਅੰਤਰ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰੋ।

.g-col-2
.g-col-2 
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
.g-col-6
.g-col-4 
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

ਕਤਾਰਾਂ ਜੋੜੀਆਂ ਜਾ ਰਹੀਆਂ ਹਨ

ਹੋਰ ਕਤਾਰਾਂ ਨੂੰ ਜੋੜਨਾ ਅਤੇ ਕਾਲਮਾਂ ਦੀ ਪਲੇਸਮੈਂਟ ਬਦਲਣਾ:

ਆਟੋ-ਕਾਲਮ
ਆਟੋ-ਕਾਲਮ
ਆਟੋ-ਕਾਲਮ 
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

ਅੰਤਰਾਲ

ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਕੇ ਹੀ ਵਰਟੀਕਲ ਗੈਪ ਨੂੰ ਬਦਲੋ row-gap। ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ s gap'ਤੇ ਵਰਤਦੇ ਹਾਂ .grid, ਪਰ row-gapਅਤੇ column-gapਲੋੜ ਅਨੁਸਾਰ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ।

.g-col-6
.g-col-6
.g-col-6
.g-col-6 
<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ਇਸਦੇ ਕਾਰਨ, ਤੁਹਾਡੇ ਕੋਲ ਵੱਖ-ਵੱਖ ਲੰਬਕਾਰੀ ਅਤੇ ਲੇਟਵੇਂ gaps ਹੋ ਸਕਦੇ ਹਨ, ਜੋ ਇੱਕ ਸਿੰਗਲ ਵੈਲਯੂ (ਸਾਰੇ ਪਾਸੇ) ਜਾਂ ਮੁੱਲਾਂ ਦੀ ਇੱਕ ਜੋੜਾ (ਲੰਬਕਾਰੀ ਅਤੇ ਖਿਤਿਜੀ) ਲੈ ਸਕਦੇ ਹਨ। gapਇਸ ਨੂੰ , ਜਾਂ ਸਾਡੇ --bs-gapCSS ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਇੱਕ ਇਨਲਾਈਨ ਸ਼ੈਲੀ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ।

.g-col-6
.g-col-6
.g-col-6
.g-col-6 
<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ਸੱਸ

CSS ਗਰਿੱਡ ਦੀ ਇੱਕ ਸੀਮਾ ਇਹ ਹੈ ਕਿ ਸਾਡੀਆਂ ਡਿਫੌਲਟ ਕਲਾਸਾਂ ਅਜੇ ਵੀ ਦੋ Sass ਵੇਰੀਏਬਲਾਂ ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, $grid-columnsਅਤੇ $grid-gutter-width. ਇਹ ਸਾਡੇ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਵਿੱਚ ਤਿਆਰ ਕੀਤੀਆਂ ਕਲਾਸਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਪ੍ਰਭਾਵੀ ਢੰਗ ਨਾਲ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ। ਤੁਹਾਡੇ ਕੋਲ ਇੱਥੇ ਦੋ ਵਿਕਲਪ ਹਨ:

  • ਉਹਨਾਂ ਡਿਫੌਲਟ Sass ਵੇਰੀਏਬਲ ਨੂੰ ਸੋਧੋ ਅਤੇ ਆਪਣੇ CSS ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ।
  • ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਵਧਾਉਣ ਲਈ ਇਨਲਾਈਨ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਕਾਲਮ ਦੀ ਗਿਣਤੀ ਵਧਾ ਸਕਦੇ ਹੋ ਅਤੇ ਗੈਪ ਦਾ ਆਕਾਰ ਬਦਲ ਸਕਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਇਨਲਾਈਨ ਸਟਾਈਲ ਅਤੇ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ CSS ਗਰਿੱਡ ਕਾਲਮ ਕਲਾਸਾਂ (ਉਦਾਹਰਨ ਲਈ, .g-col-4) ਦੇ ਮਿਸ਼ਰਣ ਨਾਲ ਆਪਣੇ "ਕਾਲਮਾਂ" ਨੂੰ ਆਕਾਰ ਦੇ ਸਕਦੇ ਹੋ।

14 ਕਾਲਮ
.g-col-4 
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>