רשת CSS

מערכת ברירת המחדל של Bootstrap מייצגת את השיא של למעלה מעשור של טכניקות פריסת CSS, שנוסו ונבדקו על ידי מיליוני אנשים. אבל, הוא נוצר גם ללא הרבה מתכונות ה-CSS והטכניקות המודרניות שאנו רואים בדפדפנים כמו ה-CSS Grid החדש.

איך זה עובד

עם Bootstrap 5, הוספנו את האפשרות לאפשר מערכת גריד נפרדת הבנויה על CSS Grid, אבל עם טוויסט Bootstrap. אתה עדיין מקבל שיעורים שאתה יכול ליישם בגחמה כדי לבנות פריסות רספונסיביות, אבל עם גישה אחרת מתחת למכסה המנוע.

• CSS Grid היא הסכמה. השבת את מערכת ברירת המחדל של הרשת על ידי הגדרה $enable-grid-classes: falseוהפעל את רשת ה-CSS על ידי הגדרה $enable-cssgrid: true. לאחר מכן, הידור מחדש את ה-Sass שלך.

• החלף מופעים של .rowב- .grid. הכיתה .gridמגדירה display: gridויוצרת קובץ grid-templateשאתה בונה עליו עם ה-HTML שלך.

• החלף .col-*כיתות .g-col-*בשיעורים. הסיבה לכך היא שעמודות ה-CSS Grid שלנו משתמשות grid-columnבנכס במקום width.

• עמודות וגדלי מרזבים נקבעים באמצעות משתני CSS. הגדר את אלה על האב והתאם .gridאישית איך שאתה רוצה, בשורה או בגיליון סגנונות, עם --bs-columnsו --bs-gap.

בעתיד, Bootstrap ככל הנראה תעבור לפתרון היברידי מכיוון gapשהנכס השיג תמיכה כמעט מלאה בדפדפן עבור flexbox.

הבדלים מרכזיים

בהשוואה למערכת ברירת המחדל של הרשת:

• כלי השירות Flex אינם משפיעים על עמודות ה-CSS Grid באותו אופן.

• פערים מחליפים מרזבים. הנכס gapמחליף את האופקי paddingממערכת ברירת המחדל שלנו ומתפקד יותר כמו margin.

• ככזה, בניגוד ל- .rows, .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 יוצר תבנית רשת באמצעות סגנונות שאומרים לדפדפנים "להתחיל בעמודה זו" ו"להסתיים בעמודה זו". נכסים אלה הם grid-column-startו grid-column-end. שיעורי ההתחלה הם קיצור של הראשונים. חבר אותם למחלקות העמודות לפי גודל ויישר את העמודות שלך לפי הצורך. שיעורי התחלה מתחילים ב- 1as 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 שלנו מאפשרת קינון קל של .grids. עם זאת, בניגוד לברירת המחדל, רשת זו יורשת שינויים בשורות, בעמודות ובפערים. שקול את הדוגמה שלהלן:

• אנו עוקפים את מספר העמודות המוגדר כברירת מחדל עם משתנה 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 מקומיים.

למשתני 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. שים לב שאנו משתמשים gapב- .grids, אך 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>

בגלל זה, אתה יכול לקבל s אנכיים ואופקיים שונים 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 היא שמחלקות ברירת המחדל שלנו עדיין נוצרות על ידי שני משתני Sass, $grid-columnsו- $grid-gutter-width. זה למעשה קובע מראש את מספר המחלקות שנוצרו ב-CSS המהודר שלנו. יש לך כאן שתי אפשרויות:

• שנה את משתני ברירת המחדל של Sass והידור מחדש של ה-CSS שלך.
• השתמש בסגנונות מוטבעים או מותאמים אישית כדי להגדיל את השיעורים שסופקו.

לדוגמה, אתה יכול להגדיל את ספירת העמודות ולשנות את גודל הפער, ולאחר מכן להגדיל את ה"עמודות" שלך עם שילוב של סגנונות מוטבעים ומחלקות עמודות CSS Grid מוגדרות מראש (למשל, .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>