CSS גריד
לערנען ווי צו געבן, נוצן און קאַסטאַמייז אונדזער אַלטערנאַטיווע אויסלייג סיסטעם געבויט אויף 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
. -
ווי אַזאַ, ניט ענלעך
.row
s,.grid
s האָבן קיין נעגאַטיוו מאַרדזשאַנז און גרענעץ יוטילאַטיז קענען ניט זיין געוויינט צו טוישן די גריד גאַטערז. גריד גאַפּס זענען געווענדט כאָריזאַנטאַלי און ווערטיקלי דורך פעליקייַט. זען די קאַסטאַמייזינג אָפּטיילונג פֿאַר מער דעטאַילס. -
ינלינע און מנהג סטיילז זאָל זיין וויוד ווי ריפּלייסמאַנץ פֿאַר מאָדיפיער קלאסן (למשל,
style="--bs-columns: 3;"
ווסclass="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>
אָפּרופיק
ניצן אָפּרופיק קלאסן צו סטרויערן דיין אויסלייג אַריבער וויופּאָרץ. דאָ מיר אָנהייבן מיט צוויי שפאלטן אויף די שמאָלאַסט וויופּאָרט, און דערנאָך וואַקסן צו דריי שפאלטן אויף מיטל וויופּאָרץ און העכער.
<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>
סטאַרץ
אָנהייב קלאסן צילן צו פאַרבייַטן די אָפסעט קלאסן פון אונדזער פעליקייַט גריד, אָבער זיי זענען נישט לעגאַמרע די זעלבע. CSS גריד קריייץ אַ גריד מוסטער דורך סטיילז וואָס זאָגן בראַוזערז צו "אָנהייב אין דעם זייַל" און "סוף אין דעם זייַל." די פּראָפּערטיעס זענען 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>
אַוטאָ שפאלטן
ווען עס זענען קיין קלאסן אויף די גריד זאכן (די באַלדיק קינדער פון אַ .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>
נעסטינג
ענלעך צו אונדזער פעליקייַט גריד סיסטעם, אונדזער CSS גריד אַלאַוז גרינג נעסטינג פון .grid
s. אָבער, ניט ענלעך די פעליקייַט, דעם גריד ינכעראַץ ענדערונגען אין די ראָוז, שפאלטן און גאַפּס. באַטראַכטן דעם בייַשפּיל אונטן:
- מיר אָווועררייד די פעליקייַט נומער פון שפאלטן מיט אַ היגע CSS בייַטעוודיק:
--bs-columns: 3
. - אין דער ערשטער אַוטאָ-זייַל, די זייַל ציילן איז ינכעראַטיד און יעדער זייַל איז 1/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 |
די גרייס פון דער ריס צווישן שפאלטן (ווערטיקאַל און האָריזאָנטאַל) |
די קסס וועריאַבאַלז האָבן קיין פעליקייַט ווערט; אַנשטאָט, זיי צולייגן פאַלבאַק וואַלועס וואָס זענען געניצט ביז אַ היגע בייַשפּיל איז צוגעשטעלט. פֿאַר בייַשפּיל, מיר נוצן 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>
שפאלטן און גאַפּס
סטרויערן די נומער פון שפאלטן און די ריס.
<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
. באַמערקונג אַז מיר נוצן gap
אויף .grid
s, אָבער 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>
סאַס
איין באַגרענעצונג פון די CSS גריד איז אַז אונדזער פעליקייַט קלאסן זענען נאָך דזשענערייטאַד דורך צוויי סאַסס וועריאַבאַלז, $grid-columns
און $grid-gutter-width
. דאָס יפעקטיוולי פּרידיטערמאַנז די נומער פון קלאסן דזשענערייטאַד אין אונדזער קאַמפּיילד CSS. איר האָבן צוויי אָפּציעס דאָ:
- מאָדיפיצירן די פעליקייַט סאַסס וועריאַבאַלז און ריקאָמפּילע דיין 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>