פריסות מאקרו מתארות את הארגון הגדול יותר של הממשק, שכולל את כל הדפים.
לפני שמחילים פריסה כלשהי, עליכם לוודא שהזרימה של התוכן הגיונית. סדר ברירת המחדל של עמודה יחידה הוא מה שמקבלים מסכים קטנים יותר.
<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;
}
}
גמיש
לפריסה הספציפית הזו אפשר גם להשתמש ב-Flexiblebox. הסגנונות ייראו כך:
@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 או ברשת, קיימת אפשרות לעצב פריסות מאקרו דינמיות עם CSS מינימלי וללא שאילתות מדיה. כך זה פחות עובד לכם - אתם גורמת לדפדפן לבצע את החישובים במקום זאת. כדי לראות כמה דוגמאות לפריסות CSS מודרניות שהן נוזלות בלי לדרוש שאילתות מדיה, אפשר לעבור לקישור הבא: 1linelayouts.com
בדיקת ההבנה
לבחון את הידע שלכם בפריסות מאקרו.
איזה משפט מתאר בצורה הטובה ביותר פריסות מאקרו?
פריסות מאקרו תמיד משתמשות בשאילתות מדיה כדי להתאים את עצמן לגדלים שונים של מסכים?
עכשיו, אחרי שקיבלתם כמה רעיונות לפריסות מאקרו ברמת הדף, להפנות את תשומת ליבכם לרכיבים בדף. זה התחום של פריסות מיקרו.