RAM (חזרה, אוטומטית, מינימום)

בדוגמה השביעית, שלב כמה מהמושגים שכבר למדת כדי ליצור פריסה רספונסיבית עם רכיבי צאצא גמישים וממוקמים באופן אוטומטי. די מסודר. מונחי המפתח שכדאי לזכור כאן הם repeat, auto-(fit|fill) ו-minmax(), שאותם אתה זוכר באמצעות ראשי התיבות RAM.

ביחד, זה נראה כך:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

שוב השתמשת ב-repeat(), אבל הפעם השתמשת במילת המפתח auto-fit במקום בערך מספרי מפורש. הפעולה הזו מפעילה את המיקום האוטומטי של רכיבי הצאצא האלה. לילדים האלה יש ערך מינימלי בסיסי של 150px, וערך מקסימלי 1fr. כלומר, במסכים קטנים יותר, הם יהיו ברוחב מלא של 1fr. כשהם מגיעים לרוחב של 150px, הם יתחילו לעבור לאותו קו.

עם auto-fit, כל הטראקים הריקים יתכווצו ל-0, והטראקים שמולאו יתפסו מקום בנפח האחסון שלהם. עם זאת, אם משנים את ההגדרה ל-auto-fill, טראקים ריקים תופסים שטח גדול כמו שהם מנצלים אם הם ימולאו:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

HTML

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}