המדריך המלא לשימוש ב CSS Grid

CSS Grid היא מערכת פריסה דו-ממדית המאפשרת לייצר פריסות/מתווים (layouts) מבוססי רשת (grid) באמצעות עמודות ושורות.

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

מספר מילים על CSS Grid

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

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

העיקרון המרכזי מאחורי CSS GRID הוא כזה: מגדירים את מבנה הפריסה ברמת ה CSS, ואז נותנים לאלמנטים “להישפך” לתוך ה Grid. ברגע שמגדירים מחדש את ה Grid בתוך Media Query, הפריסה מסתגלת אוטומטית בלי שום שינוי ב HTML עצמו.

טרמינולוגיה – CSS Grid

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

1. Grid Container

ה Grid Container הוא אלמנט האב שמכיל את מתווה הגריד. יוצרים אותו על ידי הוספת display: grid או display: inline-grid לאלמנט.

בדוגמה הבאה, האזור עם המסגרת המקווקות הוא ה Grid Container:

ברגע שאלמנט מוגדר כ-Grid Container, תוכלו להשתמש במגוון תכונות כדי לשלוט במתווה שלו.

שימו לב שבדומה ל Flexbox, גם CSS Grid מכבד את כיווניות העמוד. הדוגמה למעלה היא RTL. בהקשר של LTR, היא תיראה כך:

2. Grid Lines

Grid Lines הם קווי החלוקה שמרכיבים את מבנה הגריד. הם רצים גם אנכית וגם אופקית, וממוספרים החל מ 1.

בגריד של 3 עמודות ו 3 שורות יש 4 קווים אנכיים (קווי עמודות) ו 4 קווים אופקיים (קווי שורות). אתם מתייחסים למספרים האלה כשממקמים אלמנטים עם grid-column ו grid-row.

המספרים בחלק העליון הם קווי עמודות והמספרים בצד הם קווי שורות:

3. Grid Item

Grid Items הם הילדים הישירים של ה Grid Container. אפשר לפרוס אותם על פני כמה תאים לפי הצורך.

4. Grid Cell

Grid Cell הוא היחידה הקטנה ביותר בגריד – ההצטלבות של שורה אחת ועמודה אחת. בגריד של 3×3 יש 9 תאים. שימו לב ש Grid Cell הוא לא אלמנט HTML, אלא אזור שאפשר למקם בו Grid Items.

התא המודגש בדוגמה הבאה מציג Grid Cell יחיד:

5. Grid Track

Grid Track הוא האזור בין שני Grid Lines סמוכים. אתם שולטים בגודל ה tracks באמצעות grid-template-columns ו grid-template-rows.

• Tracks אופקיים (בין קווי שורות) נקראים row tracks.
• Tracks אנכיים (בין קווי עמודות) נקראים column tracks.

השורה המודגשת בדוגמה הבאה מייצגת Grid Track:

6. Grid Area

Grid Area הוא אזור מלבני שמתפרס על Grid Cell אחד או יותר. ניתן להגדיר areas באמצעות grid-template-areas.

התאים המודגשים בדוגמה הבאה יוצרים Grid Area יחיד:

אוקיי, אחרי שעברנו על המונחים, בואו נבנה את הגריד הראשון שלנו.

יצירת ה Grid הראשון שלכם

שני המרכיבים העיקריים הם ה Grid Container (האב) וה Grid Items (הילדים שבתוכו).

הנה ה markup עבור קונטיינר עם שישה אלמנטים:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

כדי להפוך אותו ל Grid, נוסיף display: grid:

.wrapper {
    display: grid;
}

התוצאה:

כרגע זה נראה כמו שישה אלמנטים מוערמים זה מעל זה, כי עדיין לא הגדרנו עמודות או שורות.

---

יצירת עמודות ושורות ב Grid

כדי להפוך את הגריד לדו מימדי, מגדירים עמודות ושורות באמצעות grid-template-columns ו grid-template-rows:

.wrapper {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 60px 60px;
}

שלושה ערכים ב grid-template-columns יוצרים שלוש עמודות. שני ערכים ב grid-template-rows יוצרים שתי שורות.

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

.wrapper {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 80px 40px;
}

לא חייבים להשתמש באחוזים. אפשר גם px, יחידות viewport, calc(), או יחידת ה fr שנרחיב עליה בהמשך.

---

מיקום אלמנטים ב Grid

עכשיו בואו נראה איך ממקמים אלמנטים בצורה מדויקת. ניצור גריד של 3×3:

.wrapper {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 60px 60px 60px;
}

הגדרנו שלוש שורות אבל רואים רק שתי שורות מלאות כי יש רק שישה אלמנטים. השורה השלישית קיימת אבל נשארת ריקה.
כדי לשנות מיקום או גודל של אלמנט, בוחרים אותו ומשתמשים ב grid-column-start / grid-column-end:

.wrapper > div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
}

האלמנט הראשון מתחיל ב Grid Line 1 ומסתיים ב Grid Line 4, ותופס את כל השורה:

זוכרים את דוגמת ה Grid Lines מקודם? גריד של 3 עמודות כולל 4 קווי עמודות, וגריד של 3 שורות כולל 4 קווי שורות. קו 4 הוא הקצה של העמודה האחרונה:

אותו עיקרון חל גם על שורות עם grid-row-start / grid-row-end. הנה דוגמה מורכבת יותר:

.wrapper > div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
}

.wrapper > div:nth-child(3) {
    grid-row-start: 2;
    grid-row-end: 4;
}

.wrapper > div:nth-child(4) {
    grid-column-start: 2;
    grid-column-end: 4;
}

אפשר גם בתחביר קצר יותר באמצעות grid-column ו grid-row:

.wrapper > div:nth-child(1) {
    grid-column: 1 / 3;
}

.wrapper > div:nth-child(3) {
    grid-row: 2 / 4;
}

.wrapper > div:nth-child(4) {
    grid-column: 2 / 4;
}

ואפשר גם להשתמש ב span כדי להגדיר על כמה tracks אלמנט יימתח:

.wrapper > div:nth-child(1) {
    grid-column: 1 / span 2;
}

.wrapper > div:nth-child(3) {
    grid-row: 2 / span 2;
}

.wrapper > div:nth-child(4) {
    grid-column: 2 / span 2;
}

Named Grid Lines

במקום להתייחס לקווים לפי מספר, אפשר לתת להם שמות כשמגדירים את הגריד:

.wrapper {
    display: grid;
    grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
    grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end];
}

ואז למקם אלמנטים לפי שמות אלו:

.sidebar {
    grid-column: sidebar-start / sidebar-end;
}

.content {
    grid-column: content-start / content-end;
    grid-row: main-start / main-end;
}

שמות לקווים הופכים את ה CSS להרבה יותר קריא, במיוחד בעימודים מורכבים שבהם מספרי קווים קשים למעקב.

---

יישור אלמנטים ב Grid

ב CSS Grid יש שש תכונות יישור. הן חלק מ CSS Box Alignment Module ועובדות גם ב Grid וגם ב Flexbox:

• justify-items / align-items
• justify-content / align-content
• justify-self / align-self

יישור ברמת ה Container

בדוגמאות הבאות נשתמש בגריד עם שלוש עמודות של 100px ואלמנטים של 50x50px, כך שיש מקום פנוי סביב כל אלמנט:

.my-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    width: 100%;
    height: 200px;
}

.item {
    width: 50px;
    height: 50px;
}

שימו לב שהאלמנטים לא ממלאים את התאים – הם ממוקמים בפינה העליונה כברירת מחדל.

התכונה justify-items

מיישרת את כל ה Grid Items לאורך ציר השורות (אופקי). נסו את הערכים השונים:

התכונה align-items

מיישרת את כל ה Grid Items לאורך ציר העמודות (אנכי):

התכונה justify-content

כשהגריד כולו קטן מהקונטיינר, justify-content ממקם את הגריד כולו לאורך ציר השורות:

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

התכונה align-content

אותו עיקרון, אבל לאורך ציר העמודות (אנכי):

יישור ברמת ה Item

התכונות justify-self ו align-self עובדות כמו justify-items ו align-items, אבל חלות על Grid Items בודדים במקום על כולם בבת אחת.

התכונה justify-self

מיישרת אלמנט בודד אופקית. כאן, אלמנט 3 מקבל justify-self: end:

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="justify-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

התכונה align-self

מיישרת אלמנט בודד אנכית. כאן, אלמנט 3 מקבל align-self: end:

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="align-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

תכונות קיצור (Shorthand)

יש שלוש תכונות קיצור שמשלבות בין justify ל align בשורה אחת:

/* place-items = align-items / justify-items */
.container {
    place-items: center;
}

/* place-content = align-content / justify-content */
.container {
    place-content: space-between center;
}

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

כשנותנים ערך יחיד, הוא חל על שני הצירים. שני ערכים מגדירים קודם את ציר ה block (אנכי), ואז את ציר ה inline (אופקי).

שילוב תכונות יישור

אפשר לשלב כמה תכונות יישור כדי להגיע לעימוד מדויק:

.my-container {
    justify-content: space-evenly;
    justify-items: center;
    align-content: space-evenly;
    align-items: center;
}

שימו לב איך אלמנט 3 דורס את align-items: center עם align-self: end משלו.

---

Implicit Grids ותכונת grid-auto-flow

עד כאן הגדרנו את מבנה הגריד בצורה מפורשת עם grid-template-columns ו grid-template-rows – זהו ה explicit grid. אבל מה קורה כשיש יותר אלמנטים ממספר התאים שהגדרתם?

הדפדפן יוצר tracks נוספים באופן אוטומטי. זה נקרא ה implicit grid. אתם שולטים בגודל ה tracks האוטומטיים עם grid-auto-rows ו grid-auto-columns:

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 70px;
    grid-auto-rows: 50px;
}

כאן הגדרנו שורה מפורשת אחת בגובה 70px. אלמנטים שיגלשו לשורות נוספות יקבלו גובה של 50px מ grid-auto-rows.

התכונה grid-auto-flow

כברירת מחדל, Grid ממקם אלמנטים שורה אחרי שורה (grid-auto-flow: row). אפשר לשנות את זה למילוי עמודות קודם, או להשתמש במילת המפתח dense כדי למלא רווחים שנשארו מאלמנטים גדולים.

נסו לעבור בין הערכים השונים:

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

---

התכונה grid-area

התכונה grid-area היא קיצור של grid-row-start, grid-column-start, grid-row-end, ו grid-column-end:

grid-area: <row-start> / <column-start> / <row-end> / <column-end>

תנו מבט במדריך המלא על grid-area ו grid-template-areas לדוגמאות נוספות.

בואו נראה גריד עם 11 אלמנטים, כשאלמנט 5 משתמש ב grid-area: 1 / 2 / 5 / 7 כדי לתפוס אזור גדול:

.wrapper {
    display: grid;
}

.wrapper > div:nth-child(5) {
    grid-area: 1 / 2 / 5 / 7;
}

חפיפת Grid Items

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

.item-a {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    z-index: 1;
}

.item-b {
    grid-column: 2 / 5;
    grid-row: 2 / 4;
    z-index: 2;
}

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

---

התכונה gap

התכונה gap מגדירה ריווח בין grid tracks. היא קיצור של row-gap ו column-gap.

הערך הראשון הוא ה row gap, השני הוא ה column gap:

.wrapper {
    display: grid;
    gap: 30px 10px;
}

יש פוסט נפרד שמכסה את תכונת gap ב Grid וב Flexbox.

---

יחידת ה fr (Fractional Unit)

יחידת ה fr מחלקת מקום פנוי באופן יחסי, ופותרת בעיות חישוב שנוצרות עם אחוזים.

דוגמה: אם משתמשים ב grid-template-columns: 33% 33% 33% עם gap: 10px, הרוחב הכולל מתקבל כ-100% + 20px, מה שגורם לגלילה אופקית.

עם יחידות fr, הדפדפן מטפל בחישוב עבורכם:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 80px;
}

אפשר להשתמש בפונקציית repeat() לקוד נקי יותר: grid-template-columns: repeat(6, 1fr).

אפשר גם לשלב fr עם יחידות קבועות. כאן למשל, שתי עמודות של 100px ועמודה גמישה אחת:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    grid-auto-rows: 80px;
}

ערכי fr לא חייבים להיות מספרים שלמים:

.wrapper {
    display: grid;
    grid-template-columns: 1.5fr 3fr 4.5fr;
    grid-auto-rows: 80px;
}

למידע נוסף על יחידות fraction, ראו הסבר על יחידת fr ב CSS Grid.

---

גריד ריספונסיבי עם auto-fill, auto-fit ו minmax()

אחד הדפוסים הכי שימושיים של CSS Grid הוא יצירת עימוד ריספונסיבי לגמרי בלי שום Media Queries:

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

הפונקציה minmax(150px, 1fr) מגדירה מינימום של 150px ומקסימום של 1fr לכל עמודה. בשילוב עם auto-fit, הדפדפן יוצר כמה עמודות שנכנסות ומרחיב אותן למילוי המקום הנותר.

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

auto-fit מכווץ tracks ריקים ומותח את האלמנטים הקיימים למילוי השורה. auto-fill שומר על ה tracks הריקים, כך שהאלמנטים נשארים ברוחב המינימלי שלהם.

למבט מעמיק יותר, ראו את הפוסטים על הפונקציה minmax() ועל עימוד Grid ריספונסיבי ללא Media Queries.

---

יצירת מבנה אתר באמצעות CSS Grid

בואו נשים את הכל ביחד ונבנה עימוד עמוד שלם באמצעות grid-template-areas:

<div class="wrapper">
    <header>header</header>
    <nav>nav</nav>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</div>

.wrapper {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav section aside"
        "footer footer footer";
    grid-template-rows: 80px 1fr 50px;
    grid-template-columns: 15% 1fr 15%;
    gap: 4px;
    height: 360px;
}

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

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

התכונה Grid Template Areas

כל מחרוזת ב grid-template-areas מייצגת שורה אחת. נותנים שמות לאלמנטים עם grid-area ומשתמשים בשמות האלה ב template. לתאים ריקים, משתמשים בנקודה (.).

• "header header header" – ה header מתפרס על כל שלוש העמודות
• "nav section aside" – שלוש עמודות עם אזורים שונים
• "footer footer footer" – ה footer מתפרס על כל הרוחב

רוצים שה nav יתפרס לכל הגובה? פשוט משנים תכונת CSS אחת:

.wrapper {
    grid-template-areas:
        "nav header header"
        "nav section aside"
        "nav footer footer";
}

מה לגבי ריספונסיביות?

העימוד כבר מתרחב ומתכווץ עם הקונטיינר. ולמבנה מובייל שונה לגמרי? מוסיפים Media Query שמשנה רק את grid-template-areas:

@media (max-width: 768px) {
    .wrapper {
        grid-template-areas:
            "header header header"
            "nav nav nav"
            "section section section"
            "aside aside aside"
            "footer footer footer";
        grid-template-rows: 50px 30px 1fr 60px 30px;
    }
}

היכולת לארגן מחדש את כל העימוד דרך שינוי תכונת CSS אחת היא אחד היתרונות הגדולים של Grid. ואם אתם רוצים לוותר על Media Queries לגמרי, אפשר עם auto-fit ו minmax() כפי שהראינו קודם.

---

Subgrid

Subgrid הוא תוספת יחסית חדשה ל CSS Grid שמאפשרת לגרידים מקוננים לירש את גדלי ה tracks של ההורה. יש לו 97% תמיכת דפדפנים גלובלית נכון ל 2026 (Chrome 117+, Firefox 71+, Safari 16+).

איזו בעיה Subgrid פותר? נניח שיש לכם גריד של כרטיסים. האלמנטים הפנימיים של כל כרטיס (כותרת, תיאור, footer) לא יכולים להתיישר בין הכרטיסים כי לכל כרטיס יש גריד עצמאי. עם Subgrid, הגריד הפנימי יורש את ה row tracks של רכיב ההורה:

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 8px;
}

כל כרטיס מתפרס על 3 שורות הורה ומשתמש ב grid-template-rows: subgrid כדי ליישר את התוכן שלו עם הכרטיסים האחרים:

שימו לב איך כל הכותרות, התיאורים וה footers של שלושת הכרטיסים מיושרים אופקית – בלי קשר לאורך התוכן. בלי Subgrid, השורות של כל כרטיס היו עצמאיות והיישור היה נשבר.

אפשר גם להשתמש ב grid-template-columns: subgrid לירושת עמודות. זה שימושי במיוחד בטפסים, שבהם labels ו inputs צריכים להתיישר בין שורות.

---

CSS Grid מול Flexbox

Flexbox מיועדת לעימוד חד מימדי – שורה או עמודה. Grid מיועד לעימוד דו מימדי – שורות ועמודות ביחד.

עימוד חד מימדי – השתמשו ב Flexbox:

עימוד דו מימדי – השתמשו ב Grid:

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

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

---

תמיכת דפדפנים

ל CSS Grid יש תמיכה גלובלית של 98% בדפדפנים. כל הדפדפנים המודרניים תומכים בו באופן מלא מאז 2017. אפשר להשתמש בו בביטחון בפרודקשן בלי fallbacks.

---

שאלות נפוצות

הנה שאלות נפוצות בנושא CSS Grid:

---

לסיכום

במדריך הזה כיסינו את הליבה של CSS Grid: containers, items, tracks, areas, יישור, מיקום, gap ו fr, שימוש ב grid-template-areas למבני עמודים, implicit grids ו auto-flow. עברנו גם על פטרנים ריספונסיביים עם auto-fit/auto-fill, subgrid וחפיפת אלמנטים.

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