פריסות רשת הן בסיסיות לעיצוב אתרי אינטרנט, ומודול ה- CSS Grid הוא הכלי החזק והקל ביותר ליצירתו. אני באופן אישי חושב שזה הרבה יותר טוב מאשר למשל Bootstrap (קרא למה כאן).
המודול קיבל גם תמיכה מקורית בדפדפנים הגדולים (Safari, Chrome, Firefox, Edge), ולכן אני מאמין שכל מפתחי החזית יצטרכו ללמוד את הטכנולוגיה הזו בעתיד הלא רחוק .
במאמר זה, אעביר אתכם מהבסיסים המהירים ביותר של CSS Grid במהירות האפשרית. אני אשאיר את כל מה שלא אכפת לך ממנו עד שתבין את היסודות.
יצרתי גם קורס CSS Grid בחינם. לחץ כאן לקבלת גישה מלאה ל-
זה.
לחלופין, עיין במאמר זה, המסביר מה תלמד במהלך הקורס:
עכשיו בוא נקפוץ לזה!
פריסת הרשת הראשונה שלך
שני מרכיבי הליבה של רשת CSS הם העטיפה (האב) וה-
פריטים (ילדים). העטיפה היא הרשת בפועל והפריטים הם התוכן בתוך הרשת.
הנה הסימון לעטיפה ובה שישה פריטים:
1 2 3 4 5 6 כדי להפעיל המעטפת שלנו divלתוך רשת , אנחנו פשוט נותנים לו תצוגה של
grid:
אבל, זה עדיין לא עושה כלום, מכיוון שלא הגדרנו איך אנחנו רוצים שהרשת שלנו תיראה. זה פשוט נערם 6 div'sאחד על השני.
הוספתי מעט סטיילינג, אך אין לזה שום קשר לרשת CSS.
עמודות ושורות
כדי להפוך אותו לדו-ממדי, נצטרך להגדיר את העמודות והשורות. בואו ניצור שלוש עמודות ושתי שורות. נשתמש בתכונות grid-template-rowו- grid-template-column.
כשכתבנו עבורם שלושה ערכים grid-template-columnsנקבל שלוש עמודות. נקבל שתי שורות, כיוון שציינו שני ערכים עבור ה- grid-template-rows.
הערכים מכתיבים כמה אנחנו רוצים שהעמודות שלנו יהיו (100 פיקסלים) וכמה שאנחנו רוצים שהשורות שלנו יהיו (50 פיקסלים). הנה התוצאה:
כדי לוודא שאתה מבין נכון את הקשר בין הערכים לאיך שהרשת נראית, בדוק גם את הדוגמה הזו.
.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } נסה להבין את הקשר בין הקוד לפריסה.
כך זה משחק:
הצבת הפריטים
הדבר הבא שתצטרך ללמוד הוא כיצד למקם פריטים ברשת. זה המקום שבו אתה מקבל כוחות על, מכיוון שזה הופך את זה למת פשוט ליצור פריסות.
בואו ליצור רשת 3x3 תוך שימוש באותה סימון כמו קודם.
.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } זה יביא לפריסה הבאה:
שימו לב, אנו רואים רק רשת בגודל 3x2 בדף, ואילו הגדרנו אותה כגודל 3x3. הסיבה לכך היא שיש לנו רק שישה פריטים למלא את הרשת. אם היו לנו עוד שלוש, אז גם השורה הנמוכה ביותר תתמלא.
כדי למקם ולשנות את גודל הפריטים אנו נתמקד בהם ונשתמש בתכונות grid-columnו- grid-row:
.item1 { grid-column-start: 1; grid-column-end: 4; } מה שאנחנו אומרים כאן הוא שאנחנו רוצים שהפריט 1 יתחיל בשורת הרשת הראשונה ויסתיים בשורת העמודה הרביעית. במילים אחרות, זה ייקח את כל השורה.
כך זה יופיע על המסך:
אתה מבולבל מדוע יש לנו 4 שורות עמודות כשיש לנו רק 3 עמודות? התבונן בתמונה זו, שם ציירתי את קווי העמודות בשחור:
שים לב שעכשיו אנו משתמשים בכל השורות ברשת. כשגרמנו לפריט הראשון לתפוס את כל השורה הראשונה, הוא דחף את שאר הפריטים למטה.
לבסוף, ברצוני להראות דרך פשוטה יותר לכתוב את התחביר לעיל:
כדי לוודא שהבנתם את המושג הזה כמו שצריך, בואו נסדר מחדש את הפריטים.
.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } כך זה נראה בדף. נסה לעטוף את הראש מדוע זה נראה כמו זה. זה לא צריך להיות קשה מדי.
וזהו!
תודה שקראת! שמי פר בורגן, אני מייסד שותף של Scrimba - הדרך הקלה ביותר ללמוד לקודד. כדאי לבדוק את ה- bootcamp הרספונסיבי שלנו לעיצוב אתרים אם רוצים ללמוד לבנות אתר מודרני ברמה המקצועית.
