ሲኤስኤስ ግሪድ

ቡትስትራፕ ዝሰርሖ ነባሪ ስርዓተ ሽቦ፡ ጫፍ ናይቲ ንልዕሊ ዓሰርተ ዓመት ዝቐጸለ ሜላታት ኣቀማምጣ ሲኤስኤስ ዝውክል ኮይኑ፡ ብሚልዮናት ሰባት ዝተፈተነን ዝተፈተነን እዩ። ግን፡ ብዘይ ብዙሓት ዘመናዊ ናይ CSS ባህርያትን ሜላታትን ኣብ መርበብ ሓበሬታታት ከም ሓድሽ CSS Grid ንርእዮም ዘለና እውን ተፈጢሩ።

ከመይ ይሰርሕ

ምስ Bootstrap 5፡ ኣብ CSS Grid ዝተሃንጸ፡ ግን ከኣ Bootstrap twist ዘለዎ፡ ፍሉይ ስርዓተ ሽቦ ንምንቅስቓስ ዝብል ኣማራጺ ወሲኽና ኣለና። ሕጂ’ውን መልሲ ዝህቡ ኣቀማምጣታት ንምህናጽ ብፍቓድካ ከተመልክቶም እትኽእል ክፍልታት ትረክብ፣ ግን ኣብ ትሕቲ ሽፋን ብዝተፈላለየ ኣገባብ።

• CSS Grid ናይ ምምራጽ እዩ። ነቲ ነባሪ ስርዓተ ሽቦ ብምቕማጥ ኣሰናኽሎ $enable-grid-classes: falseእሞ ነቲ CSS Grid ብምቕማጥ ኣንቅሖ $enable-cssgrid: true። ድሕሪኡ፡ ሳስካ ዳግማይ ኣጠቓልል።

• .rowናይ ብ ኣጋጣሚታት ተክእ .grid። እቲ .gridክፍሊ ብኤችቲኤምኤልካ እትሃንጾ display: gridሓደ ይሰርዕን ይፈጥርን ።grid-template

• .col-*ንክላስ ብክላስ ምትካእ .g-col-*። እዚ ዝኾነሉ ምኽንያት ድማ ዓምድታት CSS Grid ናትና ኣብ grid-columnክንዲ width.

• ዓምድታትን ዓቐናት ጓተርን ብመንገዲ ተለዋዋጢ CSS ይቕመጡ። ነዚኦም ኣብቲ ወላዲ ኣቐምጦም .gridእሞ ብዝደለኻዮ ኣመዓራርዮም፣ ኣብ መስመር ወይ ኣብ ቅዲ ጽሑፍ፣ --bs-columnsብን --bs-gap.

ኣብ መጻኢ፡ ቡትስትራፕ ናብ ምትሕውዋስ ፍታሕ ክሰጋገር ተኽእሎ ኣሎ፡ ምኽንያቱ እቲ gapንብረት ንፍሌክስቦክስ ዳርጋ ምሉእ ናይ መርበብ ሓበሬታ ደገፍ ስለዝረኸበ።

ቁልፊ ፍልልያት

ምስቲ ነባሪ ስርዓት ሽቦ ክነጻጸር እንከሎ፤

• ፍሌክስ ዩቲሊቲታት ንዓምድታት CSS Grid ብተመሳሳሊ መንገዲ ኣይጸልውዎምን እዮም።

• ሃጓፋት ንመጉዳእቲ ጐዳጉዲ ይትክኦ። እቲ ንብረት ካብቲ ነባሪ ስርዓተ ሽቦና gapነቲ ኣግማድ ይትክኦን ዝያዳ ከም .paddingmargin

• ከምኡ ስለዝኾነ ድማ ዘይከም .rows .grids ኣሉታዊ ወሰን የብሎምን ማርጅን ዩቲሊቲታት ድማ ንናይ ሽቦ ጓተር ንምቕያር ክውዕሉ ኣይክእሉን እዮም። ናይ ሽቦ ክፍተታት ብነባሪ ብኣግማድን ብቐጥታን ይትግበሩ። ንዝያዳ ዝርዝር ሓበሬታ ኣብቲ ናይ ምምዕርራይ ክፍሊ ርአ ።

• ኣብ መስመርን ብሕታዊን ቅዲታት ከም መተካእታ ናይ መቐየሪ ክፍልታት ክረኣዩ ኣለዎም (ንኣብነት style="--bs-columns: 3;"፡ vs class="row-cols-3").

• ምድቃል ብተመሳሳሊ ይሰርሕ፣ ግን ኣብ ነፍሲ ወከፍ ኣጋጣሚ ናይ ሓደ ምድቃል ቁጽሪ ዓምድታትካ ዳግማይ ክትሰርዖ ከድልየካ ይኽእል እዩ .grid። ንዝርዝር ሓበሬታ ኣብቲ ናይ ምድቃል ክፍሊ ርአ ።

ኣብነታት

ሰለስተ ዓምድታት

ኣብ ኩሎም ቪውፖርትን መሳርሕታትን ሰለስተ ማዕረ ስፍሓት ዘለዎም ዓምድታት ነቶም .g-col-4ክፍልታት ብምጥቃም ክፈጥሩ ይኽእሉ። ነቲ ኣቀማምጣ ብዓቐን ቪውፖርት ንምቕያር ምላሽ ዝህቡ ክፍልታት ምውሳኽ ።

<div class="grid text-center">
  <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 text-center">
  <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 text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

መጠቕለሊ

ናይ ሽቦ ኣቑሑት ብኣውቶማቲክ ናብቲ ዝቕጽል መስመር ይጠቕልሉ ድሕሪ ሕጂ ብኣግማድ ቦታ ኣብ ዘይህልወሉ እዋን። ኣስተውዕል እቲ ኣብ gapመንጎ ኣቑሑት ሽቦ ንዘሎ ኣግማድን ቀጥታውን ክፍተት ከም ዝምልከት።

<div class="grid text-center">
  <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 ንኣሰጋገርቲ “ኣብዚ ዓምዲ ጀምር”ን “ኣብዚ ዓምዲ ውዳእ”ን ዝብሉ ቅዲታት ኣቢሉ ናይ ሽቦ ቅጥዒ ይፈጥር። እቶም ንብረታት grid-column-startድማን grid-column-end. ምጅማር ክፍልታት ንኣሕጽሮተ ቃላት ናይቲ ቀዳማይ እዩ። ምስቶም ዓምድታት ክፍልታት ኣጣምሮም ንዓምድታትካ ብዝደለኻዮ መጠን ዓቐኖምን ኣሰላልፍዎምን። 1Start classes ካብ as ይጅምሩ 0ነዞም ንብረታት ዘይሕጋዊ ዋጋ እዩ።

<div class="grid text-center">
  <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>

ኣውቶ ዓምድታት

ኣብቲ ናይ ሽቦ ኣቑሑት (እቶም ናይ ቀረባ ቆልዑ ናይ ሓደ ) ክፍልታት ኣብ ዘይህልዉሉ .gridእዋን፡ ነፍሲ ወከፍ ናይ ሽቦ ኣቕሓ ብኣውቶማቲክ ናብ ሓደ ዓምዲ ክዓቢ እዩ።

<div class="grid text-center">
  <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 text-center">
  <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>

ምድቃል

.gridልክዕ ከምቲ ናይ ነባሪ ስርዓተ ሽቦና፡ ናትና CSS Grid ን s ብቐሊሉ ንምስፋር የኽእል ። ይኹን እምበር፡ እዚ ሽቦ እዚ ዘይከምቲ ነባሪ፡ ኣብ መስመራት፡ ዓምድታትን ክፍተታትን ዝመጽእ ለውጢ ይወርስ። ነዚ ኣብ ታሕቲ ዘሎ ኣብነት ንርአ፤

• ነቲ ነባሪ ቁጽሪ ዓምድታት ብናይ ከባቢ CSS ተለዋዋጢ ንሽርሶ: --bs-columns: 3.
• ኣብቲ ቀዳማይ ኣውቶ-ዓምዲ፡ ቁጽሪ ዓምዲ ይውረስ እሞ ነፍሲ ወከፍ ዓምዲ ሓደ ሲሶ ናይቲ ዘሎ ስፍሓት ይኸውን።
• ኣብቲ ካልኣይ ኣውቶ-ዓምዲ፡ ኣብቲ ዝተሰነየ ቁጽሪ ዓምዲ .gridናብ 12 (ነባሪና) ዳግማይ ኣቐሚጥናዮ ኣለና።
• እቲ ሳልሳይ ኣውቶ-ዓምዲ ዝኾነ ዝተሰነየ ትሕዝቶ የብሉን።

ብተግባር እዚ ምስቲ ነባሪ ስርዓተ ሽቦና ክነጻጸር እንከሎ ዝያዳ ዝተሓላለኸን ብሕታዊን ኣቀማምጣ የኽእል።

<div class="grid text-center" 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 ተለዋዋጢ ረቛሒታት ኣመዓራርዮ።

እዞም CSS ተለዋዋጢ ዋጋታት ነባሪ ዋጋ የብሎምን፤ ኣብ ክንድኡስ ፡ ክሳብ ሓደ ከባብያዊ ምሳሌ ዝቐርብ ዝጥቀሙሉ ናይ ምምላስ ክብርታት ይትግበሩ። ንኣብነት var(--bs-rows, 1)ንCSS Grid መስመራትና ንጥቀመሉ፣ እዚ ሸለል --bs-rowsይብል ምኽንያቱ ንሱ ገና ኣብ ዝኾነ ቦታ ስለዘይተቐመጠ። ሓንሳብ ምስ ኮነ፡ እቲ .gridምሳሌ ኣብ ክንዲ ናይ ምምላስ ዋጋ ነቲ ዋጋ ክጥቀመሉ እዩ 1።

ናይ ሽቦ ክፍልታት የለን

ናይ ቀረባ ቆልዑ ባእታታት ናይ ሽቦ ነገራት እዮም፣ ስለዚ ብግልጺ ክፍሊ .gridከይወሰኹ ዓቐን ክግበረሎም እዩ ።.g-col

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ዓምድታትን ክፍተታትን

ብዝሒ ዓምድታትን ክፍተትን ኣስተኻኽል።

<div class="grid text-center" 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 text-center" 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 text-center" 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 text-center" 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>

ብሰንኪ እዚ ድማ ዝተፈላለዩ ቀጥታውን ኣግማድን s ክህልወካ ይኽእል እዩ gap፣ እዚኦም ድማ ሓደ ዋጋ (ኩሉ ወገን) ወይ ጽምዲ ክብርታት (ቀጥታውን ኣግማድን) ክወስድ ይኽእል። gapእዚ ብናይ ውሽጢ መስመር ቅዲ ን , ወይ ብናይ --bs-gapCSS ተለዋዋጢና ክትግበር ይከኣል ።

<div class="grid text-center" 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 Grid ነባሪ ክፍልታትና ጌና ብኽልተ Sass variables ዝፍጠሩ ምዃኖም እዩ፣ $grid-columnsከምኡውን $grid-gutter-width. እዚ ድማ ኣብቲ ዝተጠርነፈ CSSና ዝፍጠር ብዝሒ ክፍልታት ብኣድማዒ መንገዲ ኣቐዲሙ ይውስኖ። ኣብዚ ክልተ ኣማራጺታት ኣለዉኻ፤

• ነቶም ነባሪ ናይ Sass ተለዋዋጢ ረቛሒታት ኣዐርዮም እሞ CSSካ ዳግማይ ኣጠቓልሎም።
• ነቶም ዝተዋህቡ ክፍልታት ንምዕባይ ኣብ ውሽጢ መስመር ወይ ብሕታዊ ቅዲታት ተጠቐም።

ንኣብነት፡ ቁጽሪ ዓምድታት ክትውስኽን ዓቐን ክፍተት ክትቅይርን ትኽእል ኢኻ፡ ድሕሪኡ ድማ “ዓምድታትካ” ብሕውስዋስ ናይ ውሽጢ መስመር ቅዲታትን ኣቐዲሞም ዝተነጸሩ ናይ CSS Grid ዓምዲ ክፍልታትን (ንኣብነት .g-col-4፡ ) ክትዓዝኖም ትኽእል ኢኻ።

<div class="grid text-center" 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>