אמ;לק
אם אתם מכירים את 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. נכון לזמן הכתיבה, ההטמעה של Grid של Microsoft לא מעודכנת (כמו שכבר היה ב-IE11.) והעדכון הוא "בבדיקה".
למרות הדמיון בקונספט ובתחביר, אל תתייחסו ל-Flexbox ול-Grid בתור שיטות מתחרות של פריסה. כשמשתמשים ב-Grid, הפריטים מסודרים בשני מאפיינים, ואילו כשמשתמשים ב-Flexbox, הפריטים מסודרים במאפיין אחד. כשמשתמשים בשניהם יחד, יש סינרגיה.
הגדרת רשת
כדי להכיר את המאפיינים הספציפיים של Grid, אני ממליץ מאוד על Grid by Example של רייצ'ל אנדרו או על Cheat Sheet של 'טריקים ב-CSS'. אם אתם מכירים את 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 נשתמש בהגדלה גמישה ובכיווץ גמיש, אבל ברשת היא קצת שונה:
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 מעמודת הניווט (כל עוד עמודת הניווט תהיה רחבה מ-200 פיקסלים).
המיקום של הפריטים ברשימה עדיין לא נכון, אבל הגודל של השורות והעמודות תקין והוא מניב את ההתנהגות שרצינו:
הצבת הפריטים
אחד המאפיינים החזקים ביותר של Grid הוא היכולת למקם פריטים ללא קשר לסדר ב-DOM. (עם זאת, מכיוון שקוראי מסך מנווטים ב-DOM, מומלץ מאוד לשים לב לאופן שבו משנה את הסדר של הרכיבים כדי לשמור על נגישות). אם לא בוצעה מיקומי מודעות באופן ידני, הרכיבים ימוקמו ברשת לפי סדר 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, כך שתוכלו להתחיל להשתמש בו כבר היום.