עימוד רספונסיבי עם CSS Grid ללא שימוש ב Media Queries

אימוץ הפלקסביליות של CSS Grid מספקת לנו את האפשרות ליצור אתרים עמידים וחזקים (Frontend Wise), בהם במקום להשתמש בגדלים ספציפיים וקבועים, אנו תוחמים אלמנטים בגבולות מסוימים ומאפשרים להם למלא את השטח הריק הנותר.

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

כמו רבים אחרים, גם אני מחבק רעיון זה ומשתמש בו כמה שניתן כדי ליצור עימודים מבוססי CSS Grid וללא Media Queries כבדוגמה הבאה (זוהי דוגמה חיה):

זהו גריד רספונסיבי ללא Media Queries כלל והוא עובד בכל Viewport תודות ל-CSS Grid. מגניב, לא?

אתם מוזמנים להקטין / להגדיל את רוחב הדפדפן ולראות בעצמכם…

כיצד זה עובד?

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

פונקציה זו היא שמאפשרת לנו ליצור גריד רספונסיבי וחזק ללא שימוש כלל ב-Media Queries עבור הרזולוציות השונות. תנו מבט ב-CSS עבור הדוגמה המוצגת מעלה:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  grid-gap: 15px;
}

וזה ה-HTML עבור אותה דוגמה:

<ul class="container">
    <li><img src="image.jpg" /></li>
    <li><img src="image.jpg" /></li>
    <li><img src="image.jpg" /></li>
</ul>

מדהים מה ניתן לעשות כיום עם מספר שורות CSS, אתם חייבים להסכים…

ה-CSS שאתם רואים מעלה מסדר את האלמנטים בגריד עם רוחב מינימלי קבוע של 192px וממלא את כל השטח הנשאר מכיוון ואנו משתמשים ב-Fractional Units (בקצרה 1fr) עבור הרוחב המקסימלי. השטח הנותר יתחלק בצורה שווה בין האלמנטים הנמצאים בתוך הקונטיינר.

ברגע שרוחב האלמנט יגיע ל-192px הוא לא יקטן מעבר לכך, אלא השורה תישבר והאלמנט יימתח למקסימום רוחב שניתן (תוך התייחסות למידה 1fr).

אתם כנראה שואלים עצמכם בשלב זה מהו אותו Keyword בשם auto-fill בו השתמשנו. ננסה להסביר תפקידו ומשמעותו בקצרה…

שימוש ב-auto-fill Keyword

כאשר אנו יוצרים גריד באלמנט כלשהו, ניתן להשתמש ב-הפונקציה repeat() כדי ליצור חזרה מסוימת של הגדרת האלמנטים בגריד. למשל, הקוד הבא ייצור גריד של 10 אלמנטים בעלי רוחב 100px כל אחד:

.container {
   grid-template-columns: repeat(10, 100px);
}

אנו כמובן יכולים גם ליצור 10 אלמנטים פלקסבילים באותו רוחב באמצעות יחידת המידה fr:

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

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

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

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

.container {
   grid-template-columns: repeat(auto-fill, 100px);
}

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

CSS Grid נתמך בכל הדפדפנים המרכזיים מאז 2017, ונכון להיום יש לו כ-97-98% תמיכה גלובלית. ניתן להשתמש ב-CSS Grid בפרודקשן בביטחון מלא ללא צורך ב-fallback.

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

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

.container > ul > li {
    width: calc( 94% / 3 );
    margin: 1%;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
        grid-gap: 1rem;
    }

    .container > ul > li {
        width: unset;
        margin: unset;

    }

    .container > ul {
        flex-wrap: unset;
    }
}

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

שאלות נפוצות

לסיכום

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

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