justify-items

מגדיר כיצד ליישר את התוכן בתוך תאי ה-Grid על ציר הרוחב.

מה זה justify-items?

המאפיין justify-items מגדיר כיצד ליישר את התוכן בתוך כל תא של Grid על ציר הרוחב.

ערכים

start - ליישר את התוכן להתחיל מהקצה השמאלי של התא.
end - ליישר את התוכן להתחיל מהקצה הימני של התא.
center - ליישר את התוכן במרכז התא.
stretch - למתוח את התוכן כדי למלא את התא.

דוגמה לשימוש ב-justify-items

להלן דוגמה לשימוש במאפיין justify-items:

אלמנט 1

אלמנט 2

אלמנט 3

אפשר להגדיר את זה לדוגמה כך

    
          <style>
            .container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 10px;
            }
            .item {
              background-color: lightcoral;
              padding: 20px;
              text-align: center;
              justify-items: center;
            }
          </style>
          <div class="container">
            <div class="item">אלמנט 1</div>
            <div class="item">אלמנט 2</div>
            <div class="item">אלמנט 3</div>
          </div>