האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

CSS גריד

לערנען ווי צו געבן, נוצן און קאַסטאַמייז אונדזער אַלטערנאַטיווע אויסלייג סיסטעם געבויט אויף CSS גריד מיט ביישפילן און קאָד סניפּאַץ.

Bootstrap ס פעליקייַט גריד סיסטעם רעפּראַזענץ די קאַלמאַניישאַן פון איבער אַ יאָרצענדלינג פון CSS אויסלייג טעקניקס, געפרואווט און טעסטעד דורך מיליאַנז פון מענטשן. אָבער, עס איז אויך באשאפן אָן פילע פון ​​די מאָדערן CSS פֿעיִקייטן און טעקניקס וואָס מיר זען אין בראַוזערז ווי די נייַע CSS גריד.

העאַדס אַרויף - אונדזער CSS גריד סיסטעם איז יקספּערמענאַל און אַפּט-אין ווי פון וו5.1.0! מיר אַרייַנגערעכנט עס אין אונדזער דאַקיומענטיישאַן ס CSS צו באַווייַזן עס פֿאַר איר, אָבער עס איז פאַרקריפּלט דורך פעליקייַט. האַלטן לייענען צו לערנען ווי צו געבן עס אין דיין פּראַדזשעקס.

וויאזוי עס ארבעט

מיט Bootstrap 5, מיר האָבן צוגעגעבן די אָפּציע צו געבן אַ באַזונדער גריד סיסטעם וואָס איז געבויט אויף CSS גריד, אָבער מיט אַ באָאָטסטראַפּ טוויסט. איר נאָך באַקומען קלאסן איר קענען צולייגן אויף אַ קאַפּריז צו בויען אָפּרופיק לייאַוץ, אָבער מיט אַ אַנדערש צוגאַנג אונטער די קאַפּטער.

  • CSS גריד איז אָפּט-אין. דיסייבאַל די פעליקייַט גריד סיסטעם דורך באַשטעטיקן $enable-grid-classes: falseאון געבן די CSS גריד דורך באַשטעטיקן $enable-cssgrid: true. דערנאָך, רעקאָמפּילע דיין סאַס.

  • פאַרבייַטן ינסטאַנסיז פון .rowמיט .grid. דער .gridקלאַס שטעלט display: gridאון קריייץ אַ grid-templateוואָס איר בויען אויף מיט דיין HTML.

  • פאַרבייַטן .col-*קלאסן מיט .g-col-*קלאסן. דאָס איז ווייַל אונדזער CSS גריד שפאלטן נוצן די grid-columnפאַרמאָג אַנשטאָט פון width.

  • שפאלטן און סיזעס זענען באַשטימט דורך CSS וועריאַבאַלז. שטעלן זיי אויף די פאָטער .gridאון קאַסטאַמייז ווי איר ווילט, ינלינע אָדער אין אַ סטילעשעעט, מיט --bs-columnsאון --bs-gap.

אין דער צוקונפֿט, Bootstrap וועט מסתּמא יבעררוק צו אַ כייבריד לייזונג ווייַל די gapפאַרמאָג האט אַטשיווד קימאַט פול בלעטערער שטיצן פֿאַר פלעקסבאָקס.

שליסל דיפעראַנסיז

קאַמפּערד מיט די פעליקייַט גריד סיסטעם:

  • פלעקס יוטילאַטיז טאָן ניט ווירקן די CSS גריד שפאלטן אין דער זעלביקער וועג.

  • גאַפּס ריפּלייסיז גאַטערז. די gapפאַרמאָג ריפּלייסיז די האָריזאָנטאַל paddingפון אונדזער פעליקייַט גריד סיסטעם און פאַנגקשאַנז מער ווי margin.

  • ווי אַזאַ, ניט ענלעך .rows, .grids האָבן קיין נעגאַטיוו מאַרדזשאַנז און גרענעץ יוטילאַטיז קענען ניט זיין געוויינט צו טוישן די גריד גאַטערז. גריד גאַפּס זענען געווענדט כאָריזאַנטאַלי און ווערטיקלי דורך פעליקייַט. זען די קאַסטאַמייזינג אָפּטיילונג פֿאַר מער דעטאַילס.

  • ינלינע און מנהג סטיילז זאָל זיין וויוד ווי ריפּלייסמאַנץ פֿאַר מאָדיפיער קלאסן (למשל, style="--bs-columns: 3;"ווס class="row-cols-3").

  • נעסטינג אַרבעט סימאַלערלי, אָבער קען דאַרפן איר צו באַשטעטיק דיין זייַל קאַונץ אויף יעדער בייַשפּיל פון אַ נעסטעד .grid. זען די נעסטינג אָפּטיילונג פֿאַר פרטים.

ביישפילן

דריי שפאלטן

דריי שפאלטן אין גלייך ברייט אין אַלע וויופּאָרט און דעוויסעס קענען זיין באשאפן דורך די .g-col-4קלאסן. לייג אָפּרופיק קלאסן צו טוישן די אויסלייג לויט וויופּאָרט גרייס.

.ג-קאָל-4
.ג-קאָל-4
.ג-קאָל-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>

אָפּרופיק

ניצן אָפּרופיק קלאסן צו סטרויערן דיין אויסלייג אַריבער וויופּאָרץ. דאָ מיר אָנהייבן מיט צוויי שפאלטן אויף די שמאָלאַסט וויופּאָרט, און דערנאָך וואַקסן צו דריי שפאלטן אויף מיטל וויופּאָרץ און העכער.

.ג-קאָל-6 .ג-קאָל-מד-4
.ג-קאָל-6 .ג-קאָל-מד-4
.ג-קאָל-6 .ג-קאָל-מד-4
<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>

פאַרגלייַכן אַז צו דעם צוויי זייַל אויסלייג אין אַלע וויופּאָרץ.

.ג-קאָל-6
.ג-קאָל-6
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ראַפּינג

גריד ייטאַמז אויטאָמאַטיש ייַנוויקלען צו דער ווייַטער שורה ווען עס איז קיין מער פּלאַץ כאָריזאַנטאַלי. באַמערקונג אַז די gapאַפּלייז צו האָריזאָנטאַל און ווערטיקאַל גאַפּס צווישן גריד זאכן.

.ג-קאָל-6
.ג-קאָל-6
.ג-קאָל-6
.ג-קאָל-6
<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אַ פאַרקריפּלט ווערט פֿאַר די פּראָפּערטיעס.

.ג-קאָל-3 .ג-סטאַרט-2
.ג-קאָל-4 .ג-סטאַרט-6
<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>

אַוטאָ שפאלטן

ווען עס זענען קיין קלאסן אויף די גריד זאכן (די באַלדיק קינדער פון אַ .grid), יעדער גריד נומער וועט אויטאָמאַטיש זיין סייזד צו איין זייַל.

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

דעם נאַטור קענען זיין געמישט מיט גריד זייַל קלאסן.

.ג-קאָל-6
1
1
1
1
1
1
<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 גריד אַלאַוז גרינג נעסטינג פון .grids. אָבער, ניט ענלעך די פעליקייַט, דעם גריד ינכעראַץ ענדערונגען אין די ראָוז, שפאלטן און גאַפּס. באַטראַכטן דעם בייַשפּיל אונטן:

  • מיר אָווועררייד די פעליקייַט נומער פון שפאלטן מיט אַ היגע CSS בייַטעוודיק: --bs-columns: 3.
  • אין דער ערשטער אַוטאָ-זייַל, די זייַל ציילן איז ינכעראַטיד און יעדער זייַל איז 1/3 פון די בנימצא ברייט.
  • אין די רגע אַוטאָ-זייַל, מיר האָבן באַשטעטיק די זייַל ציילן אויף די נעסטעד .gridצו 12 (אונדזער פעליקייַט).
  • די דריט אַוטאָ-זייַל האט קיין נעסטעד אינהאַלט.

אין פיר, דאָס אַלאַוז מער קאָמפּליצירט און מנהג לייאַוץ ווען קאַמפּערד מיט אונדזער פעליקייַט גריד סיסטעם.

ערשטער אַוטאָ-זייַל
אַוטאָ-זייַל
אַוטאָ-זייַל
צווייטע אַוטאָ-זייַל
6 פון 12
4 פון 12
2 פון 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 די גרייס פון דער ריס צווישן שפאלטן (ווערטיקאַל און האָריזאָנטאַל)

די קסס וועריאַבאַלז האָבן קיין פעליקייַט ווערט; אַנשטאָט, זיי צולייגן פאַלבאַק וואַלועס וואָס זענען געניצט ביז אַ היגע בייַשפּיל איז צוגעשטעלט. פֿאַר בייַשפּיל, מיר נוצן 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>

שפאלטן און גאַפּס

סטרויערן די נומער פון שפאלטן און די ריס.

.ג-קאָל-2
.ג-קאָל-2
<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>
.ג-קאָל-6
.ג-קאָל-4
<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אויף .grids, אָבער row-gapאון column-gapקענען זיין מאַדאַפייד ווי דארף.

.ג-קאָל-6
.ג-קאָל-6
.ג-קאָל-6
.ג-קאָל-6
<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-gapCSS בייַטעוודיק.

.ג-קאָל-6
.ג-קאָל-6
.ג-קאָל-6
.ג-קאָל-6
<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 גריד איז אַז אונדזער פעליקייַט קלאסן זענען נאָך דזשענערייטאַד דורך צוויי סאַסס וועריאַבאַלז, $grid-columnsאון $grid-gutter-width. דאָס יפעקטיוולי פּרידיטערמאַנז די נומער פון קלאסן דזשענערייטאַד אין אונדזער קאַמפּיילד CSS. איר האָבן צוויי אָפּציעס דאָ:

  • מאָדיפיצירן די פעליקייַט סאַסס וועריאַבאַלז און ריקאָמפּילע דיין CSS.
  • ניצן ינלינע אָדער מנהג סטיילז צו פאַרגרעסערן די צוגעשטעלט קלאסן.

פֿאַר בייַשפּיל, איר קענען פאַרגרעסערן די זייַל ציילן און טוישן די ריס גרייס, און דאַן גרייס דיין "שפאלטן" מיט אַ מישן פון ינלינע סטיילז און פּרעדעפינעד CSS גריד זייַל קלאסן (למשל, .g-col-4).

14 שפאלטן
.ג-קאָל-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>