اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

CSS گرډ

زده کړئ چې څنګه زموږ د بدیل ترتیب سیسټم فعالولو، کارولو او دودیز کولو لپاره په CSS گرډ کې جوړ شوی د مثالونو او کوډ ټوټې سره.

په دې پاڼه کې

د بوټسټریپ ډیفالټ گرډ سیسټم د یوې لسیزې څخه زیات د CSS ترتیب تخنیکونو پای ته رسوي چې د ملیونونو خلکو لخوا ازمول شوي او ازمول شوي. مګر، دا د ډیری عصري CSS ځانګړتیاو او تخنیکونو پرته هم رامینځته شوی چې موږ یې په براوزرونو کې ګورو لکه د نوي CSS گرډ.

خبرتیا—زموږ د CSS ګریډ سیسټم تجربوي دی او د v5.1.0 په څیر غوره شوی! موږ دا ستاسو لپاره د ښودلو لپاره زموږ د اسنادو په 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افقی ځای نیسي او د .paddingmargin

  • د دې په څیر، د .rows برعکس، .grids هیڅ منفي حاشیه نلري او د حاشیې اسانتیاوې د ګریډ ګټرونو بدلولو لپاره نشي کارول کیدی. د گرډ تشې په افقي او عمودي ډول د ډیفالټ لخوا پلي کیږي. د نورو جزیاتو لپاره د دودیز کولو برخه وګورئ.

  • انلاین او دودیز سټایلونه باید د بدلون کونکي ټولګیو لپاره د بدیل په توګه وکتل شي (د مثال په توګه ، style="--bs-columns: 3;"vs class="row-cols-3").

  • Nesting په ورته ډول کار کوي، مګر ممکن تاسو ته اړتیا ولري چې د nested په هر مثال کې خپل کالم حسابونه بیا تنظیم کړئ .grid. د جزیاتو لپاره د ځړولو برخه وګورئ.

مثالونه

درې کالمونه

.g-col-4په ټولو لیدونو او وسیلو کې درې مساوي پلن کالمونه د ټولګیو په کارولو سره رامینځته کیدی شي . ځواب ورکوونکي ټولګي اضافه کړئ ترڅو د لید پورټ اندازې سره ترتیب بدل کړئ.

.g-col-4
.g-col-4
.g-col-4
html 
<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>

ځواب ورکوونکی

د لید پورټونو په اوږدو کې خپل ترتیب تنظیم کولو لپاره ځواب ویونکي ټولګي وکاروئ. دلته موږ د دوه کالمونو سره په خورا تنګ لید پورټونو کې پیل کوو ، او بیا په متوسط ​​لید پورټونو او پورته دریو کالمونو ته وده ورکوو.

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html 
<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>

دا په ټولو لیدونو کې د دې دوه کالم ترتیب سره پرتله کړئ.

.g-col-6
.g-col-6
html 
<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گرډ توکو تر مینځ افقی او عمودی تشو باندې تطبیق کیږي.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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>

پیل کیږي

د پیل ټولګیو هدف زموږ د ډیفالټ گرډ آف سیٹ ټولګیو ځای په ځای کول دي ، مګر دا په بشپړ ډول ورته ندي. CSS گرډ د سټایلونو له لارې د گرډ ټیمپلیټ رامینځته کوي چې براوزر ته وايي چې "په دې کالم کې پیل کړئ" او "په دې کالم کې پای ته ورسوئ." دا ملکیتونه دي grid-column-startاو دي grid-column-end. د پیل ټولګي د پخوانیو لپاره لنډیز دي. دا د کالم ټولګیو سره د اندازې لپاره جوړه کړئ او خپل کالمونه په داسې حال کې تنظیم کړئ چې تاسو ورته اړتیا لرئ. د پیل ټولګي پیل کیږي 1لکه څنګه 0چې د دې ملکیتونو لپاره ناسم ارزښت دی.

.g-col-3 .g-Start-2
.g-col-4 .g-Start-6
html 
<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>

اتومات کالمونه

کله چې د گرډ توکي (د a سمدستي ماشومان) کې ټولګي شتون نلري .grid، هر گرډ توکي به په اوتومات ډول یو کالم ته اندازه شي.

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

دا چلند د گرډ کالم ټولګیو سره مخلوط کیدی شي.

.g-col-6
1
1
1
1
1
1
html 
<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 اسانه ځړولو لپاره اجازه ورکوي. په هرصورت، د ډیفالټ برعکس، دا گرډ په قطارونو، کالمونو او تشو کې بدلونونه په میراث پاتې دي. لاندې مثال ته پام وکړئ:

  • موږ د محلي CSS متغیر سره د کالمونو ډیفالټ شمیره له پامه غورځوو: --bs-columns: 3.
  • په لومړي اتومات کالم کې، د کالم شمیره میراث کیږي او هر کالم د موجود عرض دریمه برخه ده.
  • په دوهم اتومات کالم کې، موږ د کالم شمیره په نیسټ .gridکې 12 (زموږ ډیفالټ) ته بیا تنظیم کړې.
  • دریم اتومات کالم هیڅ نیست شوی مینځپانګه نلري.

په عمل کې دا زموږ د ډیفالټ گرډ سیسټم سره پرتله کولو کې ډیر پیچلي او دودیز ترتیبونو ته اجازه ورکوي.

لومړی اتومات کالم
اتومات کالم
اتومات کالم
دوهم اتومات کالم
6 د 12 څخه
4 د 12 څخه
2 د 12 څخه
دریم اتومات کالم
html 
<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>

دودیز کول

د محلي CSS متغیرونو سره د کالمونو شمیر، د قطارونو شمیر، او د تشو چوکۍ تنظیم کړئ.

متغیر د شاتړ ارزښت تفصیل
--bs-rows 1 ستاسو د گرډ ټیمپلیټ کې د قطارونو شمیر
--bs-columns 12 ستاسو د گرډ ټیمپلیټ کې د کالمونو شمیر
--bs-gap 1.5rem د کالمونو تر منځ د تشې اندازه (عمودی او افقی)

دا CSS متغیرات هیڅ اصلي ارزښت نلري؛ پرځای یې، دوی د بیرته راستنیدو ارزښتونه پلي کوي چې تر هغه وخته پورې کارول کیږي چې سیمه ایز مثال وړاندې شي. د مثال په توګه، موږ var(--bs-rows, 1)د خپلو CSS گرډ قطارونو لپاره کاروو، کوم چې له پامه غورځوي --bs-rowsځکه چې دا تر اوسه هیڅ ځای نه دی ټاکل شوی. یوځل چې دا وي ، .gridمثال به د فال بیک ارزښت پرځای دا ارزښت وکاروي 1.

د ګریډ ټولګي نشته

د ماشومانو سمدستي عناصر د .gridگرډ توکي دي، نو دوی به پرته له دې چې په واضح ډول .g-colټولګي اضافه کړي اندازه شي.

اتومات کالم
اتومات کالم
اتومات کالم
html 
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

کالمونه او تشې

د کالمونو شمیر او خلا تنظیم کړئ.

.g-col-2
.g-col-2
html 
<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>
.g-col-6
.g-col-4
html 
<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>

د قطارونو اضافه کول

د نورو قطارونو اضافه کول او د کالمونو ځای پرځای کول:

اتومات کالم
اتومات کالم
اتومات کالم
html 
<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د اړتیا سره سم تعدیل کیدی شي.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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>

د دې له امله، تاسو کولی شئ مختلف عمودی او افقی gaps ولرئ، کوم چې کولی شي یو واحد ارزښت (ټول اړخونه) یا یو جوړه ارزښت (عمودی او افقی) واخلي. دا د انلاین سټایل gapسره یا زموږ د --bs-gapCSS متغیر سره پلي کیدی شي.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html 
<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) سره خپل "کالمونه" اندازه کړئ.

14 کالمونه
.g-col-4
html 
<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>