כשחושבים על פריסות, לרוב חושבים על עיצובים ברמת הדף. אבל לרכיבים קטנים יותר בדף יכולים להיות פריסות עצמאיות משלהם.
הכי טוב שהפריסות ברמת הרכיב יותאמו אוטומטית, בלי קשר למיקום שלהן בדף. יכולים להיות מצבים שבהם לא יודעים אם רכיב מסוים יוצב בעמודת התוכן הראשית, בסרגל הצד או בשניהם. אם לא יודעים בוודאות איפה הרכיב ימוקם, צריך לוודא שהוא יכול להתאים את עצמו למאגר שלו.
תצוגת רשת
CSS grid לא מיועד רק לפריסות ברמת הדף. הן מתאימות גם לרכיבים שמוצגים בתוכן שלהן.
בדוגמה הזו, פסאודו-אלמנטים מסוג ::before ו-::after יוצרים קווים דקורטיביים בכל אחד מהצדדים של כותרת. הכותרת עצמה היא מאגר רשת. הפריסה של כל אחד מהרכיבים היא כזו שהקווים תמיד ממלאים את השטח הזמין.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
כאן מוסבר איך לבדוק פריסות של רשתות בכלי הפיתוח ל-Chrome.
Flexbox
כמו שאפשר להבין מהשם, אפשר להשתמש ב-flexbox כדי להפוך את הרכיבים לגמישים. אתם יכולים להגדיר אילו אלמנטים ברכיב צריכים להיות בגודל מינימלי או מקסימלי, ולאפשר לאלמנטים האחרים להתאים את עצמם בהתאם.
בדוגמה הזו, התמונה תופסת רבע מהשטח הזמין והטקסט תופס את שלושת הרבעים הנותרים. אבל התמונה אף פעם לא גדולה מ-200 פיקסלים.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
כך בודקים פריסות של flexbox בכלי הפיתוח ל-Chrome.
שאילתות בנוגע למאגר
Flexbox מאפשר לכם לעצב את התוכן. אתם יכולים לציין את הפרמטרים של הרכיבים (כמה צרים או רחבים הם צריכים להיות) ולתת לדפדפן להבין מה ההטמעה הסופית.
אבל לרכיב עצמו אין מידע על ההקשר שלו. הוא לא יודע אם הוא נמצא בשימוש בתוכן הראשי או בסרגל צד. לכן, פריסות של רכיבים יכולות להיות מסובכות יותר מפריסות של דפים. כדי להחיל סגנונות שרלוונטיים להקשר, הרכיבים צריכים לדעת יותר מרוחב אזור התצוגה שבו הם נמצאים.
בפריסות דפים כן יודעים את הרוחב של הקונטיינר, כי הקונטיינר הוא אזור התצוגה של הדפדפן. שאילתות מדיה מדווחות על המידות של הקונטיינר ברמת הדף.
כדי לדווח על המאפיינים של מאגר כלשהו, משתמשים בשאילתות בנוגע למאגר.
כדי להתחיל, מגדירים אילו רכיבים פועלים כקונטיינרים.
main,
aside {
container-type: inline-size;
}
המשמעות היא שרוצים לשלוח שאילתה לגבי המאפיין המוצג בשורה. במסמכים באנגלית, זה הציר האופקי. אתם עומדים לשנות את הסגנונות על סמך רוחב המאגר.
אם רכיב נמצא באחד מהקונטיינרים האלה, אפשר להחיל עליו סגנונות באופן דומה לאופן שבו מחילים עליו שאילתות מדיה.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
אם אובייקט מדיה נמצא בתוך מאגר שרוחבו קטן מ-25em, סגנונות ה-flexbox לא יחולו. התמונה והטקסט מופיעים בסדר אנכי.
אבל אם רכיב ההכלה רחב יותר מ-25em, התמונה והטקסט יופיעו זה לצד זה.
בעזרת שאילתות של רכיבי container, אפשר להגדיר סגנון לרכיבים באופן עצמאי. אפשר לכתוב כללים על סמך הרוחב של רכיב המכיל; הרוחב של אזור התצוגה כבר לא משנה.
שילוב שאילתות
אפשר להשתמש בשאילתות מדיה לפריסת הדף ובשאילתות של רכיבים עבור הרכיבים בדף.
במקרה הזה, המבנה הכללי של הדף כולל רכיב main ורכיב aside.
יש אובייקטים של מדיה בשני הרכיבים.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
שאילתת מדיה מחילה פריסת רשת על הרכיבים main ו-aside כשהאזור לתצוגה רחב יותר מ-45em.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
כלל השאילתה של הקונטיינר לאובייקטים של המדיה נשאר זהה:
פריסת flexbox אופקית תוחל רק אם רכיב הקונטיינר רחב יותר מ-25em.
שאילתות לגבי מאגרי תגים משנות את כללי המשחק כשמדובר בפריסות מיקרו. הרכיבים יכולים להיות עצמאיים, בלי קשר לאזור התצוגה בדפדפן.
בדיקה של רמת ההבנה שלך
רוצה לבחון את הידע שלך לגבי פריסות מיקרו?
האם גם Grid וגם Flexbox שימושיים לפריסות מיקרו?
במאמרים הקודמים למדתם על פריסות מאקרו ברמת הדף. עכשיו אתם יודעים על פריסות מיקרו ברמת הרכיב.
בשלב הבא, נתעמק באבני הבניין של התוכן ונלמד איך להפוך את התמונות לרספונסיביות. קודם כל, נסביר על טיפוגרפיה רספונסיבית.