CSS גריד

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

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

אָפּרופיק

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

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

סטאַרץ

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

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

ווען עס זענען קיין קלאסן אויף די גריד זאכן (די באַלדיק קינדער פון אַ .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>

נעסטינג

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

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

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

<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 וועריאַבאַלז.

די קסס וועריאַבאַלז האָבן קיין פעליקייַט ווערט; אַנשטאָט, זיי צולייגן פאַלבאַק וואַלועס וואָס זענען געניצט ביז אַ היגע בייַשפּיל איז צוגעשטעלט. פֿאַר בייַשפּיל, מיר נוצן var(--bs-rows, 1)פֿאַר אונדזער CSS גריד ראָוז, וואָס יגנאָרז --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. באַמערקונג אַז מיר נוצן gapאויף .grids, אָבער row-gapאון column-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>

סאַס

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

• מאָדיפיצירן די פעליקייַט סאַסס וועריאַבאַלז און ריקאָמפּילע דיין 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>