CSS Container Queries – מדריך מלא עם דוגמאות אינטראקטיביות

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

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

אתם פונים ל-Media Query. אבל רגע – הסיידבר צר גם בדסקטופ, לא רק בנייד. ה-@media (max-width: 768px) שלכם נכנס לפעולה במכשירים ניידים כמובן, אבל הכרטיס בסיידבר עדיין שבור ברזולוציה של 1440px מכיוון ש-Media Queries לא יודעים היכן הרכיב שלכם ממוקם. הם מכירים רק את ה-viewport.

זו בדיוק הבעיה בשבילה Container Queries נוצרו. גררו את הסליידר ותראו בעצמכם:

אני משתמש ב Container Queries כבר בערך שנה והם שינו את הדרך בה אני חושב על עיצוב רכיבים. במקום לשאול "כמה רחב המסך?", ה-CSS שלכם שואל "כמה רחב הקונטיינר שלי?" – והבדל קטן זה משמעותי יותר ממה שאתם חושבים…

מה זה Container Queries?

Container Queries מאפשרים לכם להחיל סגנונות CSS על אלמנט בהתבסס על גודל הקונטיינר שלו (אלמנט האב), ולא על ה-viewport של הדפדפן.

הקונספט מבוסס על CSS containment. אתם מסמנים אלמנט כ"קונטיינר", ואז כותבים סגנונות מותנים שנכנסים לפעולה כשאותו קונטיינר מגיע לממדים מסוימים.

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

Container Queries מול Media Queries

ההבדל מסתכם במה שכל אחד מהם מגיב אליו.

Media Queries שואלים "כמה גדול המסך?" Container Queries שואלים "כמה מקום ההורה שלי נותן לי?" כרטיס בסיידבר של 300px ואותו כרטיס באזור תוכן ראשי של 900px מקבלים סגנונות שונים באופן אוטומטי.

Media Queries ו Container Queries משלימים אחד את השני. השתמשו ב-Media Queries ל-layout ברמת המקרו (גריד של דף, אסטרטגיית ניווט) וב-Container Queries ל-layout ברמת המיקרו, ברמת רכיב (איך רכיבים בודדים מתאימים את עצמם פנימית).

איך Container Queries עובדים

הגדרת Container Queries דורשת שני שלבים: הגדרת קונטיינר, ואז שאילתה עליו.

שלב 1: הגדרת קונטיינר

השתמשו במאפיין container-type בכדי לסמן אלמנט כקונטיינר:

.card-wrapper {
    container-type: inline-size;
}

המאפיין container-type מקבל את הערכים הבאים:

• inline-size – מאפשר שאילתות על ציר ה-inline (רוחב במצבי כתיבה אופקיים). במאפיין זה תשתמשו ברוב המקרים.
• size – מאפשר שאילתות על שני הצירים. דורש שלקונטיינר יהיה גובה (height) מפורש.
• normal – ברירת המחדל. לא גודל הקונטיינר, אבל עדיין עובד כקונטיינר style query.

אתם יכולים גם לתת לקונטיינר שם עם container-name:

.card-wrapper {
    container-type: inline-size;
    container-name: card;
}

או להשתמש בקיצור container (קודם השם, ולאחר מכן סוג):

.card-wrapper {
    container: card / inline-size;
}

שלב 2: שאילתה על הקונטיינר

השתמשו ב-@container בכדי לכתוב סגנונות מותנים. הסגנונות האלה חלים על הצאצאים של הקונטיינר כשהתנאי מתקיים:

@container (min-width: 500px) {
    .card {
        flex-direction: row;
    }
}

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

@container (width > 500px) {
    .card {
        flex-direction: row;
    }
}

@container (300px < width < 600px) {
    .card {
        font-size: 0.9em;
    }
}

בכדי לכוון לקונטיינר ספציפי עם שם:

@container card (width > 500px) {
    .card {
        flex-direction: row;
    }
}

דוגמאות חיות

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

רכיב כרטיס רספונסיבי

הכרטיס הזה עובר בין layout אנכי (מוערם) ל-layout אופקי (זה לצד זה) בהתאם לרוחב הקונטיינר שלו. ה-breakpoint הוא ב-420px.

ניווט סיידבר אדפטיבי

הניווט הזה מציג רק אייקונים כשהוא צר ומתרחב להציג תוויות כשהקונטיינר רחב מספיק. אותו רכיב עובד בסיידבר מכווץ של 60px או בסיידבר מלא של 240px – בלי breakpoints של viewport.

ווידג'ט דשבורד

ווידג'ט סטטיסטיקות שמציג layout קומפקטי (מספר בלבד) בקונטיינרים קטנים ומתרחב לכלול מיני גרף עמודות כשיש מספיק מקום.

יחידות אורך של Container Queries

Container Queries מציגים גם סט של יחידות אורך יחסיות לממדי הקונטיינר, בדומה ליחידות viewport אבל בטווח מקומי:

היחידות האלה שימושיות לטיפוגרפיה ו-spacing דינמיים שמתאימים את עצמם לקונטיינר:

.card-title {
    font-size: clamp(14px, 10px + 1.5cqi, 22px);
    padding: clamp(0.5rem, 5cqi, 1.5rem);
}

אם לא קיים קונטיינר מתאים ב ancestor tree, היחידות האלה חוזרות ליחידות ה-viewport הקטנות המקבילות.

מלכודות ומגבלות

ל-Container Queries יש כמה ״מלכודות״ שמפתחי CSS בתחילת דרכם נוטים ליפול בהן:

קונטיינרים לא יכולים לעצב את עצמם. אתם יכולים לעצב רק צאצאים בתוך ה @container. אלמנט הקונטיינר עצמו מחוץ לתחום.

קונטיינרים חייבים לקבל את הגודל שלהם מבחוץ. הגדרת container-type: inline-size יוצרת size containment. כלומר הרוחב של הקונטיינר מחושב תוך התעלמות מהילדים שלו. הקונטיינר צריך לקבל את הגודל שלו מהקשר ה-layout – תא של CSS Grid, הורה Flexbox, או רוחב מפורש.

אי אפשר להשתמש ב-var() בתנאי השאילתה. זה למשל לא יעבוד:

/* This is invalid and will be ignored */
@container (min-width: var(--breakpoint)) {
    .card { flex-direction: row; }
}

container-type: size דורש גובה מפורש. אם אתם צריכים לבצע שאילתה על הרוחב והגובה יחדיו, אז לקונטיינר חייב להיות גובה מפורש. ברוב המקרים, inline-size זה כל מה שאתם צריכים.

הימנעו מלהפוך את <html> או <body> לקונטיינרים. החלת container-type על אלמנטי שורש יכולה לגרום להתנהגות layout לא צפויה. השתמשו באלמנטים סמנטיים כמו <main>, <aside>, או div-ים עוטפים במקום.

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

ל-Container size queries יש תמיכת דפדפנים מצוינת נכון ל-2026:

שאלות נפוצות

שאלות נפוצות על CSS Container Queries:

סיכום

Container Queries מאפשרים לרכיבים שלכם להגיב לשטח הזמין להם במקום ל-viewport. הגדירו קונטיינר עם container-type: inline-size, שאלו עליו עם @container, והרכיב שלכם מתאים את עצמו בכל מקום שהוא ממוקם – סיידבר, תוכן ראשי, מודל, גריד דשבורד.

בשילוב עם CSS Grid ו-Flexbox ל-layout, Container Queries משלימים את התמונה לבניית רכיבים רספונסיביים וניתנים לשימוש חוזר באמת.