CSS Grid או Flexbox: מה עדיף ליצירת עמודות?

.flex-container { 
  display: flex; 
} 

.flex-container { 
  display: flex; 
  flex-wrap: wrap; 
} 

באמצעות ה-CSS הזה:

.grid-container { 
  display: grid; 
} 

שום דבר לא יקרה עם ההצהרה שלעיל בלבד מכיוון שהתנהגות ברירת המחדל של Grid יוצרת שורות הנערמות זו על גבי זו.

כדי לעבור לתצוגת עמודות, עליך לשנות את ה רשת-זרימה אוטומטית רכוש (שהוא שׁוּרָה כברירת מחדל):

.grid-container { 
  display: grid; 
  grid-auto-flow: column; 
} 

עכשיו הנה התוצאה:

כדי לציין את המספר המדויק של העמודות הרצויות בכל שורה, השתמש עמודות-תבנית-רשת :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
} 

ערך זה יוצר חמש עמודות ברוחב שווה. כדי לקבל התנהגות עטיפה דומה ל-Flexbox, אתה יכול להשתמש במאפיינים רספונסיביים כמו התאמה אוטומטית ו מינימום מקסימום :

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, min-max(300px, 1fr)); 
} 

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

מה שהכי חשוב הוא הדרך שבה אתה יכול לשלוט בהיבט החד-ממדי של הפריסה. קחו למשל את התמונה הבאה:

אפליקציה שעוזרת לך למצוא בגדים

שים לב עד כמה עקבית העמודה Grid וכמה לא אחידה כל עמודה ב-Flexbox. כל שורה/עמודה במיכל flex עצמאית מהאחרת. אז חלקם עשויים להיות גדולים יותר מאחרים, תלוי בגודל התוכן שלהם. אלה פחות כמו עמודות ויותר כמו בלוקים עצמאיים.

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

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

לצרוב קובץ iso לאתחול לכונן הבזק מסוג usb ולהפעיל אותו

מתי להשתמש ב-Flexbox

האם אתה רוצה להסתמך על הגודל הפנימי של כל עמודה/שורה, כפי שהוגדר על ידי התוכן שלהם? או האם ברצונך לקבל שליטה מובנית מנקודת המבט של ההורה? אם התשובה שלך היא הראשונה, אז Flexbox הוא הפתרון המושלם עבורך.

כדי להדגים זאת, שקול תפריט ניווט אופקי. החלף את הסימון בתוך <גוף> תגיות עם זה:

<h1>Flexbox vs. Grid</h1> 
 
<header class="flex"> 
  <h2>Flexbox</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 
 
<header class="grid"> 
  <h2>Grid</h2> 
 
  <nav> 
    <ul class="nav-list"> 
      <li><a href="">Home</a></li> 
      <li><a href="">About Us</a></li> 
      <li><a href="">Service Information Goes Here</a></li> 
      <li><a href="">Blog Contact</a></li> 
      <li><a href=""></a></li> 
    </ul> 
  </nav> 
</header> 

החלף את הסימון בקובץ ה-CSS בזה:

.nav-list { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
} 
 
header { 
  --border-width: 5px; 
  border: var(--border-width) solid black; 
  margin-bottom: 30px; 
} 
 
header > *:first-child { 
  border: var(--border-width) solid #FFC0CB; 
  margin: 0; 
} 
 
li { 
  border: var(--border-width) solid #90EE90; 
} 

הנה התוצאה:

כעת, הפוך את הניווט הראשון לפריסה גמישה ואת השני לפריסת רשת על ידי הוספת ה-CSS הבא:

.flex .nav-list { 
  display: flex; 
  gap: 1em; 
  flex-wrap: wrap; 
} 
 
.grid .nav-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
} 

השווה את התוצאות כדי לראות מה מתאים יותר:

מהתמונה לעיל, אתה יכול לראות כי Flexbox הוא הפתרון המושלם במקרה זה. יש לך פריטים שאתה רוצה ללכת זה ליד זה ולשמור על הגודל הפנימי שלהם (גדול או קטן תלוי באורך הטקסט). עם Grid, לכל תא יש רוחב קבוע, והוא לא נראה טוב - לפחות עם קישורי טקסט רגיל.

מתי להשתמש ברשת CSS

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

החלף את הסימון בתוך <גוף> תגיות עם זה:

<h1>Flexbox vs. Grids</h1> 
 
<section class="cards"> 
  <h2>Some cards</h2> 
 
  <div class="columns"> 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">Fun Stuff</h3> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
 
    <article class="card"> 
      <h3 class="card__title">A Longer Title Than Others</h3> 
 
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere 
         excepturi sit ea dolores totam veniam qui voluptates commodi, 
         perferendis et!</p> 
 
      <ul> 
        <li>Lorem</li> 
        <li>Ipsum</li> 
        <li>Excavate</li> 
      </ul> 
    </article> 
  </div> 
</section> 

הוסף את ה-CSS הזה:

.columns { 
  display: flex; 
  gap: 1em; 
} 
 
article { 
  background-color: #90EE90; 
  color: black; 
  padding: 15px; 
} 
 
ul { 
  background-color: white; 
  padding: 2px; 
  list-style: none; 
} 

אתה מתחיל עם תצוגת Flexbox כדי לראות איך היא נראית, כך שתוכל להשוות אותה לתצוגת הרשת. הנה הפלט:

שימו לב שהעמודה האחרונה גדולה יותר מאחרות בגלל הגודל המהותי שלה, וזה מה ש-Flexbox מתמודד היטב. אבל כדי להפוך אותם לאותו רוחב באמצעות Flexbox, תצטרך ללכת נגד הגודל המהותי הזה על ידי הוספת הדברים הבאים:

.columns > * { 
  flex: 1; 
} 

זה עושה את העבודה. אבל Grid מתאימה יותר למקרים כאלה. אתה רק מציין את מספר העמודות, ואתה מוכן:

.columns { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 1em; 
} 

הנה התוצאה:

יתרון נוסף בשימוש ב-Grid הוא שההורה שולט בפריסה של הילדים. כך שתוכל להוסיף ולהסיר אלמנטים צאצאים מבלי לדאוג לשבירת הפריסה.

אז מתי כדאי להשתמש ברשת או ב-Flexbox?

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

Flexbox, לעומת זאת, היא אידיאלית כאשר אתה רוצה מערכת גמישה יותר המבוססת על הגודל הפנימי של האלמנטים.