פריסות מאקרו מתארות את הארגון הגדול ביותר של הדף כולו.
לפני שמחילים פריסה כלשהי, חשוב לוודא שזרימת התוכן הגיונית. מסכים קטנים יותר יקבלו עמודה אחת לפי סדר ברירת המחדל הזה.
<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. הסגנונות ייראו כך:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
עם זאת, הגרסה של flexbox דורשת יותר CSS. לכל עמודה יש כלל נפרד שמתאר כמה מקום היא צריכה לתפוס. בדוגמת הרשת, אותו המידע מופיע תחת כלל אחד עבור הרכיב המכיל.
יש לכם צורך בשאילתת מדיה?
יכול להיות שלא תמיד תצטרכו להשתמש בשאילתת מדיה. שאילתות מדיה פועלות כראוי כשמחילים שינויים על כמה רכיבים, אבל אם יש צורך לעדכן את הפריסה בתדירות גבוהה, יכול להיות ששאילתות המדיה יצאו משימוש עם הרבה נקודות עצירה (breakpoint).
נניח שיש לכם דף מלא ברכיבי כרטיסים.
הכרטיסים אף פעם לא רחבים מ-15em, וכדאי למקם כמה שיותר כרטיסים בשורה אחת.
אפשר לכתוב שאילתות מדיה עם נקודות עצירה (breakpoint) של 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 מודרניות שלא דורשות שאילתות מדיה.
בדיקת ההבנה
בחינת הידע שלכם בפריסות מאקרו.
איזה משפט מתאר בצורה הטובה ביותר פריסות מאקרו?
פריסות מאקרו תמיד משתמשות בשאילתות מדיה כדי להתאים את עצמן לגדלים שונים של מסכים?
עכשיו, אחרי שצברתם כמה רעיונות לפריסות מאקרו ברמת הדף, הפנו את תשומת הלב לרכיבים בדף. זהו התחום של פריסות מיקרו.