5 טעויות ביישור כרטיסים ב-RTL (וכך CSS Subgrid פותר אותן)

ראיתי שוב ושוב את אותן 5 טעויות בצוותי פיתוח ועיצוב. כולם מנסים ליישר גובה של כרטיסי שירות או מוצר, וכולם מסתבכים. הנטייה המיידית היא להעמיס קלאסים של Flexbox, להגדיר גבהים קשיחים, או גרוע מכל — לכתוב סקריפט JavaScript שמודד גובה של אלמנטים בזמן רנדור. ב-2026, אין לזה שום הצדקה.

טעות 1: ניסיון ליישר אלמנטים פנימיים בעזרת Flexbox

פלקסבוקס הוא כלי מצוין. הוא מיועד לנהל ציר אחד בלבד.

כשאתם שמים גריד של כרטיסים, כל כרטיס הוא עולם נפרד מבחינת Flexbox. הכרטיס לא יודע מה הגובה של הכותרת בכרטיס השכן.

התוצאה? כרטיס אחד מכיל כותרת בשתי שורות בעברית. הכרטיס לידו מכיל כותרת בשורה אחת. הכפתורים בתחתית מפסיקים להיות בקו ישר אחד.

הגדרה · CSS Subgrid

מאפיין ב-CSS Grid שמאפשר לילדים של גריד לרשת את קווי הרשת (Grid Tracks) של ההורה שלהם, וכך ליישר אלמנטים פנימיים בין כרטיסים נפרדים.

התיקון פשוט. מוגדר גריד מרכזי, והכרטיסים הפנימיים משתפים את אותן השורות בדיוק בעזרת grid-template-rows: subgrid.

טעות 2: חישוב גובה כרטיסים באמצעות JavaScript

אני נתקל בזה עדיין באתרי וורדפרס וריאקט. המפתח רוצה שהכותרות יהיו באותו גובה, אז הוא כותב סקריפט שנרץ אחרי טעינת העמוד, מודד את הכותרת הגבוהה ביותר, וקובע את הגובה לכולן.

זה פתרון גרוע.

קוד JS כזה גורם לקפיצות במסך (CLS), מייצר עיכוב ברנדור ומכביד על המכשיר.

מחיקת הסקריפט היא הצעד הראשון. CSS נייטיב עושה את זה מהר יותר וללא השפעה על הביצועים.

טעות 3: קביעת min-height קבוע לכותרות ותיאורים

קביעת min-height: 80px לכותרת נראית כמו פתרון מהיר. עד שהמסך משתנה.

כשגודל המסך יורד, הכותרת בעברית תופסת שלוש שורות. הטקסט גולש אל מחוץ לקופסה, והעיצוב נשבר לחלוטין.

התיקון: מאפשרים לתבנית ה-Subgrid להגדיר את שורת הכותרת כ-auto. הדפדפן יחשב את הכותרת הגבוהה ביותר באותה שורה בגריד, וישווה את גובה כל הכותרות באותה שורה באופן אוטומטי.

טעות 4: התעלמות מהשפעת כיוון RTL על זיהוי חוסר סימטריה

בעברית, העין סורקת את המסך מימין למעלה לכיוון שמאל למטה. כשהכפתורים בתחתית הכרטיסים אינם מיושרים, חוסר הסימטריה קופץ מיד לעין.

ב-RTL, חוסר יישור בקו הכפתורים התחתון יוצר מראה לא מוקפד. העין נתקעת ברווחים הריקניים שנוצרים מתחת לתיאור הקצר.

כאשר משתמשים ב-Subgrid, מגדירים את ה-Layout של הכרטיס כך:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

האייקון, הכותרת, התיאור והכפתור מסתנכרנים באופן מלא לרוחב כל השורה.

טעות 5: סרבול ה-HTML עם עטיפות (Wrappers) מיותרות

כדי לגרום ל-Flexbox לעבוד בצורה חצי-סבירה, מפתחים עוטפים כל קבוצת אלמנטים ב-div פנימי נוסף. עטיפה לכותרת, עטיפה לתוכן, עטיפה לכפתור.

מבנה הקוד הופך לעמוס ומסורבל.

מבנה HTML נקי נראה כך:

<article class="card">
  <img src="/icon.svg" alt="" />
  <h3>בניית אתרים ב-2026</h3>
  <p>תיאור קצר של השירות בעברית בגובה משתנה.</p>
  <a href="/link">קרא עוד</a>
</article>

ללא עטיפות מיותרות. ה-Subgrid מטפל ביישור ישירות מול רשת ההורה.

סיכום: המלצה אחת מתועדפת

מבחינתי, אין יותר סיבה לכתוב מעקפים או סקריפטים ליישור כרטיסים.

פתחו את קובץ ה-CSS של המערכת שלכם, חפשו את רכיבי הכרטיסים, והחליפו את מנוע היישור הפנימי ל-grid-template-rows: subgrid.

💡

בניית אתרים ב-2026 דורשת קוד נקי. CSS Subgrid מעניק יישור פיקסל-פרפקט ב-RTL ללא שורת JS אחת.