grid-template-rows

מגדיר את מספר וגדלי השורות בתבנית ה-Grid.

מה זה grid-template-rows?

המאפיין grid-template-rows מגדיר את מספר השורות בתבנית ה-Grid ואת גודל השורות.

ערכים

repeat(count, size) - חוזר על גודל השורה מספר פעמים.
auto - גודל אוטומטי לשורות.
fr - יחידת מידה המייצגת חלק יחסי מהשטח הזמין.

דוגמה לשימוש ב-grid-template-rows

להלן דוגמה לשימוש במאפיין grid-template-rows:

אלמנט 1

אלמנט 2

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

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