מדריך CSS Grid Layout

מדריך מקיף ומפורט על CSS Grid Layout, אחד הנושאים החמים והחשובים ב-CSS כיום.

הקדמה…

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

אז מה ההבדל בין Grid Layout לבין Flexbox?

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

תמיכה

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

קדימה, קוד…

הגדרת דיב עוטף והצהרה על שימוש ב-grid

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

.container {
	display: grid;
}

עמודות – columns

נתחיל עם דוגמה די פשוטה, יצירת 3 דיבים זה לצד זה:

HTML:

<div class="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

CSS:

.container {
    width:600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 200px 200px;
}
.container > div {
    border: 1px solid #000;
}

והתוצאה:

ניתן לראות 3 דיבים זה לצד זה באורך שווה – 200px כל אחד.
מלבד ההגדרה של container כ-display:grid, הגדרתי שימוש גם במאפיין grid-template-columns הקובע את החלוקה של העמודות בין האלמנטים.
אגב, ניתן (ואף רצוי במקרה זה) להשתמש גם באחוזים:

.container {
    width:600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
}

אני בטוח שאתם סומכים עליי שהתוצאה זהה גם מבלי שאעלה "הוכחה" 🙂

אפשרות מדליקה נוספת זה השימוש ביחידת המידה fr (מהמילה "fraction"):

.container {
    width:600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr.
}

והתוצאה, 3 דיבים כאשר הדיב האמצעי כפול בגודלו מהדיב השמאלי והימני:

שורות – rows

CSS Grid Layout מאפשר לנו להגדיר גם את השורות שבתוך הדיב העוטף שלנו:

HTML:

<div class="container">
    <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>

CSS:

.container {
    width:600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 30px 60px;
}
.container > div {
    border: 1px solid #000;
}

ומה שנקבל הוא שהשורה הראשונה תהיה בגובה 50px, השנייה 30px והשלישית 60px:

הגדרת גובה מינימלי

במידה ונרצה להגדיר גובה מינימלי לשורות, נוכל לעשות זאת באמצעות הסרת המאפיין grid-template-rows ושימוש במאפיין grid-auto-rows:

.container {
    width:600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-auto-rows: minmax(250px auto);
}

מבחינת HTML, הוספתי תוכן דמה לדיב מספר 2 לצורך הדוגמה.
זוהי התוצאה:

ריווח

באפשרותנו להגדיר ריווח בין השורות והעמודות.

עמודות:

grid-column-gap: 20px;

שורות:

grid-row-gap: 20px;

ובמידה והריווח זהה בין העמודות והשורות, ניתן להשתמש במאפיין המאחד:

grid-gap: 20px;

כך זה נראה:

start & end

משהו נחמד ושימושי שכדאי מאוד להכיר – היכולת להגדיר התחלה וסוף של כל תא בעמודה או בשורה.
לצורך הדוגמה, ניקח 2 תאים המחולקים ל-3 עמודות ו-3 שורות:

HTML:

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
</div>

CSS:

.container {
    width:300px;
    margin: 100px auto;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}
.container > div {
    border: 1px solid #000;
}

כך זה נראה:

על מנת להבין את העיקרון של start ו-end, חשוב להבין שבדוגמה הנ"ל יש לנו 4 קווים לאורך (של העמודות) ו-4 קווים לרוחב (של השורות).

עמודות

על מנת להגדיר התחלה וסוף של תא מסויים ברמת העמודה, נוסיף 2 הגדרות, grid-column-start ו- grid-column-end, בדוגמה הבאה עשיתי זאת לתא עם ה-class בשם item1:

.container > div.item1 {
    border: 2px solid red;
    grid-column-start: 1;
    grid-column-end: 3;
}

וכך זה נראה:

אפשר לראות שהתא התחיל מהקו הראשון והגיע עד לקו השלישי.

שורות

את ההגדרות ברמת השורה הוספתי לתא עם ה-class בשם item3:

.container > div.item3 {
    border: 2px solid blue;
    grid-row-start: 2;
    grid-row-end: 4;
}

בדוגמה הנ"ל הגדרתי שהתא יתחיל מקו מספר 2 ועד לקו מספר 4 ברמת השורה, כך זה נראה:

סיכום

אין ספק ש-CSS Grid Layout הוא חידוש מרענן שכדאי מאוד להכיר, הוא קליל, נוח ללמידה ופשוט כיף להשתמש בו.
בהצלחה!

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

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)