יסודות ה־Grid

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 31 מתוך 43.

CSS Grid היא מערכת פריסה שמאפשרת לך ליצור בקלות דפי אינטרנט עם שורות ועמודות. היא מצוינת ליצירת פריסות מורכבות ורספונסיביות בלי להזדקק לציפות או למיקום מסובך. בנוסף, היא פועלת בכל הדפדפנים המודרניים.

כדי ליצור מיכל רשת, השתמשו במאפיין display:

.container {
  display: grid;
}

הגדירו עמודות ברשת שלכם באמצעות grid-template-columns עם יחידות px או fr (שברים):

/* כך נוצרות שלוש עמודות, כאשר העמודה האמצעית תופסת מקום כפול מכל אחת משתי העמודות האחרות. */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

הגדר שורות באמצעות grid-template-rows. השתמש במאפיין gap כדי להוסיף רווח בין פריטי הרשת.

/* יוצר רשת עם שתי שורות: גובה הראשונה הוא 100px, וגובה השנייה הוא 200px */
.container {
  display: grid;
  grid-template-rows: 100px 200px;
  gap: 20px;
}

אתגר

קל

צור כלל CSS עבור מחלקה בשם grid-container ש:

מגדיר את מאפיין התצוגה כך שייצור רשת
יוצר שלוש עמודות שוות ברוחבן באמצעות יחידת fr
יוצר שתי שורות: הראשונה בגובה 150px והשנייה בגובה 250px
מוסיף רווח של 20px בין כל הפריטים ברשת

כתוב רק את קוד ה-CSS עבור המחלקה grid-container.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <style>
        .item{
            border: 2px solid black;
            background-color: #82f5d0;
        }
     /* Add your CSS code here: */
    
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>