የሲኤስኤስ ፍርግርግ

የቡትስትራፕ ነባሪ ፍርግርግ ስርዓት በሚሊዮኖች የሚቆጠሩ ሰዎች የተሞከሩ እና የተሞከሩ ከአስር አመታት በላይ የቆዩ የሲኤስኤስ አቀማመጥ ቴክኒኮችን ፍጻሜ ይወክላል። ነገር ግን፣ እንደ አዲሱ የ CSS ግሪድ ባሉ አሳሾች ውስጥ የምናያቸው ብዙ ዘመናዊ የሲኤስኤስ ባህሪያት እና ቴክኒኮች ሳይኖሩ ተፈጠረ።

እንዴት እንደሚሰራ

በBootstrap 5፣ በCSS Grid ላይ ግን በBootstrap ጠመዝማዛ የተለየ የፍርግርግ ስርዓት ለማንቃት አማራጩን አክለናል። አሁንም ምላሽ ሰጪ አቀማመጦችን ለመገንባት በፍላጎት ማመልከት የምትችላቸው ትምህርቶችን ታገኛለህ፣ ነገር ግን በኮፈኑ ስር በተለየ አቀራረብ።

• CSS ግሪድ መርጦ ገብቷል። በማቀናበር ነባሪውን የፍርግርግ ስርዓት ያሰናክሉ $enable-grid-classes: falseእና በማቀናበር የሲኤስኤስ ግሪድ ያንቁ $enable-cssgrid: true። ከዚያ የእርስዎን Sass እንደገና ያጠናቅቁ።

• .rowምሳሌዎችን በ ጋር ይተኩ .grid። ክፍሉ በኤችቲኤምኤልዎ .gridየገነቡትን ያዘጋጃል display: gridእና ይፈጥራል ።grid-template

• .col-*ክፍሎችን በክፍል ይተኩ .g-col-*. ይህ የሆነበት ምክንያት የእኛ የሲኤስኤስ ግሪድ አምዶች grid-columnንብረቱን ከመጠቀም ይልቅ ስለሚጠቀሙ ነው width።

• የአምዶች እና የጋተር መጠኖች በCSS ተለዋዋጮች ይቀናበራሉ። እነዚህን በወላጅ ላይ ያዋቅሩ .gridእና የሚፈልጉትን ያብጁ፣ በመስመር ውስጥ ወይም በቅጥ ሉህ በ --bs-columnsእና --bs-gap።

gapለወደፊቱ፣ ንብረቱ ለflexbox ሙሉ የአሳሽ ድጋፍ ስላገኘ ቡትስትራፕ ወደ ድብልቅ መፍትሄ ሊሸጋገር ይችላል።

ቁልፍ ልዩነቶች

ከነባሪው የፍርግርግ ስርዓት ጋር ሲነጻጸር፡-

• Flex መገልገያዎች የCSS ግሪድ አምዶችን በተመሳሳይ መንገድ አይነኩም።

• ክፍተቶች ቦይዎችን ይተካሉ። ንብረቱ አግዳሚውን ከነባሪ የፍርግርግ ስርዓታችን gapይተካዋል እና የበለጠ ይሰራል ።paddingmargin

• እንደዚ፣ ከኤስ በተለየ .row፣ .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>

ይጀምራል

የመጀመርያ ክፍሎች አላማችን ነባሪ የፍርግርግ ማካካሻ ክፍሎቻችንን ለመተካት ነው፣ነገር ግን ሙሉ ለሙሉ አንድ አይነት አይደሉም። ሲኤስኤስ ግሪድ አሳሾች “ከዚህ አምድ እንዲጀምሩ” እና “በዚህ አምድ እንዲጨርሱ” በሚነግሩ ቅጦች የፍርግርግ አብነት ይፈጥራል። እነዚያ ንብረቶች grid-column-startእና ናቸው grid-column-end. ጅምር ክፍሎች ለቀድሞው አጭር ናቸው። ከዓምዱ ክፍሎች ጋር በማጣመር ልክ እንደፈለጉት እና ዓምዶችዎን ያስተካክሉ። ለነዚህ ንብረቶች ልክ ያልሆነ ዋጋ 1እንደ መጀመር ክፍሎች ይጀምራሉ ።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>

መክተቻ

ልክ እንደ ነባሪ የፍርግርግ ስርዓታችን፣ የእኛ CSS ግሪድ በቀላሉ የ .grids መክተቻ ይፈቅዳል። ነገር ግን፣ ከነባሪው በተለየ፣ ይህ ፍርግርግ በረድፎች፣ አምዶች እና ክፍተቶች ላይ ለውጦችን ይወርሳል። የሚከተለውን ምሳሌ ተመልከት።

• ነባሪውን የአምዶች ቁጥር በአካባቢያዊ የሲኤስኤስ ተለዋዋጭ --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>

ማበጀት

የአምዶች ብዛት፣ የረድፎች ብዛት እና የክፍተቶቹን ስፋት ከአካባቢያዊ የሲኤስኤስ ተለዋዋጮች ጋር አብጅ።

እነዚህ የሲኤስኤስ ተለዋዋጮች ምንም ነባሪ ዋጋ የላቸውም; በምትኩ፣ የአካባቢ ምሳሌ እስካልቀረበ ድረስ ጥቅም ላይ የሚውሉ የመውደቅ እሴቶችን ይተገብራሉ ። ለምሳሌ፣ var(--bs-rows, 1)ለCSS ግሪድ ረድፎቻችን እንጠቀማለን፣ ይህም --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በ .grids ላይ እንደምንጠቀም ልብ ይበሉ ፣ ግን 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 ግሪድ አንዱ ገደብ የእኛ ነባሪ ክፍሎቻችን አሁንም በሁለት Sass ተለዋዋጮች መፈጠሩ $grid-columnsእና $grid-gutter-widthነው። ይህ በእኛ በተጠናቀረ CSS ውስጥ የሚፈጠሩትን የክፍሎች ብዛት በትክክል ይወስናል። እዚህ ሁለት አማራጮች አሉዎት፡-

• እነዚያን ነባሪ የ Sass ተለዋዋጮች ይቀይሩ እና የእርስዎን CSS እንደገና ያጠናቅቁ።
• የቀረቡትን ክፍሎች ለመጨመር የመስመር ውስጥ ወይም ብጁ ቅጦችን ይጠቀሙ።

ለምሳሌ፣ የአምድ ቆጠራውን ከፍ ማድረግ እና ክፍተቱን መጠን መቀየር፣ እና በመቀጠል የእርስዎን "አምዶች" በውስጥ መስመር ቅጦች እና ቀድሞ በተገለጹት የCSS ግሪድ አምድ ክፍሎች (ለምሳሌ .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>