מספר מילים על הפונקציה repeat ב CSS

הפונקציה repeat() ב-CSS Grid חוסכת לכם כתיבה חוזרת של ערכים. אני משתמש בה כמעט בכל גריד שאני בונה – ברגע שמכירים אותה, קשה לחזור לכתיבת 1fr 1fr 1fr 1fr ידנית.

בואו נראה כיצד repeat() עובדת, כולל auto-fill, auto-fit, שילוב עם minmax() ודוגמאות מעשיות.

הבנת הפונקציה repeat ב-CSS

הפונקציה repeat() היא חלק מהמפרט של CSS Grid. הפונקציה מפשטת את התהליך של יצירת דפוסים חוזרים עבור שורות ועמודות. היא מקבלת שני ארגומנטים: מספר החזרות (או מילת מפתח) וגודל כל חזרה.

במקום לכתוב grid-template-columns: 1fr 1fr 1fr 1fr; אפשר לכתוב grid-template-columns: repeat(4, 1fr); – אותה תוצאה, קוד נקי יותר.

שימוש ב-repeat עם CSS Grid

הנה התחביר הבסיסי:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* חזור על 3 עמודות ברוחב שווה */
}

בקוד מעלה התכונה grid-template-columns משתמשת בפונקציה repeat() כדי ליצור שלוש עמודות, כל אחת עם רוחב של 1fr (יחידת שבר). תחביר זה משפר את קריאות הקוד ומפחית כפילויות.

הנה דוגמה מלאה לשימוש בפונקציה repeat עם CSS Grid:

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.grid-item {
    background-color: #1e2a3a;
    color: #f1eeee;
    padding: 20px;
    text-align: center;
    border: 1px solid #2a3a4a;
    border-radius: 4px;
}

תוצאה:

ניתן גם לחזור על מספר גדלים כדפוס. למשל, repeat(3, 1fr 2fr) יוצר שש עמודות שמתחלפות בין רוחב 1fr ו-2fr.

גריד רספונסיבי עם auto-fill ו-auto-fit

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

מילת המפתח auto-fill

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

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

כל עמודה היא ברוחב מינימלי של 150px וגדלה למלא את השטח הפנוי. במסכים צרים, הפריטים נערמים לפחות עמודות באופן אוטומטי.

מילת המפתח auto-fit

auto-fit עובד בדומה ל-auto-fill, אך הוא מכווץ עמודות ריקות לרוחב אפס. המשמעות היא שהפריטים הקיימים נמתחים למלא את כל השורה.

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

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

האם ניתן להשתמש בפונקציה repeat עם Flexbox?

לא ניתן להשתמש בפונקציה repeat() עם Flexbox, מכיוון שהיא ייחודית לתכונות של CSS Grid (grid-template-columns ו-grid-template-rows).

כדי להשיג התנהגות דומה עם Flexbox, ניתן להשתמש בפונקציה calc() כדי להגדיר רוחב גמיש לאלמנטים חוזרים. שימו לב לדוגמה הבאה בה calc() מבטיחה שכל פריט ישמור על גודלו למרות המרווח.

HTML:

<div class="flex-container">
  <div class="flex-item">פריט 1</div>
  <div class="flex-item">פריט 2</div>
  <div class="flex-item">פריט 3</div>
  <div class="flex-item">פריט 4</div>
  <div class="flex-item">פריט 5</div>
  <div class="flex-item">פריט 6</div>
</div>

CSS:

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex-item {
    width: calc((100% - 20px) / 3); /* שלושה פריטים בשורה עם מרווח של 10 פיקסלים */
    background-color: #2a1520;
    color: #f1eeee;
    padding: 15px;
    margin-bottom: 10px;
    box-sizing: border-box;
    border: 1px solid #3c2030;
    border-radius: 4px;
}

תוצאה:

עם זאת, ברוב המקרים בהם צריכים דפוס גריד חוזר, CSS Grid עם repeat() הוא הבחירה הטובה יותר על פני Flexbox מכיוון שהוא תוכנן בדיוק לצורך זה.

שימוש ב-repeat עם קווים עם שם (Named Lines)

ניתן לכלול קווי גריד עם שם (Named Lines) בתוך הפונקציה repeat(). זה שימושי בעיצובים גדולים בהם צריכים להתייחס לקווים ספציפיים לפי שם.

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

קוד זה יוצר ארבע עמודות, כל אחת עם קו התחלה וסיום בעלי שם. ניתן למקם פריטים באמצעות שמות אלו: grid-column: col-start 2 / col-end 3;.

יתרונות הפונקציה repeat

למה להשתמש ב-repeat() במקום לכתוב את הערכים ידנית? שתי סיבות. ראשית, שינוי גריד מ-4 עמודות ל-6 עמודות דורש עריכה של מספר אחד במקום הוספת ערכים. שנית, כששמים את repeat() ביחד עם auto-fit ו-minmax(), מקבלים עיצוב רספונסיבי לחלוטין ללא Media Queries.

שאלות נפוצות

שאלות נפוצות על הפונקציה repeat() ב-CSS Grid:

סיכום

repeat() חוסכת הקלדה חוזרת, ובשילוב עם auto-fit ו-minmax() מקבלים עיצוב רספונסיבי בלי Media Queries בכלל. אם אתם עובדים עם CSS Grid באופן קבוע, זו פונקציה שתשתמשו בה כל הזמן.