تۆڕی CSS

فێربە چۆن سیستەمی نەخشەی جێگرەوەمان چالاک بکەیت و بەکاری بهێنیت و خۆکارانە بکەیت کە لەسەر تۆڕی CSS دروستکراوە بە نموونە و پارچە کۆدەکان.

لەم پەیجەدا

سیستەمی تۆڕی پێشوەختەی بووتستراپ نوێنەرایەتی لوتکەی زیاتر لە دە ساڵ تەکنیکەکانی داڕشتنی CSS دەکات، کە لەلایەن ملیۆنان کەسەوە تاقیکراونەتەوە و تاقیکراونەتەوە. بەڵام، هەروەها بەبێ زۆرێک لەو تایبەتمەندی و تەکنیکە مۆدێرنانەی CSS دروستکراوە کە لە وێبگەڕەکانی وەک CSS Grid ی نوێدا دەیبینین.

سەری بەرز بێتەوە-سیستەمی تۆڕی CSS ی ئێمە تاقیکارییە و لە v5.1.0 ەوە بەشداریکردنە! ئێمە لە CSS ی بەڵگەنامەکانماندا جێگیرمان کردووە بۆ ئەوەی بۆت نیشان بدەین، بەڵام بە شێوازی پێشوەختە لەکارخراوە. بەردەوام بە لە خوێندنەوە بۆ ئەوەی بزانیت چۆن لە پرۆژەکانتدا چالاکی بکەیت.

چۆن کاردەکات

لەگەڵ Bootstrap 5 بژاردەی چالاککردنی سیستەمێکی تۆڕی جیاوازمان زیاد کردووە کە لەسەر CSS Grid دروستکراوە، بەڵام بە پێچێکی Bootstrap. هێشتا پۆلەکانت دەست دەکەوێت کە دەتوانیت بە ئیحترامێک داواکاری پێشکەش بکەیت بۆ دروستکردنی نەخشە وەڵامدەرەوەکان، بەڵام بە رێبازێکی جیاواز لە ژێر کابۆکە.

تۆڕی CSS بریتییە لە بەشداریکردن. سیستەمی تۆڕی پێشوەختە بە ڕێکخستن لەکاربخە و تۆڕی $enable-grid-classes: falseCSS بە ڕێکخستن چالاک بکە $enable-cssgrid: true. پاشان، ساسەکەت دووبارە کۆبکەرەوە.
نموونەکانی .rowبە بگۆڕە .grid. پۆلەکە .gridکۆمەڵێک دادەنێت display: gridو دروستی دەکات grid-templateکە تۆ بە HTMLەکەت لەسەری بنیات دەنێیت.
.col-*پۆلەکان بە پۆلەکان بگۆڕە .g-col-*. ئەمەش لەبەر ئەوەیە کە ستوونەکانی CSS Grid ی ئێمە grid-columnلەبری width.
قەبارەی ستوونەکان و کانیاوەکان لە ڕێگەی گۆڕاوەکانی CSS دادەنرێت. ئەمانە لەسەر دایک .gridو باوکەکە دابنێ و بە هەر شێوەیەک بتەوێت خۆکارانە بکە، لەناو هێڵدا یان لە ستایلشێتێکدا، بە --bs-columnsو --bs-gap.

لە داهاتوودا، پێدەچێت Bootstrap بگۆڕێت بۆ چارەسەرێکی تێکەڵاو چونکە gapتایبەتمەندییەکە نزیکەی پشتگیری تەواوی وێبگەڕی بۆ flexbox بەدەستهێناوە.

جیاوازییە سەرەکییەکان

بە بەراورد لەگەڵ سیستەمی تۆڕی پێشوەختە:

سوودمەندییەکانی Flex بە هەمان شێوە کاریگەرییان لەسەر ستوونەکانی CSS Grid نییە.
بۆشاییەکان جێگەی کانیاوەکان دەگرێتەوە. تایبەتمەندییەکە gapجێگەی ئاسۆیی paddingلە سیستەمی تۆڕی پێشوەختەمان دەگرێتەوە و زیاتر وەک margin.
بەم شێوەیە، بە پێچەوانەی .rows، .grids هیچ پەراوێزێکی نەرێنی نییە و ناتوانرێت سوودمەندییەکانی پەراوێز بەکاربهێنرێت بۆ گۆڕینی کانییەکانی تۆڕ. بۆشاییەکانی تۆڕ بە شێوەی ئاسۆیی و ڕاست بە شێوەی پێشوەختە جێبەجێ دەکرێن. بۆ زانیاری زیاتر سەیری بەشی خۆکارکردن بکە.
ستایلەکانی ناو هێڵ و تایبەتمەند دەبێ وەک جێگرەوەی پۆلەکانی دەستکاریکەر سەیر بکرێن (بۆ نموونە، style="--bs-columns: 3;"vs class="row-cols-3").
هێلانەکردن بە هەمان شێوە کاردەکات، بەڵام لەوانەیە پێویست بکات ژمارەی ستوونەکانت لەسەر هەر نموونەیەکی هێلانەکراو ڕێست بکەیتەوە .grid. بۆ زانیاری زیاتر سەیری بەشی هێلانەکردن بکە.

نموونە

سێ ستوون

دەتوانرێت سێ ستوونی پانایی یەکسان لە سەرانسەری هەموو ڤیوپۆرت و ئامێرەکاندا دروست بکرێت بە بەکارهێنانی .g-col-4پۆلەکان. پۆلی وەڵامدەرەوە زیاد بکە بۆ گۆڕینی نەخشەکە بەپێی قەبارەی viewport.

.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

<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-column-startو grid-column-end. پۆلەکانی دەستپێکردن کورتکراوەن بۆ یەکەمیان. لەگەڵ پۆلەکانی ستوونەکاندا جووتیان بکە بۆ قەبارە و ڕێکخستنی ستوونەکانت بە هەر شێوەیەک پێویستت پێی بێت. پۆلەکانی دەستپێکردن لە 1وەک 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>

ستوونی ئۆتۆماتیکی

کاتێک هیچ پۆلێک لەسەر بابەتە تۆڕەکان نییە (منداڵەکانی دەستبەجێی a .grid)، هەر بابەتە تۆڕێک بە شێوەیەکی ئۆتۆماتیکی قەبارەی بۆ یەک ستوون دەبێت.

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

<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 (بەپێی پێشوەختەی ئێمە).
سێیەم ستوونی ئۆتۆماتیکی هیچ ناوەڕۆکێکی هێلانەکراوی نییە.

لە پراکتیکدا ئەمە ڕێگە بە نەخشەی ئاڵۆزتر و تایبەتمەند دەدات کاتێک بەراورد دەکرێت بە سیستەمی تۆڕی پێشوەختەمان.

یەکەم ستوونی ئۆتۆماتیکی

ستوونی ئۆتۆماتیکی

دووەم ستوونی ئۆتۆماتیکی

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نموونەکە ئەو بەهایە بەکاردەهێنێت لەبری بەهای fallback ی 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لەسەر .grids بەکاری دەهێنین، بەڵام 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-gapگۆڕاوەی CSS ی ئێمە جێبەجێ بکرێت.

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