CSS Grid
مىسال ۋە كود پارچىلىرى بىلەن CSS تورىدا ياسالغان ئالمىشىش ئورۇنلاشتۇرۇشىمىزنى قانداق قوزغىتىش ، ئىشلىتىش ۋە خاسلاشتۇرۇشنى ئۆگىنىۋېلىڭ.
Bootstrap نىڭ سۈكۈتتىكى تور سىستېمىسى نەچچە ئون يىلدىن بۇيان سىناق قىلىنغان CSS ئورۇنلاشتۇرۇش تېخنىكىسىنىڭ يۇقىرى پەللىسىگە ۋەكىللىك قىلىدۇ. ئەمما ، ئۇ يېڭى CSS تورىغا ئوخشاش تور كۆرگۈلەردە كۆرۈۋاتقان نۇرغۇن زامانىۋى CSS ئىقتىدارلىرى ۋە تېخنىكىلىرىسىز بارلىققا كەلگەن.
قانداق ئىشلەيدۇ
Bootstrap 5 ئارقىلىق ، CSS تورىدا ياسالغان ، ئەمما Bootstrap ئەگرى-توقاي بولغان ئايرىم تور سىستېمىسىنى قوزغىتىش تاللانمىسىنى قوشتۇق. سىز يەنىلا ئىنكاس لايىھىسىنى قۇرۇش ئۈچۈن خالىغانچە ئىلتىماس قىلسىڭىز بولىدۇ ، ئەمما ماتورنىڭ ئاستىدا باشقىچە ئۇسۇل بار.
-
CSS Grid تاللانغان. تەڭشەش ئارقىلىق سۈكۈتتىكى تور سىستېمىسىنى چەكلەڭ
$enable-grid-classes: false
ۋە تەڭشەش ئارقىلىق CSS تورىنى قوزغىتىڭ$enable-cssgrid: true
. ئاندىن ، سانىڭىزنى قايتا ئويلاڭ. -
مىساللارنى
.row
ئالماشتۇرۇڭ.grid
. دەرسلىك.grid
HTML ئارقىلىق قۇرغانdisplay: grid
ۋە قۇرغانgrid-template
. -
.col-*
دەرسلەرنى دەرسكە ئالماشتۇرۇڭ.g-col-*
. چۈنكى بىزنىڭ CSS Grid تۈۋرۈكىمىزgrid-column
ئۇنىڭ ئورنىغا خاسلىقنى ئىشلىتىدۇwidth
. -
ستون ۋە ئۆستەڭنىڭ ئۆلچىمى CSS ئۆزگەرگۈچى مىقدار ئارقىلىق تەڭشىلىدۇ. بۇلارنى ئاتا-ئانىغا تەڭشەڭ
.grid
، خالىغانچە ، سىزىقچە ياكى ئۇسلۇب جەدۋىلىدە ،--bs-columns
ۋە--bs-gap
.
كەلگۈسىدە Bootstrap بەلكىم ئارىلاش ماتورلۇق ھەل قىلغۇچقا ئۆزگىرىشى مۇمكىن ، چۈنكى بۇ gap
مۈلۈك flexbox نى تور كۆرگۈنىڭ تولۇق قوللىشىغا ئېرىشتى.
ئاچقۇچلۇق پەرقى
سۈكۈتتىكى تور سىستېمىسىغا سېلىشتۇرغاندا:
-
ئەۋرىشىم ئەسلىھەلىرى ئوخشاشلا CSS كاتەكچە تۈۋرۈكىگە تەسىر كۆرسەتمەيدۇ.
-
بوشلۇقلار ئۆستەڭنىڭ ئورنىنى ئالىدۇ. بۇ خاسلىق بىزنىڭ سۈكۈتتىكى تور سىستېمىسىمىزدىن
gap
گورىزونتالنىڭ ئورنىنى ئالىدۇ ۋە تېخىمۇ ئوخشايدۇ .padding
margin
-
مۇشۇنىڭغا ئوخشاش ، s غا ئوخشىمايدىغىنى
.row
،.grid
s نىڭ سەلبىي پەرقى يوق ، گىرۋەكلىك ئېلېكتر تورىنى ئۆزگەرتىشكە ئىشلەتكىلى بولمايدۇ. كاتەكچە بوشلۇق سۈكۈتتىكى ھالەتتە توغرىسىغا ۋە تىك ھالەتتە قوللىنىلىدۇ. تېخىمۇ كۆپ تەپسىلاتلارنى خاسلاشتۇرۇش بۆلىكىگە قاراڭ . -
Inline ۋە ئىختىيارى ئۇسلۇبلارنى ئۆزگەرتىش سىنىپىنىڭ ئورنىنى ئېلىش دەپ قاراش كېرەك (مەسىلەن ،
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
ئۇۋىسى ئوخشاشلا ئىشلەيدۇ ، ئەمما ئۇۋىنىڭ ھەر بىر مىسالىدا ئىستون سانىڭىزنى ئەسلىگە كەلتۈرۈشىڭىزنى تەلەپ قىلىشى مۇمكىن
.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>
Responsive
ئىنكاسچان دەرسلەرنى ئىشلىتىپ ، كۆرۈنۈشلەر ئارا ئورۇنلاشتۇرۇشىڭىزنى تەڭشەڭ. بۇ يەردە بىز ئەڭ تار كۆرۈنۈشتىكى ئىككى ئىستوندىن باشلايمىز ، ئاندىن ئوتتۇرا كۆرۈنۈش ۋە ئۈستىدىكى ئۈچ ئىستونغا يېتىمىز.
<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>
باشلىنىدۇ
باشلاش دەرسلىرى سۈكۈتتىكى تورنىڭ offset سىنىپىنىڭ ئورنىنى ئېلىشنى مەقسەت قىلىدۇ ، ئەمما ئۇلار پۈتۈنلەي ئوخشاش ئەمەس. CSS Grid توركۆرگۈچلەرگە «بۇ ئىستوندىن باشلاش» ۋە «بۇ ئىستوندا ئاخىرلىشىش» دېگەن ئۇسلۇبلار ئارقىلىق كاتەكچە قېلىپ ھاسىل قىلىدۇ. ئۇ مۈلۈكلەر 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>
Nesting
سۈكۈتتىكى تور سىستېمىسىغا ئوخشاش ، 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
مىسال بۇ قىممەتنى قايتۇرۇش قىممىتىنىڭ ئورنىغا ئىشلىتىدۇ 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
. شۇنىڭغا دىققەت قىلىڭكى ، بىز s دا ئىشلىتىمىز gap
، ئەمما .grid
ئېھتىياجغا ئاساسەن ئۆزگەرتكىلى بولىدۇ.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
بولىدۇ ، ئۇ بىرلا قىممەت (ھەممە تەرەپ) ياكى بىر جۈپ قىممەت (تىك ۋە توغرىسىغا) ئالالايدۇ. بۇنى ئىچكى ئۇسلۇب 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>
Sass
CSS Grid نىڭ بىر چەكلىمىسى شۇكى ، بىزنىڭ سۈكۈتتىكى دەرسلىرىمىز يەنىلا ئىككى 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>