תיעוד CSS עם דוגמאות להרצה: Grid ב-CSS

Q: מה המשמעות של 1fr ב-CSS grid?

fr הוא חלק מהמקום הפנוי במיכל ה-grid. grid-template-columns: 1fr 1fr 1fr נותן שלוש עמודות שוות, ו-1fr 2fr הופך את העמודה השנייה לרחבה פי שניים מהראשונה. קודם מורידים את הגדלים הקבועים ואת הרווחים; עמודות ה-fr מתחלקות במה שנשאר.

Q: מה ההבדל בין auto-fill ל-auto-fit?

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

Q: איך גורמים לפריט grid להתפרס על שתי עמודות?

השתמשו ב-grid-column: span 2 על הפריט, או תנו לו קו התחלה וקו סיום: grid-column: 1 / 3 מכסה את עמודות 1 ו-2. grid-column: 1 / -1 מתפרס על כל הרוחב, כי -1 הוא הקו האחרון.

Q: האם grid-gap זהה ל-gap?

כן. grid-gap, grid-row-gap ו-grid-column-gap הם השמות הישנים. הדפדפנים עדיין מקבלים אותם ככינויים, אבל כתבו gap, row-gap ו-column-gap, שעובדים גם ב-flexbox.

grid בשלוש שורות

הגדירו display: grid על מיכל ופרטו את העמודות שלו עם grid-template-columns. הילדים ממלאים את התאים לפי הסדר, משמאל לימין בדף באנגלית, ושורה חדשה מתחילה בכל פעם שהעמודות מלאות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

שבעה פריטים, שלוש עמודות: שתי שורות מלאות ושורה שלישית עם פריט 7 בעמודה הראשונה. כל העמודות באותו רוחב, וכל הפריטים בשורה באותו גובה, כך שהקצוות מתיישרים בשני הכיוונים. זה מה ש-grid מוסיף על flexbox.

מגרש משחקים ל-grid

הקלידו כל ערך של grid-template-columns, או לחצו על אחת ההגדרות המוכנות. התצוגה מראה את רוחבי העמודות שהדפדפן חישב (מתוך getComputedStyle) וכמה שורות הפריטים היו צריכים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

כמה דברים שכדאי לראות: 1fr 2fr הופך את העמודה השנייה לרחבה בדיוק פי שניים מהראשונה. 200px 1fr שומר 200px ונותן את השאר לעמודה השנייה. auto 1fr auto קובע את גודל העמודות החיצוניות לפי התוכן שלהן. repeat(4, 100px) משאיר מקום ריק בסוף, כי שום דבר לא גמיש. ערך לא תקין, כמו 1fr 2, נזנח, וה-grid שומר את הערך התקין האחרון.

היחידה fr

fr פירושו "חלק אחד מהמקום הפנוי". הדפדפן מוריד קודם את העמודות הקבועות (px, rem, %, תוכן auto) ואת הרווחים, ואז מחלק את מה שנשאר בין עמודות ה-fr לפי המספרים שלהן.

`grid-template-columns` במיכל של 600px, בלי רווח	רוחבי העמודות
`1fr 1fr 1fr`	200, 200, 200
`1fr 2fr`	200, 400
`100px 1fr 1fr`	100, 250, 250
`1fr 50%`	300, 300

fr הוא לא אותו דבר כמו %: אחוזים ועוד רווחים יכולים להסתכם ביותר מ-100% ולגלוש, בעוד שעמודות fr תמיד מתחלקות רק במה שנשאר אחרי הרווחים.

repeat(), minmax() ו-grid רספונסיבי בלי media queries

repeat(4, 1fr) שווה ל-1fr 1fr 1fr 1fr. minmax(120px, 1fr) היא עמודה שלעולם לא צרה מ-120px וגדלה כדי לקחת חלק. חברו אותם עם auto-fill או auto-fit במקום מספר, וה-grid יוצר כמה עמודות שנכנסות:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

ההצהרה האחת הזאת נותנת כמה עמודות של 180px לפחות שנכנסות במיכל: כמה עמודות במסך רחב, אחת בטלפון, בלי media query. ההבדל בין auto-fill ל-auto-fit נראה כשיש פחות פריטים מעמודות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

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

מיקום פריטים: grid-column ו-grid-row

קווי ה-grid ממוספרים מ-1 בקצה ההתחלה. grid-column: 1 / 3 פירושו "מקו 1 עד קו 3", כלומר שתי עמודות. span 2 פירושו "שתי עמודות מהמקום שבו נחתת", ו--1 הוא הקו האחרון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

הפריט הכהה ממלא את כל השורה הראשונה. הכחול מכסה גוש של 2 על 2, והענברי שתי שורות. הפריטים a ו-b ממלאים את התאים שנשארו בעצמם: grid מציב כל פריט שהוא יכול בתא הפנוי הבא. grid-auto-rows: 60px קובע את הגובה של שורות שלא הצהרתם עליהן עם grid-template-rows.

grid-template-areas: לתת שמות לחלקי הפריסה

לפריסת דף, תנו שמות לאזורים וציירו אותם כטקסט. כל מחרוזת היא שורה, כל מילה היא תא, ופריט מצטרף לאזור עם grid-area:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

הכותרת העליונה והכותרת התחתונה מתפרסות על שתי העמודות, כי השמות שלהן ממלאים את שני התאים בשורות שלהן. השורה האמצעית היא 1fr, ולכן היא מקבלת את כל הגובה שנשאר מתוך 280px. כדי לערום הכול בטלפון, media query צריכה רק לצייר מחדש את האזורים כעמודה אחת: grid-template-areas: "header" "side" "main" "footer" עם grid-template-columns: 1fr. הדף על media queries מראה את התבנית.

יישור בתוך התאים

כברירת מחדל, פריטי grid נמתחים וממלאים את התא שלהם. המאפיינים האלה מזיזים אותם בתוכו:

מאפיין	על	מזיז
`justify-items`	המיכל	כל פריט לאורך השורה (הציר ה-inline)
`align-items`	המיכל	כל פריט למעלה ולמטה (הציר ה-block)
`place-items`	המיכל	קיצור: `place-items: center` ממרכז בשני הצירים
`justify-self` / `align-self`	הפריט	פריט אחד
`justify-content` / `align-content`	המיכל	את כל מערך המסילות, כשה-grid קטן מהמיכל

display: grid; place-items: center; היא הדרך הקצרה ביותר למרכז ילד אחד בתוך קופסה.

grid או flexbox

grid הוא דו-ממדי: אתם קובעים את העמודות (ואת השורות), והתוכן ממלא אותן, כך שלכל כרטיס בגלריה אותו רוחב גם בשורה האחרונה. flexbox הוא חד-ממדי: הפריטים קובעים את הגודל שלהם לפי התוכן לאורך קו אחד. הם משתלבים היטב: grid לדף ולגלריית הכרטיסים, flexbox בתוך כל כרטיס לשורת הכותרת שלו. הדף על flexbox מכסה את החצי השני.

סדר ונגישות

grid-template-areas, grid-row, grid-column ו-order יכולים למקם פריט בכל מקום, אבל קוראי מסך ומקש Tab עדיין עוקבים אחרי סדר ה-HTML. שמרו על סדר קוד מקור בעל משמעות (כותרת עליונה, ניווט, תוכן ראשי, כותרת תחתונה) והשתמשו ב-grid כדי לסדר אותו, לא כדי לתקן סדר HTML שאין בו היגיון.

טעויות נפוצות

לשים display: grid על הפריטים. זה שייך להורה; רק ילדים ישירים הם פריטי grid.
שימוש באחוזים עם רווחים. grid-template-columns: 50% 50% ועוד gap: 16px גולש ב-16px. השתמשו ב-1fr 1fr.
auto-fill כשהתכוונתם ל-auto-fit. כשיש מעט פריטים, auto-fill משאיר עמודות ריקות. עברו ל-auto-fit כדי למתוח את הפריטים.
עמודת 1fr שגדלה מעבר לחלק שלה. עמודת 1fr לא תתכווץ מתחת לתוכן הארוך ביותר שלה (כתובת URL ארוכה, תמונה רחבה). השתמשו ב-minmax(0, 1fr) כדי לאפשר לה להתכווץ.
מחרוזות אזורים שאינן מלבנים. כל אזור עם שם חייב ליצור מלבן, וכל מחרוזת שורה צריכה אותו מספר תאים, אחרת כל ההצהרה grid-template-areas נזנחת.
לשכוח שמספרי הקווים מתחילים ב-1. לשלוש עמודות יש ארבעה קווים: 1 / 4 או 1 / -1 מתפרס על שלושתן.

שאלות נפוצות

מה זה CSS grid?

מערכת פריסה שממקמת אלמנטים בשורות ובעמודות באותו זמן. מגדירים display: grid על מיכל, מתארים את העמודות שלו עם grid-template-columns (ואם רוצים גם את השורות), והילדים הישירים שלו ממלאים את התאים לפי הסדר.

מה המשמעות של 1fr ב-CSS grid?

fr הוא חלק מהמקום הפנוי במיכל ה-grid. grid-template-columns: 1fr 1fr 1fr נותן שלוש עמודות שוות, ו-1fr 2fr הופך את העמודה השנייה לרחבה פי שניים מהראשונה. קודם מורידים את הגדלים הקבועים ואת הרווחים; עמודות ה-fr מתחלקות במה שנשאר.

מה ההבדל בין auto-fill ל-auto-fit?

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

איך גורמים לפריט grid להתפרס על שתי עמודות?

השתמשו ב-grid-column: span 2 על הפריט, או תנו לו קו התחלה וקו סיום: grid-column: 1 / 3 מכסה את עמודות 1 ו-2. grid-column: 1 / -1 מתפרס על כל הרוחב, כי -1 הוא הקו האחרון.

מתי להשתמש ב-grid ולא ב-flexbox?

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

האם grid-gap זהה ל-gap?

כן. grid-gap, grid-row-gap ו-grid-column-gap הם השמות הישנים. הדפדפנים עדיין מקבלים אותם ככינויים, אבל כתבו gap, row-gap ו-column-gap, שעובדים גם ב-flexbox.

מושגים קשורים