אמ;לק
אם אתם מכירים את Flexbox, אפליקציית Grid אמורה להיראות לכם מוכרת. ל-Rachel Andrew יש אתר מעולה שמוקדש ל-CSS Grid כדי לעזור לכם להתחיל. תצוגת רשת זמינה עכשיו ב-Google Chrome.
מכשיר Flexbox? רשת?
בשנים האחרונות נעשה שימוש נרחב ב-CSS Flexbox, והתמיכה בדפדפנים נראית ממש טוב (אלא אם אתם בין האנשים העניים צריכים לתמוך ב-IE9 ומטה). עם Flexbox קל יותר לבצע הרבה משימות פריסה מורכבות, כמו ריווח מקביל בין אלמנטים, פריסות מלמעלה למטה או 'המצעד הקדוש של אשפי CSS': מרכוז אנכי.
אך לצערנו, ��מסכים יש בדרך כלל מאפיין נוסף שעלינו לדאוג לגביו. לצערנו, אין אפשרות להגדיר גם קצב אנכי וגם קצב אופקי באמצעות שימוש ב-Flexbox בלבד. כאן רשת CSS פותרת את הבעיה.
הרשת של CSS נמצאת בפיתוח, מאחורי דגל ברוב הדפדפנים כבר יותר מ-5 שנים, והוקדש זמן נוסף ליכולת פעולה הדדית כדי להימנע מהשקה של באגים כמו ב-Flexbox. כך שאם משתמשים ברשת כדי להטמיע את הפריסה ב-Chrome, סביר להניח שתקבלו את אותה התוצאה גם ב-Firefox וב-Safari. נכון לזמן הכתיבה, ההטמעה של Grid של Microsoft לא מעודכנת (כמו שכבר היה ב-IE11.) והעדכון הוא "בבדיקה".
למרות נקודות הדמיון בקונספט ובתחביר, לא כדאי לחשוב על Flexbox ועל Grid בתור טכניקות פריסה מתחרות. הרשת מאורגנת בשני מימדים, בעוד ש-Flexbox נפרס במימד אחד. יש סינרגיה כשמשתמשים בשני הסוגים יחד.
הגדרת רשת
כדי להכיר את המאפיינים הספציפיים של Grid, אני ממליץ מאוד על Grid by Example של רייצ'ל אנדרו או על Cheat Sheet של 'טריקים ב-CSS'. אם אתם מכירים את Flexbox, הרבה מהתכונות והמשמעות שלהן צריכות להיות מוכרות.
בואו נסתכל על פריסת רשת רגילה של 12 עמודות. הפריסה הקלאסית של 12 עמודות פופולרית כי המספר 12 מתחלק ב-2, 3, 4 ו-6, ולכן הוא שימושי לעיצובים רבים. נטמיע את הפריסה הזו:
נתחיל עם קוד תגי העיצוב שלנו:
<!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. מעולה!
השלב הבא הוא להטמיע את השורות והעמודות של הרשת שלנו. נוכל להטמיע את כל 12 העמודות בדוגמה שלנו, אבל בגלל שאנחנו לא משתמשים בכל עמודה, הדבר יגרום לשירות ה-CSS שלנו להיות מבולגן שלא לצורך. כדי לשמור על פשטות, ניישם את הפריסה כך:
הרוחב של הכותרת העליונה והכותרת התחתונה משתנה, והתוכן משתנה בשני המימדים. הניווט ישתנה גם בשני המימדים, אבל בקרוב נגדיר רוחב מינימלי של 200 פיקסלים. (מדוע? כדי להשוויץ בתכונות של רשת CSS, כמובן).
ברשת CSS, קבוצות העמודות והשורות נקראות טראקים. נתחיל בהגדרה של קבוצת הטראקים הראשונה שלנו, השורות:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows לוקחת רצף של גדלים שמגדיר את השורות הנפרדות.
במקרה כזה, קבענו גובה של 150 פיקסלים בשורה הראשונה, והשורה האחרונה היא 100 פיקסלים.
השורה האמצעית מוגדרת ל-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.
אז איך אנחנו מציבים אלמנטים? כנראה הדרך הקלה ביותר למקם פריטים בתצוגת רשת היא להגדיר אילו עמודות ושורות הם כוללים. לשם כך יש ברשת שני תחביר: בתחביר הראשון מגדירים נקודות התחלה ונקודות סיום. בשלב השני מגדירים נקודת התחלה וטווח:
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 מקבלת מחרוזת של שמות המופרדים ברווחים, וכך המפתחת יכולה לתת לכל תא שם. אם לשני תאים סמוכים יש שם זהה, הם יקובצו לאותו אזור. כך תוכלו לספק יותר סמנטיקה לקוד הפריסה ולהפוך שאילתות מדיה לאינטואיטיביות יותר. שוב, הקוד הזה ייצור את אותה הפריסה כמו קודם.
האם יש עוד?
כן, כן, יש יותר מדי פרטים בפוסט אחד בבלוג. רייצ'ל אנדרו, שהיא גם GDE, היא מומחית מוזמנים בקבוצת העבודה של CSS ועבדה איתה מההתחלה כדי לוודא ש-Grid הופך את עיצוב האתרים לפשוט יותר. היא אפילו כתבה ספר על גבי המידע. האתר שלה, Grid By Example, הוא מקור מידע חשוב להיכרות עם Grid. אנשים רבים חושבים ש-Grid הוא שלב מהפכני בעיצוב אתרים, ועכשיו הוא מופעל כברירת מחדל ב-Chrome כדי שתוכלו להתחיל להשתמש בו כבר היום.