grid-template-columns

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

מה זה grid-template-columns?

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

ערכים

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

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

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

אלמנט 1

אלמנט 2

אלמנט 3

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

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