חקור את ההבדלים בין שיטות פריסת ה-CSS המודרניות הללו עם בעיה מעשית: יישור עמודות.

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

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

ההתנהגות השונה של CSS Flexbox ו-Grid

כדי לעזור לדמיין דברים, צור א index.html קובץ בתיקייה המועדפת עליך והדבק בסימון הבא:

html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head>
<body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2>


<divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>


<h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.





instagram viewer


div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>

שני ה-divs מכילים את אותם ילדים בדיוק כך שתוכל להחיל מערכת שונה על כל אחד מהם ולהשוות ביניהם.

אתה יכול גם לראות שה-HTML מייבא קובץ גיליון סגנונות בשם style.css. צור את הקובץ הזה באותה תיקיה כמו index.html והדבק בו את הסגנונות הבאים:

body {
padding: 30px;
}
h1 {
color: #A52A2A;
}


h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}

הדף שלך אמור להיראות כך:

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

.flex-container {
display: flex;
}

זו התוצאה:

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

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

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

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

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

<h1>Flexbox vs. Gridh1>
<headerclass="flex">
<h2>Flexboxh2>


<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>


<headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>

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

.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solidblack;
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. Gridsh1>
<sectionclass="cards">
<h2>Some cardsh2>


<divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p>


<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>


<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p>


<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>


<articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3>


<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
 excepturi sit ea dolores totam veniam qui voluptates commodi,
 perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
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, לעומת זאת, היא אידיאלית כאשר אתה רוצה מערכת גמישה יותר המבוססת על הגודל הפנימי של האלמנטים.