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

CSS Grid – (כמעט) כל מה שרציתם לדעת – מדריך שימוש למתחילים ומתקדמים.

נתחיל ונאמר כי  CSS Grid הוא מודול המאפשר ליצור עימוד (Layout) המבוסס רשת (Grid) על ידי שימוש בעמודות ושורות. ניתן לומר, שעד לא מזמן העימוד ב HTML נבנה באמצעות Tables, Floats ועוד תכונות כאלה ואחרות ב CSS שלא התאימו ליצירת עמודים או מבנה מורכב.

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

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

מהו בעצם CSS Grid?

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

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

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

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

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

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

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

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

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


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

ההבדל בין 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.

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

שני המרכיבים העיקריים של CSS Grid הינם המעטפת (wrapper) שהוא בעצם אלמנט האב, והאלמנטים בתוך אותה מעטפת  (child elements). המעטפת היא ה Grid והאלמנטים הם התוכן בתוך אותו Grid.

הנה ה Markup עבור מעטפת עם שישה אלמנטים בתוכה:

<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;
}

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

1
2
3
4
5
6

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

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

1
2
3
4
5
6

בכדי לוודא כי הבנתם את הקשר בין הערכים לבין נראות ה 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) על ידי ה Markup הבא:

<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;
}

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

1
2
3
4
5
6

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

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

קווי גריד- CSS Grid

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

מעבר לכך, קיימות גם התכונות 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 עוד לא מעט תכונות שלא נגענו בהן עדיין ואלו מדהימות לא פחות. בואו ניתן מבט על כמה מאותן תכונות…


התכונה Grid-Area

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

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

השימוש ב 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 שהזכרנו קודם לכן.

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


התכונה Grid Gap

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

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

.wrapper {
    display: grid;
    grid-gap: 4px 2px;
}

יחידת ה 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

יישור אלמנטים ב Grid

האלמנטים ב Grid יכולים להיות מיושרים ביחס ל Container של ה Grid בציר האופקי (עמודות) ובציר האנכי (שורות) וזאת על ידי שימוש ב Box Alignment Module של CSS.

align-content יבצע יישור של האלמנטים בציר השורות ו justify-content יבצע יישור בציר העמודות. בואו נראה דוגמאות – נאמר וקיים לנו Grid עם ה CSS הבא:

justify-content: start

.wrapper {
    display: grid;
    width: 100%;
    height: 300px;
    grid-template-columns: repeat(4, 45px);
    grid-template-rows: repeat(4, 45px);
    grid-gap: 0.5em;
    border: 2px solid #424242;
    justify-content: start; 
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

* שימו לב לתכונה justify-content: start, זוהי התכונה הדיפולטיבית.

justify-content: end

.wrapper {
   justify-content: end;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

justify-content: center

.wrapper {
    justify-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

justify-content: space-around

.wrapper {
   justify-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

justify-content: space-between

.wrapper {
    justify-content: space-between;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

justify-content: space-evenly

.wrapper {
    justify-content: space-evenly;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content: start

.wrapper {
    align-content: start;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

* שימו לב לתכונה align-content: start, זוהי התכונה הדיפולטיבית.

align-content: end

.wrapper {
    align-content: end;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content: center

.wrapper {
     align-content: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content: space-around

.wrapper {
    align-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content: space-between

.wrapper {
    align-content: space-between;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content: space-evenly

.wrapper {
    align-content: space-evenly;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ניצור מבנה של אתר באמצעות 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 כלשהו. אתם יכולים לתת שמות לאלמנטים באמצעות התכונה 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 וזה בהחלט היה רק קצה הקרחון. אני יכול לומר כי ככל שאני חוקר את הנושא אני נדהם כל פעם מחדש מהאפשרויות וכמות התכונות שקיימות עבור CSS Grid. האם יצא לכם לבנות אתרים או ממשקי משתמש באמצעות CSS Grid? אם לא, זה הזמן להתחיל – ככל שנאמץ מהר יותר מודול זה חיינו יהיו קלים יותר.

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

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

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

10תגובות...

השאירו תגובה

פעימות