אמ;לק
אם אתם מכירים את Flexbox, תבנית Grid אמורה להיות מוכרת לכם. Rachel Andrew מנהלת אתר מעולה שמקדיש ל-CSS Grid, שיכול לעזור לכם להתחיל. התכונה 'תצוגת רשת' זמינה עכשיו ב-Google Chrome.
Flexbox? רשת?
בשנים האחרונות, השימוש ב-CSS Flexbox הלך וגדל, והתמיכה בדפדפנים נראית טובה מאוד (אלא אם אתם אחד מהאנשים האומללים שצריכים לתמוך ב-IE9 ובגרסאות ישנות יותר). Flexbox הפך משימות מורכבות רבות של פריסה לפשוטות יותר, כמו שמירה על מרחק שווה בין רכיבים, פריסות מלמעלה למטה או אבן הקודש של הקסם ב-CSS: מרכוז אנכי.
אבל לצערנו, למסכים יש בדרך כלל מימד שני שצריך לדאוג לגביו. לצערנו, אי אפשר ליצור גם קצב אנכי וגם קצב אופקי באמצעות flexbox בלבד, אלא אם תגדירו את הגודל של הרכיבים בעצמכם. כאן נכנס לתמונה CSS Grid.
CSS Grid היה בפיתוח, מאחורי דגל ברוב הדפדפנים, במשך יותר מ-5 שנים. הושקע זמן נוסף בתאימות הדדית כדי למנוע השקה עם באגים כמו זו של Flexbox. לכן, אם משתמשים ב-Grid כדי להטמיע את הפריסה ב-Chrome, סביר להניח שתקבלו את אותה תוצאה ב-Firefox וב-Safari. נכון למועד כתיבת המאמר, ההטמעה של Microsoft Edge של Grid לא מעודכנת (היא זהה להטמעה שכבר הייתה ב-IE11), והעדכון בבדיקה.
למרות הדמיון בקונספט ובתחביר, אל תתייחסו ל-Flexbox ול-Grid בתור שיטות מתחרות של פריסה. ב-Grid הפריטים מסודרים בשני מאפיינים, וב-Flexbox הם מסודרים במאפיין אחד. כשמשתמשים בשניהם יחד, יש סינרגיה.
הגדרת רשת
כדי להכיר את המאפיינים השונים של Grid, מומלץ מאוד לקרוא את המאמר Grid By Example של Rachel Andrew או את הסקירה המפורטת של CSS Tricks. אם אתם מכירים את Flexbox, רוב המאפיינים והמשמעות שלהם אמורים להיות מוכרים לכם.
נבחן עכשיו פריסה רגילה של רשת עם 12 עמודות. הפריסה הקלאסית של 12 עמודות פופולרית כי המספר 12 מתחלק ב-2, ב-3, ב-4 וב-6, ולכן הוא שימושי לעיצובים רבים. נטמיע את הפריסה הזו:
נתחיל בקוד ה-Markup:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
בגיליון הסגנונות, מתחילים בהרחבת body כך שיכיל את כל אזור התצוגה, ומגדירים אותו כמאגר של רשת:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
עכשיו אנחנו משתמשים ב-CSS Grid. מעולה!
בשלב הבא נטמיע את השורות והעמודות של התצוגה. אפשר להטמיע את כל 12 העמודות בתוכנית האב, אבל מכיוון שאנחנו לא משתמשים בכל העמודות, הפעולה הזו תיצור ב-CSS שלנו בלאגים מיותרים. כדי לפשט את התהליך, ניישם את הפריסה באופן הבא:
הרוחב של הכותרת העליונה והכותרת התחתונה משתנה, והרוחב של התוכן משתנה בשני המאפיינים. גם תפריט הניווט ישתנה בשני המאפיינים, אבל נחייב רוחב מינימלי של 200 פיקסלים. (מדוע? כמובן, כדי להציג את התכונות של CSS Grid).
ב-CSS Grid, קבוצת העמודות והשורות נקראת טראקים. נתחיל בהגדרת הקבוצה הראשונה של הטראקים, השורות:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows מקבלת רצף של גדלים שמגדירים את השורות הנפרדות.
במקרה כזה, נותנים לשורה הראשונה גובה של 150px ולשורה האחרונה גובה של 100px.
השורה האמצעית מוגדרת כ-auto, כלומר היא תתאים את הגובה הנדרש כדי להכיל את פריטי התצוגה (צאצאי קונטיינר התצוגה) בשורה הזו. מכיוון שהגוף שלנו נמתח על כל אזור התצוגה, המסלול שמכיל את התוכן (צהוב בתמונה שלמעלה) ימלא לפחות את כל המרחב הזמין, אבל יתרחב (ויגרום לגלילה של המסמך) אם יהיה צורך בכך.
לגבי העמודות, אנחנו רוצים לנקוט גישה דינמית יותר: אנחנו רוצים שגם התפריט וגם התוכן יתרחבו (וייכווצו), אבל אנחנו לא רוצים שהתפריט יתכווץ לפחות מ-200 פיקסלים, ואנחנו רוצים שהתוכן יהיה גדול יותר מהתפריט. ב-Flexbox היינו משתמשים ב-flex-grow וב-flex-shrink, אבל ב-Grid זה קצת שונה:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
אנחנו מגדירים 2 עמודות. העמודה הראשונה מוגדרת באמצעות הפונקציה minmax(), שמקבלת 2 ערכים: הגודל המינימלי והגודל המקסימלי של הטראק.
(הוא כמו min-width ו-max-width ביחד). רוחב המינימום הוא, כפי שציינו קודם, 200 פיקסלים. הרוחב המקסימלי הוא 3fr. fr היא יחידה ספציפית לרשת שמאפשרת לכם לחלק את המרחב הזמין בין רכיבי הרשת. האות fr מייצגת כנראה 'יחידה של חלוקה', אבל יכול להיות שהיא גם מייצגת 'יחידה ללא תשלום בקרוב'.
הערכים שציינו כאן גורמים לשתי העמודות להתרחב כדי למלא את המסך, אבל עמודת התוכן תמיד תהיה רחבה פי 3 מעמודת הניווט (בתנאי שעמודת הניווט תישאר רחבה מ-200px).
המיקום של הפריטים ברשימה עדיין לא נכון, אבל הגודל של השורות והעמודות תקין והוא מניב את ההתנהגות שרצינו:
הצבת הפריטים
אחד המאפיינים החזקים ביותר של Grid הוא היכולת למקם פריטים ללא קשר לסדר ב-DOM. (עם זאת, מכיוון שקוראי מסך מנווטים ב-DOM, מומלץ מאוד לשים לב לאופן שבו משנה את הסדר של הרכיבים כדי לשמור על נגישות). אם לא מבצעים מיקום ידני, הרכיבים ממוקמים ב-Grid לפי סדר DOM, ומסודרים משמאל לימין ומלמעלה למטה. כל רכיב תופס תא אחד. אפשר לשנות את הסדר שבו התאים מתמלאים באמצעות grid-auto-flow.
אז איך אנחנו מציבים רכיבים? הדרך הקלה ביותר למקם פריטים בחלונית היא להגדיר את העמודות והשורות שהם מכסים. ב-Grid יש שני תחבירים שאפשר להשתמש בהם כדי לעשות זאת: בהתחביר הראשון מגדירים נקודות התחלה וסיום. בקוד השני מגדירים נקודת התחלה וטווח:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
אנחנו רוצים שהכותרת תתחיל בעמודה הראשונה ותסתיים לפני העמודה השלישית. תפריט הניווט צריך להתחיל בשורה השנייה ולהשתרע על פני 2 שורות בסך הכול.
מבחינה טכנית, סיימנו להטמיע את הפריסה שלנו, אבל אני רוצה להראות לך כמה תכונות נוחות שאפשר להשתמש בהן ב-Grid כדי להקל על מיקום המודעות. התכונה הראשונה היא שאפשר לתת שמות לגבולות הטראק ולהשתמש בשמות האלה למיקום:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
הקוד שלמעלה ייצור את אותה פריסה כמו הקוד הקודם.
תכונה שימושית עוד יותר היא האפשרות לתת שמות לאזורים שלמים בחלונית:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
הפונקציה grid-template-areas מקבלת מחרוזת של שמות מופרדים בפסיקים, ומאפשרת למפתח לתת שם לכל תא. אם לשני תאים סמוכים יש שם זהה, הם ימוזגו לאותו אזור. כך תוכלו לספק יותר סמנטיקה לקוד הפריסה ולהפוך את שאילתות המדיה לאינטואיטיביות יותר. שוב, הקוד הזה ייצור את אותו פריסה כמו קודם.
יש עוד משהו?
כן, יש, וזה הרבה יותר מדי כדי לכסות בפוסט אחד בבלוג. Rachel Andrew, שגם היא GDE, היא מומחית מוזמנת בקבוצת העבודה של CSS, ועבדה איתם מההתחלה כדי לוודא ש-Grid פשוט יותר לשימוש בעיצוב אתרים. היא אפילו כתבה על כך ספר. האתר שלה, Grid By Example, הוא מקור חשוב להיכרות עם Grid. הרבה אנשים חושבים ש-Grid הוא צעד מהפכני בתכנון אתרים, והוא מופעל עכשיו כברירת מחדל ב-Chrome, כך שתוכלו להתחיל להשתמש בו כבר היום.