CSS گرډ
زده کړئ چې څنګه زموږ د بدیل ترتیب سیسټم فعالولو، کارولو او دودیز کولو لپاره په CSS گرډ کې جوړ شوی د مثالونو او کوډ ټوټې سره.
د بوټسټریپ ډیفالټ گرډ سیسټم د یوې لسیزې څخه زیات د CSS ترتیب تخنیکونو پای ته رسوي چې د ملیونونو خلکو لخوا ازمول شوي او ازمول شوي. مګر، دا د ډیری عصري CSS ځانګړتیاو او تخنیکونو پرته هم رامینځته شوی چې موږ یې په براوزرونو کې ګورو لکه د نوي CSS گرډ.
څنګه کار کوي
د بوټسټریپ 5 سره ، موږ د جلا گرډ سیسټم فعالولو اختیار اضافه کړی چې په CSS گرډ کې جوړ شوی ، مګر د بوټسټریپ ټویسټ سره. تاسو لاهم ټولګي ترلاسه کوئ تاسو کولی شئ د ځواب ویونکي ترتیبونو رامینځته کولو لپاره په زړه پورې غوښتنه وکړئ ، مګر د هوډ لاندې د مختلف چلند سره.
-
CSS گرډ غوره شوی دی. د ترتیب کولو له لارې د ډیفالټ گرډ سیسټم غیر فعال کړئ
$enable-grid-classes: false
او د ترتیب سره د CSS گرډ فعال کړئ$enable-cssgrid: true
. بیا، خپل Sass بیا تنظیم کړئ. -
د مثالونو
.row
سره بدل کړئ.grid
..grid
ټولګی هغه سیټdisplay: grid
او رامینځته کويgrid-template
چې تاسو یې د خپل HTML سره جوړ کړئ. -
ټولګي
.col-*
د ټولګیو سره بدل کړئ.g-col-*
. دا ځکه چې زموږ د CSS گرډ کالمونه دgrid-column
ځای پرځای ملکیت کارويwidth
. -
د کالمونو او ګټر اندازې د CSS متغیرونو له لارې تنظیم شوي. دا په مور
.grid
او پلار کې تنظیم کړئ او هر هغه څه چې تاسو یې غواړئ تنظیم کړئ ، انلاین یا سټایل شیټ کې ، سره--bs-columns
او--bs-gap
.
په راتلونکي کې ، بوټسټریپ به احتمالا هایبرډ حل ته واړوي ځکه چې gap
ملکیت د فلیکس باکس لپاره نږدې بشپړ براوزر ملاتړ ترلاسه کړی.
کلیدي توپیرونه
د ډیفالټ گرډ سیسټم په پرتله:
-
د فلیکس اسانتیاوې په ورته ډول د CSS گرډ کالمونو اغیزه نه کوي.
-
تشې د ګترونو ځای نیسي. ملکیت زموږ د ډیفالټ گرډ سیسټم څخه
gap
افقی ځای نیسي او د .padding
margin
-
د دې په څیر، د
.row
s برعکس،.grid
s هیڅ منفي حاشیه نلري او د حاشیې اسانتیاوې د ګریډ ګټرونو بدلولو لپاره نشي کارول کیدی. د گرډ تشې په افقي او عمودي ډول د ډیفالټ لخوا پلي کیږي. د نورو جزیاتو لپاره د دودیز کولو برخه وګورئ. -
انلاین او دودیز سټایلونه باید د بدلون کونکي ټولګیو لپاره د بدیل په توګه وکتل شي (د مثال په توګه ،
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Nesting په ورته ډول کار کوي، مګر ممکن تاسو ته اړتیا ولري چې د nested په هر مثال کې خپل کالم حسابونه بیا تنظیم کړئ
.grid
. د جزیاتو لپاره د ځړولو برخه وګورئ.
مثالونه
درې کالمونه
.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>
ځواب ورکوونکی
د لید پورټونو په اوږدو کې خپل ترتیب تنظیم کولو لپاره ځواب ویونکي ټولګي وکاروئ. دلته موږ د دوه کالمونو سره په خورا تنګ لید پورټونو کې پیل کوو ، او بیا په متوسط لید پورټونو او پورته دریو کالمونو ته وده ورکوو.
<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 گرډ قطارونو لپاره کاروو، کوم چې له پامه غورځوي --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>
کالمونه او تشې
د کالمونو شمیر او خلا تنظیم کړئ.
<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>
د دې له امله، تاسو کولی شئ مختلف عمودی او افقی gap
s ولرئ، کوم چې کولی شي یو واحد ارزښت (ټول اړخونه) یا یو جوړه ارزښت (عمودی او افقی) واخلي. دا د انلاین سټایل 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>