פריסות מאקרו מתארות את הארגון הגדול יותר של הממשק, שכולל את כל הדפים.
לפני שמחילים פריסה כלשהי, צריך לוודא שהתוכן זורם בצורה הגיונית. מסכים קטנים יותר יקבלו את הסדר שמוגדר כברירת מחדל בעמודה אחת.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
כאשר מארגנים את הרכיבים הנפרדים ברמת הדף, תיצרו פריסת מאקרו: תצוגה ברמה גבוהה של הדף. באמצעות שאילתות מדיה, אפשר לציין כללים ב-CSS שמתארים איך התצוגה הזו צריכה להתאים לגדלים שונים של מסכים.
תצוגת רשת
סידור תאים ב-CSS הוא כלי מצוין להוספת פריסה לדף. בדוגמה שלמעלה, נניח שרוצים להציג פריסה של שתי עמודות כשיש מספיק רוחב מסך זמין. כדי להחיל את הפריסה הזו של שתי עמודות כשהדפדפן רחב מספיק, צריך להשתמש בשאילתת מדיה כדי להגדיר את סגנונות התצוגה של הרשת מעל נקודת עצירה ספציפית.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
בפריסה הספציפית הזו אפשר גם להשתמש ב-flexbox. הסגנונות ייראו כך:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
אבל בגרסת ה-Flexbox נדרש יותר CSS. לכל עמודה יש כלל נפרד שמתאר את נפח האחסון שהיא צריכה לתפוס. בדוגמה של הרשת, המידע הזה נכלל בכלל אחד לרכיב שמכיל אותו.
דרושה לך שאילתת מדיה?
יכול להיות שלא תמיד יהיה צורך להשתמש בשאילתת מדיה. שאילתות מדיה פועלות היטב כשמחילים שינויים על כמה רכיבים, אבל אם צריך לעדכן את הפריסה באופן משמעותי, יכול להיות שהשאילתות של המדיה יהיו לא יעילות עם הרבה נקודות עצירה.
נניח שיש לכם דף מלא ברכיבי כרטיסים.
הכרטיסים אף פעם לא רחבים יותר מ-15em, ורצוי להציב כמה שיותר כרטיסים בשורה אחת.
אפשר לכתוב שאילתות מדיה עם נקודות עצירה של 30em, 45em, 60em וכן הלאה, אבל זה תהליך די מייגע וקשה לתחזק אותו.
במקום זאת, אפשר להחיל כללים כך שהכרטיסים עצמם יתפסו את שטח האחסון המתאים באופן אוטומטי.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
אפשר ליצור פריסה דומה באמצעות flexbox. במקרה כזה, אם אין מספיק כרטיסים כדי למלא את השורה האחרונה, הכרטיסים הנותרים יימתחו כדי למלא את המקום הזמין במקום להיכנס לעמודות. אם רוצים ליישר שורות ועמודות, משתמשים בתצוגת רשת.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
בעזרת כמה כללים חכמים ב-flexbox או ב-grid, אפשר לעצב פריסות מאקרו דינמיות עם כמות מינימלית של CSS וללא שאילתות מדיה. כך תימנעו מעבודה מיותרת – הדפדפן יבצע את החישובים במקום זאת. באתר 1linelayouts.com אפשר לראות דוגמאות לפריסות CSS מודרניות וגמישות שלא מחייבות שאילתות מדיה.
בדיקת ההבנה
בודקים את הידע שלכם בנושא פריסות מאקרו.
איזה משפט מתאר בצורה הטובה ביותר את הפריסות של המאקרו?
האם בפריסות מאקרו תמיד נעשה שימוש בשאילתות מדיה כדי להתאים לגדלים שונים של מסכים?
עכשיו, אחרי שקיבלתם כמה רעיונות לפריסות מאקרו ברמת הדף, תוכלו להתמקד ברכיבים בדף. זהו תחום מיקרו-פריסות.