בדוגמה השביעית, שלב כמה מהמושגים שכבר למדת כדי ליצור פריסה רספונסיבית עם רכיבי צאצא גמישים וממוקמים באופן אוטומטי. די מסודר. מונחי המפתח שכדאי לזכור כאן הם 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));
}