מיקום פריטים בשורות Grid

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

המאפיין grid-row מאפשר לך לשלוט במיקום האנכי של פריט ברשת CSS. הוא מציין באיזו שורה להתחיל ולסיים את מיקום הפריט.

לפני שנתחיל, חשוב להבין את ההבדל בין קווי רשת לבין מסלולי רשת.

קווי רשת הם הקווים המפרידים (הממוספרים 1, 2, 3 וכו׳) המרכיבים את מבנה הרשת. מסילת רשת היא המרחב שבין שני קווי רשת סמוכים: למעשה, השורה או העמודה עצמה.

נניח שיש לנו מְכָל פשוט עם 8 פריטים, ואנחנו רוצים שהפריט הראשון ישתרע מקו שורה 1 עד קו שורה 4 ברשת:

.item1 {
  grid-row: 1 / 4;
}

כך זה נראה:

כדי להשתרע על פני כמה שורות, אפשר גם להשתמש במילת המפתח span:

.item2 {
  grid-row: 2 / span 2;
  background-color: lightpink;
}

הדבר ממקם את item2 החל בקו שורה 2 ומשתרע על פני 2 שורות (או 2 מסלולים).

אתגר

קל

השתמשו במאפיין grid-row כדי לגרום לפריט הרביעי ברשת להשתרע מקו שורה 2 עד קו שורה 4.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
/* Add your CSS styles here */

</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

</body>
</html>