تۆڕی CSS
فێربە چۆن سیستەمی نەخشەی جێگرەوەمان چالاک بکەیت و بەکاری بهێنیت و خۆکارانە بکەیت کە لەسەر تۆڕی CSS دروستکراوە بە نموونە و پارچە کۆدەکان.
سیستەمی تۆڕی پێشوەختەی بووتستراپ نوێنەرایەتی لوتکەی زیاتر لە دە ساڵ تەکنیکەکانی داڕشتنی CSS دەکات، کە لەلایەن ملیۆنان کەسەوە تاقیکراونەتەوە و تاقیکراونەتەوە. بەڵام، هەروەها بەبێ زۆرێک لەو تایبەتمەندی و تەکنیکە مۆدێرنانەی CSS دروستکراوە کە لە وێبگەڕەکانی وەک CSS Grid ی نوێدا دەیبینین.
چۆن کاردەکات
لەگەڵ Bootstrap 5 بژاردەی چالاککردنی سیستەمێکی تۆڕی جیاوازمان زیاد کردووە کە لەسەر CSS Grid دروستکراوە، بەڵام بە پێچێکی Bootstrap. هێشتا پۆلەکانت دەست دەکەوێت کە دەتوانیت بە ئیحترامێک داواکاری پێشکەش بکەیت بۆ دروستکردنی نەخشە وەڵامدەرەوەکان، بەڵام بە رێبازێکی جیاواز لە ژێر کابۆکە.
-
تۆڕی CSS بریتییە لە بەشداریکردن. سیستەمی تۆڕی پێشوەختە بە ڕێکخستن لەکاربخە و تۆڕی
$enable-grid-classes: false
CSS بە ڕێکخستن چالاک بکە$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
. -
بەم شێوەیە، بە پێچەوانەی
.row
s،.grid
s هیچ پەراوێزێکی نەرێنی نییە و ناتوانرێت سوودمەندییەکانی پەراوێز بەکاربهێنرێت بۆ گۆڕینی کانییەکانی تۆڕ. بۆشاییەکانی تۆڕ بە شێوەی ئاسۆیی و ڕاست بە شێوەی پێشوەختە جێبەجێ دەکرێن. بۆ زانیاری زیاتر سەیری بەشی خۆکارکردن بکە. -
ستایلەکانی ناو هێڵ و تایبەتمەند دەبێ وەک جێگرەوەی پۆلەکانی دەستکاریکەر سەیر بکرێن (بۆ نموونە،
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
هێلانەکردن بە هەمان شێوە کاردەکات، بەڵام لەوانەیە پێویست بکات ژمارەی ستوونەکانت لەسەر هەر نموونەیەکی هێلانەکراو ڕێست بکەیتەوە
.grid
. بۆ زانیاری زیاتر سەیری بەشی هێلانەکردن بکە.
نموونە
سێ ستوون
دەتوانرێت سێ ستوونی پانایی یەکسان لە سەرانسەری هەموو ڤیوپۆرت و ئامێرەکاندا دروست بکرێت بە بەکارهێنانی .g-col-4
پۆلەکان. پۆلی وەڵامدەرەوە زیاد بکە بۆ گۆڕینی نەخشەکە بەپێی قەبارەی viewport.
<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>
دەست پێدەکات
ئامانجی پۆلەکانی دەستپێکردنە کە پۆلەکانی ئۆفسێتی تۆڕی پێشوەختەمان بگۆڕن، بەڵام بە تەواوی وەک یەک نین. تۆڕی CSS لە ڕێگەی ستایلەکانەوە قاڵبێکی تۆڕ دروست دەکات کە بە وێبگەڕەکان دەڵێن "لەم ستوونەوە دەست پێبکە" و "لەم ستوونەدا کۆتایی پێبهێنە." ئەو تایبەتمەندیانە بریتین لە 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>
هێلانەکردن
هاوشێوەی سیستەمی تۆڕی پێشوەختەمان، تۆڕی CSS ی ئێمە ڕێگە بە هێلانەکردنی ئاسانی .grid
s دەدات. بەڵام بە پێچەوانەی پێشوەختە، ئەم تۆڕە گۆڕانکاری لە ڕیز و ستوون و بۆشاییەکاندا بە میرات دەگرێت. ئەم نموونەیەی خوارەوە لەبەرچاو بگرە:
- ئێمە ژمارەی پێشوەختەی ستوونەکان بە گۆڕاوێکی CSS ناوخۆیی دەسڕینەوە:
--bs-columns: 3
. - لە یەکەم ستوونی ئۆتۆماتیکیدا ژمارەی ستوونەکان بە میرات دەگیرێت و هەر ستوونێک یەک لەسەر سێی پانایی بەردەستە.
- لە دووەم ستوونی ئۆتۆماتیکیدا، ژمارەی ستوونەکانمان لەسەر هێلانەکراوەکە ڕێست کردووەتەوە
.grid
بۆ 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>
ستوون و بۆشاییەکان
ژمارەی ستوونەکان و بۆشاییەکە ڕێکبخە.
<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
لەسەر .grid
s بەکاری دەهێنین، بەڵام 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>
بەهۆی ئەوەوە دەتوانیت s ی ڕاست و ئاسۆیی جیاوازت هەبێت gap
، کە دەتوانێت یەک بەها (هەموو لایەک) یان جووتێک بەها (ڕاست و ئاسۆیی) وەربگرێت. دەتوانرێت ئەمە بە شێوازێکی ناو هێڵ بۆ gap
, یان بە --bs-gap
گۆڕاوەی CSS ی ئێمە جێبەجێ بکرێت.
<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
).
<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>