ሲኤስኤስ ግሪድ

ኣብ CSS Grid ዝተሃንጸ ኣማራጺ ኣቀማምጣ ስርዓትና ብኣብነታትን ቁንጣሮ ኮድን ከመይ ጌርካ ከም እነኽእሎ፡ ንጥቀመሉን ከም እንሰርሖን ተማሃር።

ኣብዚ ገጽ

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

Heads up—ናትና CSS Grid ስርዓት ፈተነን opt-in ካብ v5.1.0 ጀሚሩ እዩ! ንዓኹም ንምርኣይ ኣብ ናይ ሰነድና CSS ኣካቲትናዮ ኣለና፡ ግን ብነባሪ ተሰናኺሉ ኣሎ። ኣብ ፕሮጀክትታትካ ከመይ ጌርካ ከም እተኽእሎ ንምፍላጥ ንባብካ ቀጽል።

ከመይ ይሰርሕ

ምስ 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ክፍልታት ብምጥቃም ክፈጥሩ ይኽእሉ። ነቲ ኣቀማምጣ ብዓቐን ቪውፖርት ንምቕያር ምላሽ ዝህቡ ክፍልታት ምውሳኽ ።

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

ምላሽ ዝህብ

ኣብ መላእ ቪውፖርትታት ንኣቀማምጣኻ ንምትዕርራይ ምላሽ ዝህቡ ክፍልታት ተጠቐም። ኣብዚ ኣብቲ ዝጸበበ ቪውፖርት ብኽልተ ዓምድታት ንጅምር፣ ድሕሪኡ ኣብ ማእከላይ ቪውፖርትን ልዕሊኡን ናብ ሰለስተ ዓምድታት ንዓብ።

.ግ-ኮል-6 .ግ-ኮል-ምድ-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 ዝብል ጽሑፍ ኣሎ።

<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 ዝብል ጽሑፍ ኣሎ።

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

.g-col-3 .g-ምጅማር-2

.g-col-4 .g-ምጅማር-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>

ኣውቶ ዓምድታት

ኣብቲ ናይ ሽቦ ኣቑሑት (እቶም ናይ ቀረባ ቆልዑ ናይ ሓደ ) ክፍልታት ኣብ ዘይህልዉሉ .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>

እዚ ባህሪ ምስ ናይ ሽቦ ዓምዲ ክፍልታት ክሕወስ ይኽእል።

.g-col-6 ዝብል ጽሑፍ ኣሎ።

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

ምድቃል

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

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

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

ቀዳማይ ኣውቶ-ዓምዲ

ኣውቶ-ዓምዲ

ካልኣይ ኣውቶ-ዓምዲ

6 ካብ 12

4 ካብ 12

2 ካብ 12

ሳልሳይ ኣውቶ-ዓምዲ

<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 Grid መስመራትና ንጥቀመሉ፣ እዚ ሸለል --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 ዝብል ጽሑፍ ኣሎ።

<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. gapኣብ s ከም እንጥቀም ኣስተውዕል .grid፡ ግን row-gapከምኡ’ውን column-gapከም ኣድላይነቱ ክንቅይሮ ንኽእል ኢና።

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

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

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

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

ንኣብነት፡ ቁጽሪ ዓምድታት ክትውስኽን ዓቐን ክፍተት ክትቅይርን ትኽእል ኢኻ፡ ድሕሪኡ ድማ “ዓምድታትካ” ብሕውስዋስ ናይ ውሽጢ መስመር ቅዲታትን ኣቐዲሞም ዝተነጸሩ ናይ CSS Grid ዓምዲ ክፍልታትን (ንኣብነት .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>