פריסות מאקרו מתארות את הארגון הרחב יותר של הממשק, ברמת הדף.
לפני שמחילים פריסה כלשהי, חשוב לוודא שהתוכן מוצג בצורה הגיונית. במסכים קטנים יותר, סדר ברירת המחדל יהיה של עמודה אחת.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
כשמסדרים את הרכיבים האלה ברמת הדף, מעצבים פריסה מאקרו: תצוגה כללית של הדף. באמצעות שאילתות מדיה, אפשר לספק כללים ב-CSS שמתארים איך התצוגה הזו צריכה להשתנות בהתאם לגדלים שונים של מסכים.
תצוגת רשת
CSS grid הוא כלי מצוין להחלת פריסה על הדף. בדוגמה הקודמת, נניח שרוצים פריסה של שתי עמודות כשיש מספיק רוחב מסך. כדי להחיל את הפריסה הזו של שתי עמודות ברגע שהדפדפן רחב מספיק, משתמשים בשאילתת מדיה כדי להגדיר את סגנונות הרשת מעל נקודת עצירה שצוינה.
@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 ובלי שאילתות מדיה. כך אתם חוסכים לעצמכם עבודה – הדפדפן מבצע את החישובים במקום אתם. כדי לראות כמה דוגמאות לפריסות CSS מודרניות שמשתנות באופן דינמי בלי שנדרשות שאילתות מדיה, אפשר לעיין באתר 1linelayouts.com.
בדיקה של רמת ההבנה שלך
בודקים את הידע שלכם לגבי פריסות של מאקרו.
איזה משפט מתאר בצורה הכי טובה פריסות מאקרו?
פריסות מאקרו תמיד משתמשות בשאילתות מדיה כדי להתאים את עצמן לגדלים שונים של מסכים?
אחרי שקיבלתם כמה רעיונות לפריסות מאקרו ברמת הדף, הגיע הזמן להתמקד ברכיבים שבתוך הדף. זהו תחום פריסות המיקרו.