רשת עם 12 פינות

עוד קלאסיקה: רשת של 12 מכשירים. אפשר לכתוב במהירות רשתות ב-CSS באמצעות הפונקציה repeat(). כשמשתמשים בשדה repeat(12, 1fr); בעמודות של תבנית הרשת, מוצגות 12 עמודות לכל עמודה 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

עכשיו יש לכם רשת של 12 עמודות עם מסלולים, ואפשר למקם בה רכיבי צאצא. אחת הדרכים לעשות זאת היא למקם אותם באמצעות קווי רשת. לדוגמה, העמודה grid-column: 1 / 13 תכלול את כל האורך מהשורה הראשונה עד השורה ה-13 האחרונה (13) ותתפרס על 12 עמודות. grid-column: 1 / 5; יתמקד בארבע הראשונות.

דרך נוספת לכתוב זאת היא באמצעות מילת המפתח span. באמצעות span, אפשר להגדיר את קו ההתחלה ואת מספר העמודות שייפרסו מנקודת ההתחלה הזו. במקרה הזה, הערך grid-column: 1 / span 12 יהיה שווה ערך ל-grid-column: 1 / 13 ו-grid-column: 2 / span 6 יהיה שווה ערך ל-grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

HTML

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

CSS

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}