CSS

CSS Grid

מהו CSS Grid?

Grid היא שיטת פריסה דו-ממדית (שורות ועמודות) - הכלי החזק ביותר לפריסת דפים.

.container {
    display: grid;
}

מושגי יסוד

┌───────────────────────────────────────────────────────┐
│ Grid Container                                        │
├─────────────┬─────────────┬─────────────┬────────────┤
│   Cell      │    Cell     │    Cell     │   Cell     │ ← Row (Track)
│             │             │             │            │
├─────────────┼─────────────┼─────────────┼────────────┤
│   Cell      │    Cell     │    Cell     │   Cell     │
│             │             │             │            │
├─────────────┼─────────────┼─────────────┼────────────┤
│   Cell      │    Cell     │    Cell     │   Cell     │
│             │             │             │            │
└─────────────┴─────────────┴─────────────┴────────────┘
       ↑              ↑            ↑            ↑
    Column         Column      Column       Column
    (Track)        (Track)     (Track)      (Track)

הגדרת עמודות ושורות

grid-template-columns

.container {
    display: grid;

    /* עמודות קבועות */
    grid-template-columns: 200px 200px 200px;

    /* יחידת fr (fraction) */
    grid-template-columns: 1fr 1fr 1fr;    /* 3 שווים */
    grid-template-columns: 1fr 2fr 1fr;    /* אמצע כפול */

    /* שילוב */
    grid-template-columns: 250px 1fr 250px; /* sidebars קבועים */

    /* repeat() */
    grid-template-columns: repeat(3, 1fr);  /* 3 שווים */
    grid-template-columns: repeat(4, 100px);

    /* minmax() */
    grid-template-columns: repeat(3, minmax(200px, 1fr));

    /* auto-fill / auto-fit */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

grid-template-rows

.container {
    grid-template-rows: 100px 1fr 50px;    /* header, content, footer */
    grid-template-rows: repeat(3, 200px);
    grid-template-rows: auto 1fr auto;
}

הבדל בין auto-fill ו-auto-fit

/* auto-fill: משאיר עמודות ריקות */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

/* auto-fit: ממלא את כל הרוחב */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Gap (רווחים)

.container {
    gap: 20px;              /* שורות ועמודות */
    gap: 20px 10px;         /* שורות, עמודות */
    row-gap: 20px;
    column-gap: 10px;
}

מיקום Items

לפי קווים (Lines)

.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    /* קיצור */
    grid-column: 1 / 3;     /* מקו 1 עד קו 3 */
    grid-row: 1 / 2;

    /* span */
    grid-column: span 2;    /* תופס 2 עמודות */
    grid-row: span 3;       /* תופס 3 שורות */

    /* מקו מסוים עם span */
    grid-column: 2 / span 2; /* מקו 2, תופס 2 */
}

grid-area (קיצור מלא)

.item {
    /* row-start / column-start / row-end / column-end */
    grid-area: 1 / 1 / 3 / 4;
}

Grid Template Areas

שיטה ויזואלית להגדרת פריסה:

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

תא ריק

grid-template-areas:
    "header header header"
    "sidebar main ."       /* נקודה = תא ריק */
    "footer footer footer";

יישור בתוך הגריד

justify-items (אופקי)

.container {
    justify-items: stretch;   /* ברירת מחדל */
    justify-items: start;
    justify-items: end;
    justify-items: center;
}

align-items (אנכי)

.container {
    align-items: stretch;     /* ברירת מחדל */
    align-items: start;
    align-items: end;
    align-items: center;
}

place-items (קיצור)

.container {
    place-items: center;      /* שניהם center */
    place-items: center start; /* align, justify */
}

יישור פריט בודד

.item {
    justify-self: center;
    align-self: end;
    place-self: center end;
}

יישור התוכן כולו

justify-content

.container {
    justify-content: start;
    justify-content: end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
}

align-content

.container {
    align-content: start;
    align-content: end;
    align-content: center;
    align-content: space-between;
}

place-content

.container {
    place-content: center;
}

דוגמאות מעשיות

גריד כרטיסים רספונסיבי

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

פריסת דף מלא (Holy Grail)

<div class="page-layout">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main Content</main>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
</div>

.page-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    min-height: 100vh;
    gap: 10px;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }

גלריית תמונות

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* תמונה גדולה */
.gallery .featured {
    grid-column: span 2;
    grid-row: span 2;
}

Dashboard

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr 1fr;
    gap: 20px;
}

.widget-large {
    grid-column: span 2;
    grid-row: span 2;
}

.widget-wide {
    grid-column: span 2;
}

.widget-tall {
    grid-row: span 2;
}

Flexbox vs Grid

💡 טיפ: השתמשו בשניהם יחד! Grid לפריסה כללית, Flexbox לרכיבים פנימיים.

סיכום

הבא: עיצוב רספונסיבי ➡️