uk-expand-to-edge
התמונה יוצאת מהקונטיינר עד הקצה.
היתרון: תמונה רוחבית יפה מקבלת בדסקטופ הרבה יותר נוכחות. והיישום קצת מורכב, אז זה אנטי-פטרן של AI: כלי בינה לא יציעו דבר כזה לבד, וזה יוצר בידול קל לעומת מראה גנרי.
מה לא עובד: זיגזג שבו שורה אחת פתאום לא יוצאת לקצה. אם אחריו בא סקשן עם תמונה בלי expand, לרוב צריך להפריד ביניהם בצבע (זברה).
קלאס אחד על עמודה של גריד רגיל. -left הוא inline-start, אז ב-RTL העמודה הראשונה יוצאת ימינה: בוחרים לפי הצד של העמודה, לא לפי הצד במסך. מתחת ל-960 המנגנון כבוי והתמונה יושבת בעמודה.
<div className="uk-container">
<div className="grid grid-cols-1 *:min-w-0 gap-(--uk-grid-gutter) max-uk-s:gap-[var(--uk-grid-gutter-mobile,20px)] uk-m:grid-cols-2 items-center">
<div className="uk-expand-to-edge-left"><img … /></div>
<div>…</div>
</div>
</div>1 · To the edgeuk-expand-to-edge
התמונה עד קצה המסך, בלי פינות בצד שיוצא.
תמונה שיוצאת מהקו
המלל יושב על הקונטיינר, כמו כל העמוד. התמונה ממשיכה עד קצה המסך, בלי לשנות אף מספר בגריד.
עוד פרטים2 · With breathing roomuk-expand-to-edge
uk-expand-padding מחזיר אותה 32px מהקצה, והפינות המעוגלות נשארות.
3 · Zigzaguk-expand-to-edge
שתי שורות, כל אחת לקצה אחר.
split רגיל על הקונטיינר, והתמונה בצד אחד יוצאת מעבר לקו עד קצה המסך. המלל נשאר על הקו של כל העמוד, ורק התמונה שוברת אותו. סקשן תמונה בלי expand מיד אחריו דורש הפרדת צבע (זברה).
<div className="uk-mix"><img className="col-[1/12] row-[1/21]" … />…</div>uk-expand-to-edge-left / -right + uk-expand-padding, styles/uk-components.css
