ސީއެސްއެސް ގްރިޑް އެވެ

ބޫޓްސްޓްރެޕްގެ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމަކީ އެތައް މިލިއަން ބަޔަކު ޓްރައިކޮށް ޓެސްޓްކޮށްފައިވާ ސީއެސްއެސް ލޭއައުޓް ޓެކްނިކްސްގެ ދިހަ އަހަރަށް ވުރެ ގިނަ ދުވަސް ވަންދެން ކުރިއަށް ގެންދިޔަ އުކުޅުތަކުގެ ނިމުމެކެވެ. އެކަމަކު، އެއީ ވެސް އާ ސީއެސްއެސް ގްރިޑް ފަދަ ބްރައުޒާތަކުން އަޅުގަނޑުމެންނަށް ފެންނަމުންދާ ޒަމާނީ ސީއެސްއެސްގެ ގިނަ ފީޗާސްތަކާއި އުކުޅުތަކެއް ނެތި އުފެއްދި އެއްޗެކެވެ.

އެކަން ކުރާ ގޮތް

ބޫޓްސްޓްރެޕް 5 އާއެކު، އަޅުގަނޑުމެން މިވަނީ ސީއެސްއެސް ގްރިޑްގައި ބިނާކޮށްފައިވާ، އެކަމަކު ބޫޓްސްޓްރެޕް ޓްވިސްޓެއް އެކުލެވޭ ވަކި ގްރިޑް ސިސްޓަމެއް އެނެބަލް ކުރުމުގެ އިޚްތިޔާރު އިތުރުކޮށްފައެވެ. އަދިވެސް ލިބެނީ ރެސްޕޮންސިވް ލޭއައުޓްތައް ބިނާކުރުމަށް ވިމްއެއްގައި އެޕްލައި ކުރެވޭނެ ކްލާސްތަކެއް ނަމަވެސް ހޫޑްގެ ދަށުގައި ތަފާތު ގޮތަކަށެވެ.

• ސީއެސްއެސް ގްރިޑް އަކީ އޮޕްޓް-އިން އެކެވެ. ސެޓްކޮށްގެން ޑިފޯލްޓް ގްރިޑް ސިސްޓަމް ޑިސެބިލްކޮށް ސެޓްކޮށްގެން $enable-grid-classes: falseސީއެސްއެސް ގްރިޑް އެނެބަލް ކުރުން $enable-cssgrid: true. ދެން، ތިބާގެ ސާސް އަލުން ކޮމްޕައިލް ކުރާށެވެ.

• ގެ އިންސްޓޭންސްތައް .rowބަދަލުކޮށްލާށެވެ .grid. ކްލާސް .gridސެޓްކޮށް display: gridއުފައްދަނީ grid-templateތިބާގެ އެޗްޓީއެމްއެލް އިން ބިނާކުރާ އެއްޗެކެވެ.

• .col-*ކްލާސްތަކުގެ ބަދަލުގައި ކްލާސްތައް ބަދަލުކުރުން .g-col-*. މިއީ އަޅުގަނޑުމެންގެ ސީއެސްއެސް ގްރިޑް ކޮލަމްތަކުގައި grid-columnޕްރޮޕަޓީގެ ބަދަލުގައި ބޭނުންކުރާތީއެވެ width.

• ކޮލަމްތަކާއި ގަޓަރ ސައިޒްތައް ސެޓްކުރަނީ ސީއެސްއެސް ވެރިއޭބަލްސް މެދުވެރިކޮށެވެ. މިކަންކަން ޕޭރެންޓްގައި ސެޓްކޮށް .grid، ބޭނުން ގޮތަކަށް ކަސްޓަމައިޒްކޮށް، އިންލައިން ނުވަތަ ސްޓައިލްޝީޓެއްގައި، --bs-columnsއަދި އާއި އެކު --bs-gap.

ކުރިއަށް އޮތްތަނުގައި ބޫޓްސްޓްރެޕް ހައިބްރިޑް ސޮލިއުޝަނަކަށް ބަދަލުވުމަކީ އެކަށީގެންވާ ކަމެއް ކަމަށާއި އެއީ އެ gapޕްރޮޕަޓީއަށް ފްލެކްސްބޮކްސްއަށް ގާތްގަނޑަކަށް ފުރިހަމަ ބްރައުޒާ ސަޕޯޓް ލިބިފައިވާތީ އެވެ.

މުހިންމު ތަފާތުތަކެވެ

ޑިފޯލްޓް ގްރިޑް ސިސްޓަމާ އަޅާބަލާއިރު:

• ފްލެކްސް ޔުޓިލިޓީސް އިން ސީއެސްއެސް ގްރިޑް ކޮލަމްތަކަށް އެއްގޮތަކަށް އަސަރު ނުކުރެއެވެ.

• ގޭޕްސް ބަދަލުކުރަނީ ގަޓަރުތަކެވެ. މި ޕްރޮޕަޓީ އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމުން gapހޮރައިޒޮންޓަލް ބަދަލުކޮށް މާ ބޮޑަށް ފަންކްޝަން ކުރަނީ .paddingmargin

• އެގޮތުން s އާއި ހިލާފަށް .rows ގައި .gridނެގެޓިވް މާރޖިންއެއް ނެތް ކަމަށާއި މާރޖިން ޔުޓިލިޓީސް ބޭނުންކޮށްގެން ގްރިޑް ގަޓަރުތައް ބަދަލު ނުކުރެވޭނެ ކަމަށް ވެސް ވިދާޅުވިއެވެ. ގްރިޑް ގޭޕްތައް ޑިފޯލްޓްކޮށް ހޮރައިޒޮންޓަލީ އަދި ވަރޓިކަލީ އަށް އަމަލުކުރެއެވެ. އިތުރު މަޢުލޫމާތު ހޯދުމަށް ކަސްޓަމައިޒިންގ ބައި ބައްލަވާށެވެ .

• އިންލައިން އަދި ކަސްޓަމް ސްޓައިލްތައް ބަލަންވާނީ މޮޑިފައި ކްލާސްތަކުގެ ބަދަލުގައި ބޭނުންކުރާ ސްޓައިލްތަކެއްގެ ގޮތުގައި (އެބަހީ، style="--bs-columns: 3;"vs class="row-cols-3").

• ނެސްޓިންގ ވެސް މިފަދައިން މަސައްކަތް ކުރާ ނަމަވެސް ނެސްޓް އެއްގެ ކޮންމެ އިންސްޓޭންސްއެއްގައި ކޮލަމް ކައުންޓްތައް ރީސެޓް ކުރަން ޖެހިދާނެއެވެ .grid. ތަފްސީލު ހޯދުމަށް ނެސްޓިންގ ބައި ބައްލަވާށެވެ .

މިސާލުތަކެވެ

ތިން ކޮލަމެވެ

.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>

ރައްދުދޭ

ވިއުޕޯޓްތަކުގެ ތެރެއިން ލޭއައުޓް އެޖެސްޓް ކުރުމަށް ރެސްޕޮންސިވް ކްލާސްތައް ބޭނުން ކުރާށެވެ. މިތަނުގައި އަޅުގަނޑުމެން ފަށަނީ އެންމެ ހަނި ވިއުޕޯޓްތަކުގައި ދެ ކޮލަމް އިން، އަދި ދެން މީޑިއަމް ވިއުޕޯޓްތަކާއި އެއަށްވުރެ މަތީގައިވާ ތިން ކޮލަމް އަށް ބޮޑުވެގެންނެވެ.

<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>

އެކަން ހުރިހާ ވިއުޕޯޓްތަކެއްގައި ހުންނަ މި ދެ ކޮލަމް ލޭއައުޓާ އަޅާކިޔާށެވެ.

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

އޮޅާލުމެވެ

ގްރިޑް އައިޓަމްތައް އޮޓޮމެޓިކުން ދެން އޮތް ލައިނަށް ވަށާލަނީ ހޮރޮޒޮންޓަލީ އިތުރު ޖާގައެއް ނެތުމުންނެވެ. gapގްރިޑް ތަކެތީގެ މެދުގައި ހުންނަ ހޮރައިޒޮންޓަލް އަދި ވަރޓިކަލް ގޭޕްތަކަށް ވެސް ޢަމަލުކުރެވޭކަން ފާހަގަކޮށްލެވެއެވެ .

<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>

ފަށަނީ

ސްޓާޓް ކްލާސްތަކުގެ މަޤްޞަދަކީ އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ގްރިޑްގެ އޮފްސެޓް ކްލާސްތައް ބަދަލުކުރުން ނަމަވެސް އެއީ މުޅިން އެއްގޮތް ކްލާސްތަކެއް ނޫނެވެ. ސީއެސްއެސް ގްރިޑް އިން ބްރައުޒާތަކަށް “މި ކޮލަމް އިން ފެށޭ” އަދި “މި ކޮލަމް އިން ނިމޭ” އަށް އަންގާ ސްޓައިލްތަކުގެ ތެރެއިން ގްރިޑް ޓެމްޕްލޭޓެއް އުފައްދައެވެ. އެ މުދަލަކީ grid-column-startއަދި grid-column-end. ސްޓާޓް ކްލާސްތަކަކީ ކުރީގެ ކްލާސްތަކުގެ ޝޯޓްހެންޑް އެވެ. އެތަކެތި ކޮލަމް ކްލާސްތަކާ ޖޯޑުކޮށް ތިބާގެ ކޮލަމްތައް ބޭނުންވާ މިންވަރަށް ސައިޒްކޮށް އެލައިން ކޮށްލާށެވެ. ސްޓާޓް ކްލާސްތައް ފެށެނީ މި ޕްރޮޕަޓީތަކަށް ސައްހަ ނޫން އަގެއް ކަމަށްވާ 1ފަދައިންނެވެ .0

<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) ކޮންމެ ގްރިޑް އައިޓަމެއް އޮޓޮމެޓިކުން އެއް ކޮލަމަކަށް ސައިޒް ކުރެވޭނެއެވެ.

<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>

މި ސުލޫކު ގްރިޑް ކޮލަމް ކްލާސްތަކާ އެއްކޮށްލެވިދާނެއެވެ.

<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>

ވަޅުލުން

އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމާ އެއްގޮތަށް، އަޅުގަނޑުމެންގެ ސީއެސްއެސް ގްރިޑްގެ ސަބަބުން .grids ގެ ފަސޭހައިން ނެސްޓިންގ ކުރެވޭނެއެވެ. ނަމަވެސް ޑިފޯލްޓް އާއި ހިލާފަށް މި ގްރިޑް އިން ރޯތަކާއި ކޮލަމްތަކާއި ގޭޕްތަކަށް އަންނަ ބަދަލުތައް ވާރުތަވެއެވެ. ތިރީގައިވާ މިސާލަށް ބަލާލާށެވެ.

• އަޅުގަނޑުމެން ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލް އެއް އެކުލެވޭ ޑިފޯލްޓް އަދަދުގެ ކޮލަމްތައް އޯވަރރައިޑް ކުރަން: --bs-columns: 3.
• ފުރަތަމަ އޮޓޯ ކޮލަމްގައި ކޮލަމް ކައުންޓް އިންހެރިޓް ކުރެވޭއިރު ކޮންމެ ކޮލަމަކީ ލިބެން ހުރި ފުޅާމިނުގެ ތިންބައިކުޅަ އެއްބައި ކަމަށް ވެސް ވިދާޅުވި އެވެ.
• ދެވަނަ އޮޓޯ ކޮލަމްގައި، އަޅުގަނޑުމެން ނެސްޓްކޮށްފައިވާ ކޮލަމް ކައުންޓް .grid12 (އަޅުގަނޑުމެންގެ ޑިފޯލްޓް) އަށް ރީސެޓްކޮށްފިން.
• ތިންވަނަ އޮޓޯ ކޮލަމްގައި ނެސްޓް ކޮންޓެންޓެއް ނެތެވެ.

ޢަމަލީގޮތުން މިއީ އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ގްރިޑް ސިސްޓަމާ އަޅާބަލާއިރު މާ ކޮމްޕްލެކްސް އަދި ކަސްޓަމް ލޭއައުޓްތައް ހެދުމުގެ ފުރުޞަތު ލިބިގެންދާ ކަމެކެވެ.

<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>

ކަސްޓަމައިޒް ކުރުން

ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްތަކާއެކު ކޮލަމްތަކުގެ އަދަދާއި، ރޯތަކުގެ އަދަދާއި، ގޭޕްތަކުގެ ފުޅާމިން ކަސްޓަމައިޒްކުރުން.

މި ސީއެސްއެސް ވެރިއޭބަލްތަކުގައި ޑިފޯލްޓް ވެލިއުއެއް ނެތެވެ؛ އޭގެ ބަދަލުގައި، ލޯކަލް އިންސްޓޭންސްއެއް ފޯރުކޮށްދިނުމަށް ދާންދެން ބޭނުންކުރާ ފޯލްބެކް ވެލިއުތައް އެމީހުން އަމަލުކުރެއެވެ . މިސާލަކަށް، var(--bs-rows, 1)އަޅުގަނޑުމެންގެ ސީއެސްއެސް ގްރިޑް ރޯތަކަށް އަޅުގަނޑުމެން ބޭނުންކުރަނީ، އެއީ --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>

ކޮލަމްތަކާއި ގޭޕްތަކެވެ

ކޮލަމްތަކުގެ އަދަދާއި ގޭޕް އެޖެސްޓް ކުރާށެވެ.

<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>

<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. gapއަޅުގަނޑުމެން s ގައި ބޭނުންކުރާކަން ފާހަގަކޮށްލަންޖެހޭ .grid، އެކަމަކު row-gapއަދި column-gapބޭނުންވާ ގޮތަށް ބަދަލުކުރެވިދާނެއެވެ.

<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-gapސީއެސްއެސް ވެރިއޭބަލް އާއި އެކު އެޕްލައި ކުރެވިދާނެ ކަމެކެވެ .

<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>

ސާސް އެވެ

ސީއެސްއެސް ގްރިޑްގެ އެއް ލިމިޓެޝަނަކީ އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ކްލާސްތައް އަދިވެސް ޖެނެރޭޓް ކުރެވެނީ ދެ ސާސް ވެރިއޭބަލް އިން ކަމެވެ، $grid-columnsއަދި $grid-gutter-width. މިއީ އަޅުގަނޑުމެންގެ ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައި އުފެދޭ ކްލާސްތަކުގެ އަދަދު ފައިދާހުރި ގޮތެއްގައި ކުރިން ކަނޑައެޅޭ ކަމެކެވެ. މިތަނުގައި ތިބާއަށް ދެ ގޮތެއް އެބައޮތެވެ:

• އެ ޑިފޯލްޓް ސާސް ވެރިއޭބަލްތައް ބަދަލުކޮށް ތިމާގެ ސީއެސްއެސް އަލުން ކޮމްޕައިލް ކުރާށެވެ.
• ފޯރުކޮށްދޭ ކްލާސްތައް އިތުރުކުރުމަށް އިންލައިން ނުވަތަ ކަސްޓަމް ސްޓައިލްތައް ބޭނުންކުރުން.

މިސާލަކަށް، ކޮލަމް ކައުންޓް އިތުރުކޮށް، ގޭޕް ސައިޒް ބަދަލުކޮށް، ދެން ތިމާގެ “ކޮލަމްތައް” ސައިޒް ކުރެވޭނީ އިންލައިން ސްޓައިލްތަކާއި ކުރިން ކަނޑައެޅިފައިވާ ސީއެސްއެސް ގްރިޑް ކޮލަމް ކްލާސްތައް (އެބަހީ، .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>