Search

המדריך המלא לשימוש ב CSS Grid

CSS Grid הוא מודול המאפשר ליצור עימוד (layout) המבוסס רשת (grid) תוך שימוש בעמודות ושורות. עד לא מזמן, העימוד ב HTML נבנה בעזרת floats, tables ועוד תכונות CSS כאלו ואחרות שבהחלט לא התאימו ליצירת עמודים או מבנה מורכב.

ואז הגיחה Flexbox לעולם – סוג של מערכת שנבנתה במיוחד בכדי ליצור עמודים ריספונסיבים ורובסטים. Flexbox מאפשרת לנו ליישר אלמנטים וליצור עימוד או גריד חד מימדי בצורה פשוטה ומהירה, וכרגע זוהי מערכת ה CSS המועדפת עבור רוב המפתחים.

אך ישנו בחור יחסית חדש בשכונה ושמו CSS Grid כפי שציינו, והוא הולך לשנות לכם מהקצה אל הקצה את הדרך בה אתם מייצרים עימודים, מבנה של עמודי אינטרנט, אפליקציות וממשקי משתמש. בואו נסביר מיהו הבחור וכיצד לנצל אותו לטובתכם.

ייתכו ותרצו לגשת היישר לחלק המתאר כיצד ליצור את הגריד הראשון שלכם ב CSS.

מהו בעצם CSS Grid?

מה זה CSS Grid?

CSS Grid (ולפעמים נאמר פשוט Grid בשביל הנוחות) הוא מערכת דו מימדית המאפשרת יצירת עימוד מבוסס Grid. המטרה לשמה נוצר היא להקל עלינו ליצור Layouts וממשקי משתמש מורכבים, עם כמה שפחות סרבול בקוד.

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

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

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

אגב CSS תמיד היה שם בשבילנו עבור עימוד ומתווה, אך מעולם לא עשה עבודה טובה בהקשר. בתחילה השתמשנו בטבלאות, ואז ב Floats ואז ב Inline Blocking וכדומה, אך כל המתודות האלו היו סוג של אילתורים ולא כללו פונקציונליות מאד חשובה, לדוגמה יישור אנכי של אלמנטים, או פריסה אוטומטית של אלמנטים ב Container מסויים.

Flexbox מאד עזרה לנו במקרים אלו, אך זו נועדה ומתאימה יותר עבור עימוד חד מימדי, כלומר שורה או עמודה בלבד, ופחות עבור עימוד ומתווה דו מימדי המורכב מעמודות ושורות יחד.

תכף נסביר את הכוונה אז השארו איתנו, לבינתיים בואו נסכם כי Grid הוא מודול ה CSS הראשון שנוצר בכדי לפתור ספציפית את ענייני העימוד שכולנו אילתרנו עד לא מזמן כשפיתחנו אתרים…

טרמינולוגיה – CSS Grid

חשוב להבין את הטרמינולוגיה בה נשתמש לפני שנצלול ונבין את הקונספט של CSS גריד. זאת מכיוון והמשמעות של אותם מונחים אינה שונה כל-כך ויהיה זה מבלבל אם לא תכירו מונחים אלו.

1. Grid Container

ב CSS Grid, המונח Grid Container הוא אותו אלמנט אב המכיל את מתווה (layout) הגריד. הוא מוגדר באמצעות התכונה display: grid או התכונה display: inline-grid על אותו קונטיינר.

החלק הלבן הוא ה Grid Container.

ברגע שאלמנט מסויים מוגדר כ Grid Container תוכלו להשתמש במגוון תכונות בכדי לשלוט במתווה הגריד. שימו לב שבדומה להתנהגות של Flexbox, גם CSS Grid יתנהג הפוך בהתאם לכיווניות העמוד.

מכיוון ופוסט זה כתוב מימין לשמאל אז הגריד ייראה כבדוגמה מעלה. אך אם הפוסט היה באנגלית (LTR) אז אותה דוגמה תראה כך:

2. Grid Line

זהו בעצם קו שמחלק את הגריד לשורות ועמודות. קווי הגריד ממוספרים מ 1 עד X, כש X הוא מספר השורות או העמודות בגריד עצמו.

אותו Grid Line מסומן בכחול.

3. Grid Item

Grid Items הם הילדים הישירים של אותו Grid Container. במילים אחרות אלו האלמנטים  שקיימים בתוך ה Grid Container. ניתן למתוח Grid Items על פני מספר Grid Cells אם יש צורך (הסעיף הבא).

מסומנים בירוק.

Grid Item
Grid Item
Grid Item
Grid Item

4. Grid Cell

Grid Cell הוא היחידה הקטנה ביותר בגריד וניתן להשתמש בה בכדי למקם את ה Grid Items. ניתן להתייחס אליו כאל תא שמוגדר על ידי ההצטלבות של שורה ועמודה בגריד, כך שאם יש לכם גריד של 3 שורות ו 3 עמודות, יהיו לכם תשעה Grid Cells סכ״ה.

מסומן בכחול. Grid Cell הוא לא אלמנט HTML או קלאס מסויים שאתם מגדירים אלא שטח קונספטואלי בו אתם יכולים להכניס Grid Items.

5. Grid Track

זהו השטח בין שני קווי גריד סמוכים. ניתן לקבוע את הגודל של אותם Grid Tracks באמצעות התכונות grid-template-columns ו grid-template-rows עליהן עוד נדבר בהמשך.

  • לשטח בין שני קווי Grid סמוכים בציר ה X מתייחסים כ row tracks.
  • לשטח בין שני קווי Grid סמוכים בציר ה Y מתייחסים כ column tracks.

מסומן בכחול.

6. Grid Area

Grid Area הוא שטח בגריד שיכול להכיל Grid Cell יחיד או יותר. ניתן להגדיר Grid Areas באמצעות התכונה grid-template-areas.

מסומן בכחול.

לאחר שהבנו את הטרמינולוגיה ואת המונחים הקשורים CSS Gridֿ אנו יכולים לעבור לחלק המעניין יותר ונתחיל בהסבר כיצד ליצור את ה Grid הראשון שלנו.

יצירת ה Grid הראשון שלכם

שני המרכיבים העיקריים של CSS Grid הינם ה Grid Container שהוא בעצם אלמנט האב, וה Grid Items, שאלו בעצם האלמנטים בתוך הקונטיינר.

הנה ה Markup עבור Grid Container עם שישה אלמנטים (Grid Items) בתוכו:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

בכדי להפוך את הקונטיינר ל Grid – נוסיף לו פשוט את התכונה display : grid:

.wrapper {
    display: grid;
}

התוצאה תהיה כבדוגמה הבאה:

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

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

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


יצירת עמודות ושורות ב Grid

בכדי לגרום ל Grid שיצרנו להיות דו מימדי, עלינו להגדיר עמודות ושורות. בואו ניצור שלוש עמודות ושתי שורות. נשתמש בתכונה grid-template-rows ובתכונה grid-template-columns בכדי לעשות זאת כבדוגמה הבאה:

.wrapper {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 60px 60px;
}

מכיוון וכתבנו שלושה ערכים עבור grid-template-columns, נקבל שלוש עמודות. באותו אופן, מאחר וכתבנו שני ערכים עבור grid-template-rows נקבל שתי שורות. הערכים עצמם מתארים באיזה רוחב אנו מעוניינים שכל עמודה תהיה (33% במקרה זה) ובאיזה גובה אנו רוצים שכל שורה תהיה (60px).

זה ייראה משהו בסגנון הבא:

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

עליכם להתייחס לכל אחד מהאלמנטים כ Grid Items וזאת כמובן כאשר יש גם את ה Grid Container המכיל את אותם אלמנטים.

בכדי לוודא כי הבנתם את הקשר בין הערכים לבין נראות ה Grid, תנו מבט בדוגמה הבאה ונסו להבין את הקשר בין הקוד למבנה של ה Grid:

.wrapper {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 80px 40px;
}

התוצאה תהיה בסגנון הבא:

1
2
3
4
5
6

נוסיף ונאמר כי אין זה חובה להשתמש באחוזים, ניתן להשתמש ביחידות אבסולוטיות, ביחידות Viewport ואף בפונקציה calc וכדומה.

מעבר לכך, ניתן ואף מומלץ להשתמש ביחידה חדשה הנקראית Fractional Unit שחוסכת המון כאב ראש, עליה נדבר בהמשך ונסביר מדוע עדיפה על השימוש באחוזים…


מיקום האלמנטים ב Grid

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

אז בואו ניתן עוד דוגמה וניצור Grid בעל שלוש שורות ושלוש עמודות (3X3):

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

נוסיף את ה CSS הבא:

.wrapper {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 60px 60px 60px;
}

התוצאה תהיה משהו בסגנון הזה ואני מאמין שברור לכם מדוע (אם לא קראו שוב את ההסברים הקודמים):

1
2
3
4
5
6

שימו לב כי אנו רואים Grid של שתי שורות בלבד (3X2) למרות שהגדרנו כי יהיה בעל שלוש שורות (3X3). הסיבה לכך היא שישנם רק שישה אלמנטים הממלאים את ה Grid. לו היינו מוסיפים שלושה אלמנטים נוספים ל Markup (או פחות) הם היו ממלאים את השורה השלישית….

בכדי לשנות מיקום של אלמנט ואף לשנות את גודלו נטרגט את אותו אלמנט ספציפי ונשתמש בתכונות הבאות – grid-column-start ו grid-column-end.

לצורך הדוגמה נוסיף את ה CSS הבא:

.wrapper > div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 4;
}

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

1
2
3
4
5
6

אך אני מניח שאתם מעט מבולבלים… מדוע אנו מדברים על Grid Line הרביעי כאשר יש לנו רק שלוש עמודות? תנו מבט בתמונה הבאה המתארת את ה Grid Lines ותבינו מדוע…

הקונספט של קווי ה Grid רלוונטי גם עבור עמודות וגם עבור שורות כמובן.

Grid Lines CSS

אוקיי… אז מעבר לכך קיימות גם התכונות grid-row-start ו grid-row-end והשימוש באלו מתבצע באותה צורה. אז בכדי לוודא שהבנתם את הקונספט מאחורי קווי Grid כראוי, בואו נשחק מעט עם האלמנטים של ה Grid שיצרנו, תנו מבט ב CSS הבא:

.wrapper > div:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
}

.wrapper > div:nth-child(3) {
    grid-row-start: 2;
    grid-row-end: 4;
}

.wrapper > div:nth-child(4) {
    grid-column-start: 2;
    grid-column-end: 4;
}

הנה התוצאה של קוד זה. עצרו וחשבו רגע מדוע ה Grid נראה בצורה הזו, זה באמת לא כזה מסובך…

1
2
3
4
5
6

נוסיף ונאמר כי ישנה אף דרך יותר קצרה לכתוב את הדוגמה האחרונה באמצעות שימוש בתכונה grid-column ו grid-row:

.wrapper > div:nth-child(1) {
    grid-column: 1 / 3;
}

.wrapper > div:nth-child(3) {
    grid-row: 2 / 4;
}

.wrapper > div:nth-child(4) {
    grid-column: 2 / 4;
}

כמו כן, נוכל להגיע לאותה תוצאה באמצעות השימוש ב span כאשר לאחריו מספר העמודות או השורות עליהן האלמנט יימתח:

.wrapper > div:nth-child(1) {
    grid-column: 1 / span 2;
}

.wrapper > div:nth-child(3) {
    grid-row: 2 / span 2;
}

.wrapper > div:nth-child(4) {
    grid-column: 2 / span 2;
}

ל CSS Grid עוד לא מעט תכונות שלא נגענו בהן עדיין ואלו מדהימות לא פחות. בואו ניתן מבט על כמה מאותן תכונות…


איך להשתמש בתכונות של CSS Grid ליישור אלמנטים

במתווה של CSS Grid ניתן למקם את הגריד עצמו ביחס לקונטיינר כמו גם את ה Grid Items עצמם באמצעות ששת התכונות הבאות:

  • justify-items
  • align-items
  • justify-content
  • align-content
  • justify-self
  • align-self

תכונות אלו הם חלק מה Box Alignment Module של CSS ומגדירות את האופן בו אנו יכולים למקם אלמנטים עם CSS Grid וגם עם Flexbox.

מרבית התכונות שציינו מעלה משפיעות על ה Grid Container, אך חלקם מתייחסות ל Grid Items עצמם ולמצבים בהם אתם מעוניינים להגדיר ערכים מסויימים וליישם אלו רק על Grid Items ספציפיים.

שלב א׳: יישום תכונות על ה Grid Container

לצורך ההסבר והדוגמאות קחו בחשבון את הקונטיינר הבא המכיל 6 אלמנטים בתוכו:

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

נוסיף את חוקי ה CSS הבאים:

.my-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(114, 186, 94, 0.05);
  border: 2px dashed rgba(114, 186, 94, 0.35);
}

.item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: rgba(255, 213, 70, 0.4);
  border: 2px dashed rgba(236, 198, 48, 0.5);
}

קוד זה ייצר מתווה Grid עם שלוש עמודות שכל אחת מהם ברוחב של 100px. כל אחד מה Grid Items יהיה ברוחב 50px וגובה של 50px. זה נראה כך:

1
2
3
4
5
6

שימו לב שה Grid Items במקרה זה אינם ממלאים ה Grid Cell אלא תופסים רק 50x50px כפי שהגדרנו. התמונה הבאה תעזור לכם להבין את כוונתי:

Grid Justification & Alignment

על מקרה, בנקודה זו לא הגדרנו שום תכונת justification ושום alignment. כברירת מחדל, ה Grid Items יתחילו בנקודה הימנית העליונה.

העמודים המוגדרים כ LTR הם יתחילו בנקודה השמאלית העליונה כמובן

התכונה justify-items

התכונה justify-items משמשת ליישור ה Grid Items על ציר השורות (ציר ה X). הערכים הניתנים לשימוש הם start, end, center & stretch.

הנה אותה דוגמה כמקודם עם התכונה ב justify-items: center:

.my-container {
  /* ... */
  justify-items: end;
}
1
2
3
4
5
6

שימו לב שה Grid Items במקרה זה מיושרים למרכז העמודה (כלומר למרכז ה Grid Cell בציר האופקי).

כך נראית אותה דוגמה עם התכונה justify-items: end:

1
2
3
4
5
6

התכונה align-items

התכונה align-items משמשת ליישור אלמנטים בציר העמודות (ציר ה Y). הנה דוגמה לשימוש בתכונה align-items: center:

1
2
3
4
5
6

ה Grid Items במקרה זה מיושרים ורטיקלית למרכז העמודות (למרכז ה Grid Cell בציר האנכי).

הנה אותה דוגמה עם התכונה align-items: end:

.my-container {
  /* ... */
  align-items: end;
}
1
2
3
4
5
6

התכונה justify-content

כשהגריד כולו קטן יותר מהשטח של ה Grid Container תוכלו להשתמש בתכונה justify-content בכדי ליישר את הגריד על ציר השורות ציר ה X). ניתן להשתמש עם תכונה זו בערכים המופיעים עבורכם ב DropDown:

1
2
3
4
5
6

ייתכן וקשה להבין בדוגמה זו, אולי הדוגמה הבאה תעזור לכם להבין טוב יותר:

1
2
3
4
5
6
7
8
9
10
11
12

התכונה align-content

1
2
3
4
5
6

לסיכום חלק זה: התכונות justify-items, align-items, justify-content & align-content הן ארבע תכונות הרלוונטיות לגריד כולו.

שלב ב׳: יישום תכונות על ה Grid Items

התכונות justify-self ו align-self הן מעין תכונות מקבילות לתכונות justify-items & align-items, אך אלו מיושמות ישירות על ה Grid Items בכדי למקם אותם האופן שונה משאר ה Grid Items.

התכונה justify-self

התכונה justify-self משמשת ליישור Grid Item על ציר השורות האופקי (ציר ה X). הנה דוגמה לשימוש בתכונה justify-self: end:

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="justify-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
1
2
3
4
5
6

האלמנט השלישי במקרה זה מיושר אופקית לקצה הרחוק של העמודה (לקצה של ה Grid Cell).

התכונה align-self

התכונה align-self משמשת ליישור Grid Item על ציר העמודות האנכי (ציר ה Y). הנה דוגמה לשימוש בתכונה align-self: end:

<div class="my-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="align-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
1
2
3
4
5
6

האלמנט השלישי במקרה זה מיושר ורטיקלית לתחתית העמודה.

שלב ג׳: שימוש במספר תכונות יחד

ייתכן והשילוב של התכונות שהזכרנו עד כה יחד יהיה הכרחי על מנת להגיע לגריד שאתם מחפשים. הנה דוגמה המשלבת מספר תכונות יחד:

.my-container {
  /* ... */
  justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;
  align-items: center;
}
1
2
3
4
5
6

קוד זה ייצר עבורנו שישה Grid Items המרווחים באופן שווה וממורכזים בקונטיינר.


התכונה grid-area

התכונה grid-area יכולה לשמש כתחליף מקוצר לתכונות הבאות:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

אם אתם רוצים לצלול עוד יותר אז כתבתי פוסט נפרד המדבר אך ורק על התכונה grid-area.

השימוש ב grid-area מתבצע בצורה הבא:

grid-area: <row-start> / <column-start> / <row-end> / <column-end>

בואו ניתן מבט בדוגמה הבאה ונקרא לה דוגמה מספר א׳. ניצור Grid חדש לצורך העניין המכיל 11 אלמנטים באמצעות ה Markup הבא:

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
</div>

בואו נקבע כי אלמנט מספר 5 יקבל את התכונה הבאה:

.wrapper {
    display: grid;
}
    .wrapper > div:nth-child(5) {
    grid-area: 1 / 2 / 5 / 7;
}

שימו לב שהגדרנו באמצעות שורת CSS אחת כי אלמנט מספר 5 יתחיל בשורה מספר 1 ובעמודה מספר 2. כמו כן הוא יסתיים בשורה מספר 5 ובעמודה מספר 7. התוצאה תהיה בסגנון הבא:

1
2
3
4
5
6
7
8
9
10
11

לא לשכוח – ההתחלה והסיום של השורות והעמודות של האלמנט המדובר מתייחסות לאותם Grid Lines שהזכרנו קודם לכן.

מגניב לא? בכל אופן, אם אתם תוהים כיצד ביצענו ריווח בין כל אלמנט התשובה נמצאית בתכונה grid-gap.


התכונה grid-gap

התכונה grid-gap קובעת את גודל הריווח בין העמודות והשורות ב Grid והיא בעצם קיצור של התכונות הבאות:

ניתן להשתמש בה בצורה הבאה ולא נסביר מעבר לכך מכיוון והיא מדברת בעד עצמה, רק נאמר שהערך הראשון הוא הריווח בין השורות והשני הוא הריווח בין העמודות של ה Grid.

.wrapper {
    display: grid;
    grid-gap: 30px 10px;
}

יחידת ה Fr – בשמה המלא Fractional unit

יחידת ה Fr מבטלת את הצורך להשתמש במתמטיקה ועובדת לפי המקום הפנוי שקיים ב Container. בואו נאמר שאנו לחלק את ה Grid שלנו לשלוש עמודות שוות. ניתן לעשות זאת בקלות באמצעות אחוזים – כל שעלינו לעשות הוא לרשום grid-template-columns: 33% 33% 33%.

אך מה אם היינו מעוניינים להשתמש בתכונה grid-dap : 10px?? מכיוון ויש לנו שני ריווחים (וזאת כי יש שלוש עמודות) אז רוחב ה Grid שלנו יהיה כעת 100%+20px וזה ייצור לנו גלילה אופקית שאינה רצויה או אלמנטים שיוצאים מן ה Container שלהם.

אנו יכולים להשתמש כמובן בפונקציה calc על מנת לפתור את הבעיה אך השימוש ביחידת ה fr פשוט הרבה יותר – grid-template-columns: 1fr 1fr 1fr. בואו נראה מספר דוגמאות לשימוש ביחידות ה fr.

זה ה Markup בו נשתמש:

<div class="wrapper">
    <div>1Fr</div>
    <div>1Fr</div>
    <div>1Fr</div>
    <div>1Fr</div>
    <div>1Fr</div>
    <div>1Fr</div>
</div>

זהו ה CSS:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: 80px; /* don't mind this property just yet */
}

התוצאה תהיה כבדוגמה הבאה:

1Fr
1Fr
1Fr
1Fr
1Fr
1Fr

התכונה grid-auto-rows היא עוד תכונה של CSS Grid ופשוט קובעת את הגובה המינימלי לכל השורות. באותה מידה grid-auto-columns קובעת את הגובה המינימלי של עמודות.

ניתן אגב לכתוב זאת בצורה מקוצרת באמצעות שימוש בפונקציה repeat המאפשרת קוד קריא יותר וקומפקטי:

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 80px;
}

כמו כן, אפשר לשלב בין סוגי היחידות – אם יש ברשותינו שני אלמנטים בעלי רוחב קבוע של 100px ואנו מעוניינים שהאלמנט השלישי יתפרס על הרוחב שנותר ניתן להשתמש ב CSS הבא:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    grid-auto-rows: 80px;
}

התוצאה תהיה כזו:

100px
100px
1Fr

חשוב לציין כי אינכם מוגבלים אך ורק לערכים שלמים כשאתם משתמשים ב fraction units – אתם יכולים גם לרשום משהו בסגנון הבא:

.wrapper {
    display: grid;
    grid-template-columns: 1.5fr 3fr 4.5fr;
    grid-auto-rows: 80px;
}

וזו תהיה התוצאה:

1.5fr
3fr
4.5fr

הנה עוד פוסט קצר שכתבתי בו הצגתי מספר דוגמאות לשימוש ביחידת המידה fr מ CSS Grid.


ניצור מבנה של אתר באמצעות CSS Grid

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

לצורך ההסבר ניצור מבנה בסיסי של אתר בעזרת CSS Grid ונשתמש ב Markup הבא:

<div class="wrapper">
    <header>header</header>
    <nav>nav</nav>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</div>

בואו נוסיף את ה CSS הבא:

.wrapper {
	display: grid;
	grid-template-areas:
    "header header header"
    "nav section aside"
    "footer footer footer";
	grid-template-rows: 80px 1fr 50px;
	grid-template-columns: 15% 1fr 15%;
	grid-gap: 4px;
    height: 360px;
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

section {
    grid-area: section;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

זוהי התוצאה:

header
section
footer

תעצרו רגע בבקשה – אתם קולטים את הטירוף? בתור התחלה שימו לב לכמות המועטה של שורות הקוד שנאלצנו לכתוב בכדי לייצר את המבנה הזה, סביר להניח שללא CSS Grid הקוד היה ארוך פי 5 לפחות. מעבר לכך שימו לב לתכונה grid-template-areas בה השתמשנו….

מידע רחב יותר על grid-template-areas בפוסט אחר שכתבתי, אך בינתיים השארו פה…

התכונה Grid Template Areas

התכונה grid-template-areas מגדירה איזורים בתוך Grid כלשהו. אתם יכולים לתת שמות לאלמנטים באמצעות התכונה grid-area ולאחר מכן להתייחס לאותם שמות בתכונהgrid-template-areas.

אם נתייחס לדוגמה האחרונה שהראינו – ניתן לראות כי ישנם שלושה איזורים:

  • "header header header"
  • "nav section aside"
  • "footer footer footer"

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

ניתן להבין כי ישנם שלוש עמודות סכ״ה כאשר ה header מתפרס על כל השורה הראשונה. האיזור בשורה השנייה לעומת זאת מתחלק לשלוש חלקים נפרדים (בהתאם לשמות) כאשר הרוחב של כל אחד מהם נקבע לפי התכונה grid-template-columns עליה הסברנו בתחילת המדריך. כמו כן ה footer מתפרס על כל השורה השלישית.

נאמר והיינו מעוניינים כי ה navigation יתפרס לכל הגובה – השינוי היחיד שאנו צריכים לבצע הינו ברמת ה CSS ורק בתכונה grid-template-areas כבדוגמה הבאה:

.wrapper {
	grid-template-areas:
    "nav header header"
    "nav section aside"
    "nav footer footer";
}

והתוצאה כפי שבטח הנחתם תהיה זו:

header
section
footer

מה לגבי רספונסיביות?

אם תשחקו עם גודל המסך תראו שהמבנה שלנו מתרחב ומתכווץ בהתאם לרוחב ה Container ללא צורך בהתערבות כלשהי. אך אם לצורך העניין נרצה לשנות את המבנה במובייל נוסיף פשוט את ה Media Query הבא כאשר השינוי היחידי אותו נבצע יהיה בתכונהgrid-template-areas :

@media (max-width: 768px) {
    .wrapper {
    grid-template-areas:
    "header header header"
    "nav nav nav"
    "section section section"
    "aside aside aside"
    "footer footer footer";
    grid-template-rows: 50px 30px 1fr 60px 30px;
    }
}

התוצאה כאשר רוחב המסך קטן מ 768px תהיה בסגנון הבא:

header
section
footer

עצם העובדה שהדבר היחידי שנאלצנו לשנות בכדי להגיע למצב זה הוא תכונה אחת ב CSS זה לא פחות מנפלא…. אגב בהרבה מצבים ניתן ליצור עימוד ריספונסיבי ללא שימוש ב Media Queries כלל וגם זה באמצעות CSS Grid. תנו מבט במדריך שכתבתי על הפונקציה minmax של CSS Grid.

ההבדל בין CSS Grid ל Flexbox

כפי שציינו בתחילת הפוסט, Flexbox נועד לעימוד חד מימדי ו Grid עבור עימוד דו מימדי. הכוונה היא שאם אתם מעמידים מספר אלמנטים בכיוון אחד, כלומר מספר אלמנטים בשורה או עמודה אחת, אז עליכם להשתמש, או בעצם נכון יותר להשתמש ב Flexbox.

Flexbox תאפשר לכם גמישות רבה יותר במקרה זה מאשר CSS Grid, היא תדרוש פחות קוד ותהיה אף קלה יותר לתחזוקה.

דוגמה לעימוד חד מימדי:

Element
Element
Element

לעומת זאת – אם אתם מתכוונים ליצור מבנה כלשהו בשני מימדים, כלומר גם עמודות וגם שורות, מומלץ ונכון כנראה יהיה להשתמש ב CSS Grid בכדי לבצע זאת.

דוגמה לעימוד דו מימדי:

header
section
footer

במקרה זה – CSS Grid תאפשר גמישות רבה יותר, תגרום לכך שה Markup יהיה קומפקטי יותר והקוד יהיה הרבה יותר פשוט לתחזוקה. כמובן שאתם יכולים לשלב בין השניים ואף רצוי. בדוגמה האחרונה, יהיה נכון ליצור Grid עבור העימוד או המבנה עצמו ולהשתמש ב Flexbox ליישור התוכן בתוך ה Header.

ניתן כמובן ואף רצוי לשלב בין השניים ולהנות משני העולמות, אנו נראה במהלך המדריך דוגמאות לכך… אז בואו נתחיל ונסביר את התכונות הקיימות ל CSS Grid וכיצד להשתמש בהן.

מספר מילים על תמיכת דפדפנים

כיום ניתן להשתמש ב CSS Grid בכל הדפדפנים המודרנים וכ 85% מכלל המשתמשים בעולם משתמשים באותם דפדפנים התומכים ב CSS Grid.  בכל מקרה – כאשר יש ספק לגבי תמיכה של תכונה כלשהי אני תמיד ממליץ לגשת ל caniuse.com בכדי לבדוק את תמיכת הדפדפנים בפונקציונליות כזו או אחרת.

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

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

לסיכום

ישנם כמובן עוד המון אפשרויות שלא נגענו בהם בהקשר של CSS Grid וזה בהחלט היה רק קצה הקרחון. אני יכול לומר כי ככל שאני חוקר את הנושא אני נדהם כל פעם מחדש מהאפשרויות וכמות התכונות שקיימות עבור CSS Grid. הנה אגב פוסט בהקשר המדגים את הכח של CSS Gris ומראה כיצד ניתן ליצור עימוד ריספונסיבי ללא שימוש ב Media Queries ובאמצעות הפונקציה minmax, תנו מבט בהזדמנות…

האם יצא לכם לבנות אתרים או ממשקי משתמש באמצעות CSS Grid? אם לא, זה הזמן להתחיל – ככל שנאמץ מהר יותר מודול זה חיינו יהיו קלים יותר.

אז אני מקווה שמדריך זה יעזור לכם להתחיל להשתמש ב CSS Grid, אני מבטיח גם לדאוג לעדכן אותו ולהוסיף תכונות ודוגמאות שלא דיברנו עליהן עדיין. אם אהבתם את הפוסט, כנראה ותאהבו גם את הפוסט על CSS Variables, בהחלט משהו שתרצו ללמוד גם כן. אז כמו תמיד, אם ישנן השגות, שאלות או רעיונות לגבי הנאמר אשמח אם תשתפו אותנו בתגובות… 🙂

רועי יוסף
רועי יוסף

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

43 תגובות...
  • משה 12 יולי 2018, 17:15

    מושקע מאד, כל הכבוד על הארגון והירידה לפרטים. לגבי תאימות דפדפנים, האם יש אפשרות לפצות על כך איכשהו באיזו ספריית ג'אווה סקריפט?
    ואגב, מתודה כותבים עם ת', ככל הידוע לי מהאקדמיה ללשון.

    • רועי יוסף 12 יולי 2018, 17:38

      היי משה, תודה על התיקון… עד כמה שידוע לי ה Fallback הנכון הוא באמצעות Flexbox. לא מכיר ספריית JS שעושה את העבודה, אם תמצא תעדכן.. 🙂

    • רוני שרר 1 אוגוסט 2018, 9:58

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

      כל הכבוד.

  • טל שקורי 13 יולי 2018, 11:53

    אלוף! איזו השקעה! תודה רבה

  • לאה 17 יולי 2018, 15:38

    איזה פוסט מעולה!
    נתקלתי בלא מעט פוסטים על גריד וכולם היו באנגלית, ואף על פי שאני שולטת באנגלית, בכל זאת הפוסט שלך הרבה יותר זרם לי מהם, וקראתי אותו ככה, כמעט עד הסוף, למרות שאין לי שום גריד לעצב בזמן הקרוב – פשוט כי הוא כתוב בשפה קולחת וברורה. כל הכבוד!

  • ינון אלבז 10 אוקטובר 2018, 22:23

    מדהים!!!! השתמשתי בו עכשיו לאפליקציית מובייל שאני מפתח, לא יודע מה הייתי עושה בלי המדריך שלך..

  • Einav 11 אוקטובר 2018, 7:47

    היי, מאמר מעולה!
    כיצד ניתן לבנות menu שהוא positin fixed כאשר משתמשים בgrid?

  • חני 9 דצמבר 2018, 23:10

    מדריך מעולה!!!! תודה! אני עומדת לעמד משהו עם Grid…

  • חתול 28 ינואר 2019, 0:07

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

  • גיל 7 ינואר 2020, 10:58

    פוסט מצויין עם הסברים ברורים,

    למרות שכתבת את ההבדלים בין GRID ל FLEXBOX, השאלה אם יש טעם בכלל לחזור לעבוד על FLEXBOX ושאר האלמנטים ב-CSS כדי לעמד וליישר, לפי הפוסט ה CSS GRID מטפל בכל נושא העימוד. כמו כן, איזה עוד תכונות של ה-GRID כדאי ללמוד שמשתמשים בהן הרבה?

    • רועי יוסף 8 ינואר 2020, 1:42

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

  • תמר 22 אפריל 2020, 10:55

    תודה רבה! הפוסט כתוב באופן ברור ומענין!!

  • שולי 1 יולי 2020, 15:50

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

    • רועי יוסף 1 יולי 2020, 16:14

      תענוג לשמוע שולי 🙂 ברוכה הבאה לעולם!

  • שרה 1 ספטמבר 2020, 23:32

    עוזר לעמד בקלי קלות.
    הסבר ברור מאד.

  • אבי זייבלד 6 ינואר 2021, 20:33

    מדהיםםםםםםםםםםם. גם הגריד וכל תכונותיו, וגם המאמר שלך, הכשרון, ובעיקר הלב, כך נראה הסבר מכל הלב.
    עלה והצלח,
    אבי

  • מתכנתת אחת 19 ינואר 2021, 23:51

    תודה!!!!!! הפוסט מהמם, קולע בול למה שצריך………..
    עזר לנו מאדדדדדדדדדדד

    • רועי יוסף 11 פברואר 2021, 10:18

      שמח שעזרתי 🙂

  • מתכנתת שניה 19 ינואר 2021, 23:53

    גם אני מצטרפת!
    רוב תודות!

    • רועי יוסף 11 פברואר 2021, 10:18

      בשמחה 🙂

  • דורי 11 מאי 2021, 8:24

    הסבר מפורט ומעולה.
    המלצה – תוסיף דוגמה איך משתמשים תכלס כמו בדוגמה הבאה

  • אילה 19 יוני 2021, 23:59

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

  • יוסי 10 פברואר 2022, 20:22

    תודה רבה. מאמר נפלא. עזר לי מאוד

  • בת חן 14 פברואר 2022, 19:45

    גם אני בדיוק ככה
    קראתי אותו סתם
    פשוט כיף לקרוא
    מובן בהיר וברור!!

  • ברכה 4 מאי 2022, 19:27

    וואו פעם ראשונה שאני קוראת מדריך שמוסבר בצורה כל כך ברורה!!
    גם בעברית, גם ברור וגם תכלס נושא סופר חשוב(;
    רצה ליישם ולקרוא עוד מאמרים….
    תודה!!!

    • רועי יוסף 4 מאי 2022, 19:46

      תודה ברכה! כיף לשמוע 😊

  • מיכל 17 יולי 2022, 15:55

    היה פשוט כיף ללמוד את הנושא!!
    הכל כתוב בצורה כ"כ ברורה ומעניינת.
    עוזר לעמד בקלות.
    תודה רבה!!

    • רועי יוסף 17 יולי 2022, 16:57

      שמח לשמוע מיכל 🙂 ספרי לחברים וחזרי לבקר!

  • שרה אברמוביץ 1 ינואר 2023, 17:37

    מאמר מעולה!
    רציתי לדעת איך ממקמים אלמנטים בתוך הDIV שיתחילו בהתחלה/באמצע/בסוף

  • שני 10 ינואר 2023, 14:58

    היי רועי
    ואוו מאמר טוווב!!!
    יש מצב שאני מקבלת את כל החומר בקובץ?
    שאני הוריד לי למחשב?

    • רועי יוסף 10 ינואר 2023, 16:26

      היי שני 🙂

      אין לי דרך לשלוח לך את זה כקובץ (כי אין לי כזה), נסי להדפיס אולי…

  • ליארי 24 מאי 2023, 23:39

    ממש ממש תודה, באמת מושקע מאוד ויורד לפרטים, מסביר באופן מאוד ברור את כל עניין הגריד!
    רציתי רק לשאול, אני רוצה לגשת לתא בגריד שאני לא יודעת מה הערכים שלו, כך שצריך לגשת אליו בעזרת משתנים, איך אוכל לעשות זאת?

תגובה חדשה

ניווט מהיר

Up!
לבלוג