CSS Grid

Bootstrap نىڭ سۈكۈتتىكى تور سىستېمىسى نەچچە ئون يىلدىن بۇيان سىناق قىلىنغان CSS ئورۇنلاشتۇرۇش تېخنىكىسىنىڭ يۇقىرى پەللىسىگە ۋەكىللىك قىلىدۇ. ئەمما ، ئۇ يېڭى CSS تورىغا ئوخشاش توركۆرگۈچلەردە كۆرۈۋاتقان نۇرغۇن زامانىۋى CSS ئىقتىدارلىرى ۋە تېخنىكىلىرىسىز بارلىققا كەلگەن.

قانداق ئىشلەيدۇ

Bootstrap 5 ئارقىلىق ، CSS تورىدا ياسالغان ، ئەمما Bootstrap ئەگرى-توقاي بولغان ئايرىم تور سىستېمىسىنى قوزغىتىش تاللانمىسىنى قوشتۇق. سىز يەنىلا ئىنكاس لايىھىسىنى قۇرۇش ئۈچۈن خالىغانچە ئىلتىماس قىلسىڭىز بولىدۇ ، ئەمما ماتورنىڭ ئاستىدا باشقىچە ئۇسۇل بار.

• CSS Grid تاللانغان. تەڭشەش ئارقىلىق سۈكۈتتىكى تور سىستېمىسىنى چەكلەڭ $enable-grid-classes: falseۋە تەڭشەش ئارقىلىق CSS تورىنى قوزغىتىڭ $enable-cssgrid: true. ئاندىن ، سانىڭىزنى قايتا ئويلاڭ.

• مىساللارنى .rowئالماشتۇرۇڭ .grid. دەرسلىك .gridHTML ئارقىلىق قۇرغان display: gridۋە قۇرغان grid-template.

• .col-*دەرسلەرنى دەرسكە ئالماشتۇرۇڭ .g-col-*. چۈنكى بىزنىڭ CSS Grid تۈۋرۈكىمىز grid-columnئۇنىڭ ئورنىغا خاسلىقنى ئىشلىتىدۇ width.

• ستون ۋە ئۆستەڭنىڭ ئۆلچىمى CSS ئۆزگەرگۈچى مىقدار ئارقىلىق تەڭشىلىدۇ. بۇلارنى ئاتا-ئانىغا تەڭشەڭ .grid، خالىغانچە ، سىزىقچە ياكى ئۇسلۇب جەدۋىلىدە ، --bs-columnsۋە --bs-gap.

كەلگۈسىدە Bootstrap بەلكىم ئارىلاش ماتورلۇق ھەل قىلغۇچقا ئۆزگىرىشى مۇمكىن ، چۈنكى بۇ gapمۈلۈك flexbox نى تور كۆرگۈنىڭ تولۇق قوللىشىغا ئېرىشتى.

ئاچقۇچلۇق پەرقى

سۈكۈتتىكى تور سىستېمىسىغا سېلىشتۇرغاندا:

• ئەۋرىشىم ئەسلىھەلىرى ئوخشاشلا CSS كاتەكچە تۈۋرۈكىگە تەسىر كۆرسەتمەيدۇ.

• بوشلۇقلار ئۆستەڭنىڭ ئورنىنى ئالىدۇ. بۇ خاسلىق بىزنىڭ سۈكۈتتىكى تور سىستېمىسىمىزدىن gapگورىزونتالنىڭ ئورنىنى ئالىدۇ ۋە تېخىمۇ ئوخشايدۇ .paddingmargin

• مۇشۇنىڭغا ئوخشاش ، s غا ئوخشىمايدىغىنى .row، .grids نىڭ مەنپىي پەرقى يوق ، گىرۋەكلىك ئېلېكتر تورىنى ئۆزگەرتىشكە بولمايدۇ. كاتەكچە بوشلۇق سۈكۈتتىكى ھالەتتە توغرىسىغا ۋە تىك ھالەتتە قوللىنىلىدۇ. تېخىمۇ كۆپ تەپسىلاتلارنى خاسلاشتۇرۇش بۆلىكىگە قاراڭ .

• Inline ۋە ئىختىيارى ئۇسلۇبلارنى ئۆزگەرتىش سىنىپىنىڭ ئورنىنى ئېلىش دەپ قاراش كېرەك (مەسىلەن ، 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>

Responsive

ئىنكاسچان دەرسلەرنى ئىشلىتىپ ، كۆرۈنۈشلەر ئارا ئورۇنلاشتۇرۇشىڭىزنى تەڭشەڭ. بۇ يەردە بىز ئەڭ تار كۆرۈنۈشتىكى ئىككى ئىستوندىن باشلايمىز ، ئاندىن ئوتتۇرا كۆرۈنۈش ۋە ئۈستىدىكى ئۈچ ئىستونغا يېتىمىز.

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

باشلىنىدۇ

باشلاش دەرسلىرى بىزنىڭ كۆڭۈلدىكى تورنىڭ offset دەرسلىرىنى ئالماشتۇرۇشنى مەقسەت قىلىدۇ ، ئەمما ئۇلار پۈتۈنلەي ئوخشاش ئەمەس. CSS Grid توركۆرگۈچلەرگە «بۇ ئىستوندىن باشلاش» ۋە «بۇ ئىستوندا ئاخىرلىشىش» دېگەن ئۇسلۇبلار ئارقىلىق كاتەكچە قېلىپ ھاسىل قىلىدۇ. ئۇ مۈلۈكلەر 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>

ئاپتوماتىك ئىستون

كاتەكچە تۈرلەردە دەرس بولمىسا (a نىڭ بىۋاسىتە بالىلىرى .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>

Nesting

سۈكۈتتىكى تور سىستېمىسىغا ئوخشاش ، CSS تورىمىز .grids نى ئاسان ئۇۋا قىلىشقا يول قويىدۇ. قانداقلا بولمىسۇن ، سۈكۈتتىكىگە ئوخشىمايدىغىنى ، بۇ كاتەكچە قۇر ، ستون ۋە بوشلۇقتىكى ئۆزگىرىشلەرگە ۋارىسلىق قىلىدۇ. تۆۋەندىكى مىسالغا قاراڭ:

• يەرلىك CSS ئۆزگەرگۈچى مىقدار بىلەن سۈكۈتتىكى ئىستون سانىنى قاپلايمىز --bs-columns: 3.
• بىرىنچى ئاپتوماتىك ئىستوندا ، ستون سانى ۋارىسلىق قىلىدۇ ، ھەر بىر ئىستون ئىشلەتكىلى بولىدىغان كەڭلىكنىڭ ئۈچتىن بىرى.
• ئىككىنچى ئاپتوماتىك ستوندا ، ئۇۋىدىكى ئىستون سانىنى .grid12 گە تەڭشىدۇق (سۈكۈتتىكى).
• ئۈچىنچى ئاپتوماتىك ئىستوننىڭ ئۇۋىسى يوق.

ئەمەلىيەتتە بىزنىڭ سۈكۈتتىكى تور سىستېمىسىغا سېلىشتۇرغاندا تېخىمۇ مۇرەككەپ ۋە ئىختىيارى ئورۇنلاشتۇرۇشقا بولىدۇ.

<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 ئۆزگەرگۈچى مىقدار بىلەن خاسلاشتۇرۇڭ.

بۇ CSS ئۆزگەرگۈچى مىقدارلارنىڭ سۈكۈتتىكى قىممىتى يوق. ئەكسىچە ، ئۇلار يەرلىك ئۈلگە تەمىنلەنمىگۈچە ئىشلىتىلىدىغان چېكىنىش قىممىتىنى قوللىنىدۇ . مەسىلەن ، بىز var(--bs-rows, 1)CSS Grid قۇرلىرى ئۈچۈن ئىشلىتىمىز ، بۇنىڭغا پەرۋا قىلمايدۇ --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. شۇنىڭغا دىققەت قىلىڭكى ، بىز s دا ئىشلىتىمىز gap، ئەمما .gridئېھتىياجغا ئاساسەن ئۆزگەرتكىلى بولىدۇ.row-gapcolumn-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>

شۇ سەۋەبتىن ، سىزدە ئوخشىمىغان تىك ۋە توغرىسىغا ئوخشاش 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>

Sass

CSS Grid نىڭ بىر چەكلىمىسى شۇكى ، بىزنىڭ سۈكۈتتىكى دەرسلىرىمىز يەنىلا ئىككى 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>