grid-auto-rows

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



מה זה grid-auto-rows?

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

ערכים

  • size - גודל השורות האוטומטיות, לדוגמה 100px, 1fr וכו'.

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

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

אלמנט 1
אלמנט 2
אלמנט 3

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

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

עוד בקטגוריה Grid (מודל פריסת רשת)

תגובות

רק רגע

שיתוף