אמ;לק
אם אתם מכירים את Flexbox, אתם אמורים לראות כבר את Grid. רייצ'ל אנדרו מנהלת אתר ייעודי ל-CSS Grid כדי לעזור לכם להתחיל. תצוגת המשבצות זמינה עכשיו ב-Google Chrome.
Flexbox? תצוגת רשת?
בשנים האחרונות, נעשה שימוש נרחב ב-CSS Flexbox והתמיכה בדפדפנים נראית ממש טובה (אלא אם אתם נמניים עם התמיכה ב-IE9 ומטה). בזכות Flexbox הרבה משימות פריסה מורכבות, כמו ריווח שווה בין רכיבים, פריסות מלמעלה למטה או הגביע הקדוש של קסמים של CSS: מרכוז אנכי.
אבל לצערנו, למסכים יש בדרך כלל מימד שני שעלינו לדאוג לגביו. לצערנו, לא תוכלו להתאים בעצמכם את המידות של הרכיבים: גם קצב אנכי וגם קצב אופקי, רק אם משתמשים ב-flexbox בלבד. כאן אפשר להיעזר ב-CSS Grid.
CSS Grid נמצא בשלבי פיתוח, נמצא מאחורי דגל ברוב הדפדפנים, כבר יותר מ-5 שנים. השקענו זמן נוסף ביכולת הפעולה ההדדית כדי להימנע מהשקה לא תקינה כמו Flexbox. לכן אם אתם משתמשים ברשת כדי להטמיע את הפריסה ב-Chrome, סביר להניח שתקבלו את אותה התוצאה גם ב-Firefox וב-Safari. נכון לזמן כתיבת הנתונים, ההטמעה של Grid של Microsoft Edge לא עדכנית (כמו שהיא הייתה קיימת ב-IE11). העדכון נמצא "בבדיקה".
למרות הדמיון בין הקונספט והתחביר, כדאי להתייחס ל-Flexbox ול-Grid כשיטות פריסה מתחרות. הרשת מאורגנת בשני מימדים, ו-Flexbox נפרסת באחד. יש סינרגיה כשמשתמשים בשתי השיטות ביחד.
הגדרת רשת
כדי להכיר את המאפיינים הספציפיים של Grid, אני ממליץ בחום על Grid By Example של רייצ'ל אנדרו או על Cite Sheet של רייצ'ל אנדרו. אם אתם מכירים את 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 שלא לצורך. כדי לשמור על הפשטות, נטמיע את הפריסה כך:
הרוחב של הכותרת העליונה והכותרת התחתונה משתנה, והתוכן משתנה בשני המימדים. גם ממשק הניווט יהיה משתנה בשני המימדים, אבל אנחנו מתכוונים לקבוע רוחב מינימלי של 200px. (מדוע? כדי להציג לראווה את התכונות של רשת ה-CSS, כמובן.)
ב-CSS Grid, קבוצות העמודות והשורות נקראות tracks (טראקים). נתחיל בהגדרה של קבוצת הטראקים הראשונה, השורות:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
הפונקציה grid-template-rows מתייחסת לרצף של גדלים שמגדיר את השורות הנפרדות.
במקרה כזה, נקצה לשורה הראשונה גובה של 150 פיקסלים ולשורה האחרונה בגובה 100 פיקסלים.
השורה האמצעית מוגדרת לערך auto, ולכן היא תותאם לגובה הנדרש כדי להכיל את פריטי הרשת (הצאצאים של מאגר הרשת) שבשורה הזו. מכיוון שהגוף שלנו נמתח על פני כל אזור התצוגה, המסלול שמכיל את התוכן (הצהוב בתמונה שלמעלה) ימלא לפחות את כל השטח הזמין, אבל הוא יגדל (ויגרם לגלילה של המסמך) במקרה הצורך.
לגבי העמודות שאנחנו רוצים לנקוט גישה דינמית יותר: אנחנו רוצים שגם nav וגם התוכן יגדלו (וכן יצטמצמו), אבל אנחנו רוצים שממשק הניווט לא יתכווץ אף פעם מתחת ל-200px, ואנחנו רוצים שהתוכן יהיה גדול יותר מ-nav. ב-Flexbox היינו משתמשים ב-flex-grow וב-flex-כיווץ לכיווץ, אבל ב-Grid זה קצת שונה:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
אנחנו מגדירים 2 עמודות. העמודה הראשונה מוגדרת באמצעות הפונקציה minmax(), שמקבלת שני ערכים: הגודל המינימלי והגודל המקסימלי של הטראק הזה.
(זה כמו min-width ו-max-width באחת.) כפי שהסברנו קודם, הרוחב המינימלי הוא 200px. הרוחב המקסימלי הוא 3fr. fr היא יחידה ספציפית לרשת שמאפשרת לחלק את השטח הזמין לרכיבי הרשת. fr מייצג כנראה את "fraction unit", אבל יכול להיות שבקרוב גם המונח 'יחידה חינם'.
המשמעות של הערכים כאן היא ששתי העמודות יגדלו כדי למלא את המסך, אבל עמודת התוכן תמיד תהיה ברוחב של פי 3 מעמודת הניווט (בתנאי שעמודת הניווט תהיה רחבה יותר מ-200px).
המיקום של הפריטים ברשת עדיין לא נכון, אבל הגודל של השורות והעמודות פועל בצורה נכונה וההתנהגות שרצינו היא:
הכנסת הפריטים
אחת התכונות העוצמתיות ביותר של ה-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 מקבל מחרוזת של שמות שמופרדים ברווחים, וכך המפתח יכול לתת שם לכל תא. אם לשני תאים סמוכים יש שם זהה, הם ימוזגו לאותו אזור. כך ניתן לספק יותר סמנטיקה לקוד הפריסה ולהפוך את שאילתות המדיה לאינטואיטיביות יותר. שוב, הקוד הזה ייצור את אותה פריסה כמו קודם.
רוצה עוד?
כן, כן, יש הרבה יותר מדי פרטים בפוסט אחד בבלוג. רייצ'ל אנדרו, שהיא גם GDE, היא מומחית מוזמנת בקבוצת העבודה של CSS ועבדה איתה כבר מההתחלה כדי לוודא ש-Grid מפשטת את עיצוב האתר. היא אפילו כתבה עליו ספר. האתר שלה, Grid by Example, הוא מקור חשוב להיכרות עם רשת ה-Grid. אנשים רבים חושבים ש-Grid היא שלב מהפכני בתחום של עיצוב אתרים, ועכשיו היא מופעלת כברירת מחדל ב-Chrome, כך שאתם יכולים להתחיל להשתמש בה כבר היום.