עימוד רספונסיבי עם 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="https://via.placeholder.com/450x300?text=Grid+Element" /></li>
    <li><img src="https://via.placeholder.com/450x300?text=Grid+Element" /></li>
    <li><img src="https://via.placeholder.com/450x300?text=Grid+Element" /></li>
</ul>

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

ה CSS שאתם רואים מעלה מסדר את האלמנטים בגריד עם רוחב קבוע מינימלי של 192px וממלא את כל השטח הנשאר מכיוון ואנו משתמשים ב Fractal 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?

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

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

.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;
    }
}

לבטח תרצו להוסיף Media Query בכדי לשחק עם מספר האלמטים המופיעים ברוחב מסך קטן יותר על ידי שינוי שורות 7-8.

לסיכום

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

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