עיצוב מטרו - Metro - חלק 1
section או div עם ה-class container, ובו שישה divים ממוספרים 1 עד 6.grid-template-columns: repeat(5, 1fr). המרצה מזכיר שהפריסה צריכה להיות כפולות של יחידה משותפת.grid-auto-rows: minmax(100px, auto), ו-gap: 5px.grid-column: span 4 ו-grid-row: span 2 (span = להתפרס).grid-column: span N · grid-row: span N · grid-template-columns · grid-auto-rows · gapפרקי ההרצאה: עיצוב מטרו - Metro - חלק 1
תמלול ההרצאה: עיצוב מטרו - Metro - חלק 1
הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב מטרו - Metro - חלק 1» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדוגמה השנייה שלנו בעולם הגריד מתארת לנו מצב שבו יש לנו משהו דו-מימד אבל שהוא לא סימטרי כמו טבלה. נהוג לקרוא לזה מטרו, מעין מערכת כזאת של כל מיני ריבועים שיכולים להיות בצורה לא סימטרית.
מטרו זה בעצם סוג של שפת תכנות/עיצוב של מייקרוסופט שמסוגלת לבנות את הצורות האלה, Windows 8, 10 משתמשת בזה בחלון סטארט שלהם שרואים את כל הריבועים האלה. יש לי כאן איזושהי תמונה שציירתי של משהו שאני רוצה להצליח לעשות.
כמו שאתם רואים זה דו מימד ולא באמת טבלה. יש פה אולי פרסומת גדולה ופה אני רוצה לראות איזה פרסומת קטנה וכמה תמונות ואני רוצה בדיוק את הצורה הזאת.
יכול להיות שזה תמונות שמסודרות, סיפורי הצלחה שמסודרים בצורה כזאת באתר שלנו, יכול להיות שזה מבצעים שאנחנו מסדרים את זה ככה, זה לא משנה.
זה דו-ממד איך אנחנו מצליחים בכלל לעשות דבר כזה. אז גריד מאפשר לעשות את זה בצורה ממש פשוטה. כמה חלקים אנחנו רואים שיש לנו? 1, 2, 3, 4, 5, 6, 6 חלקים.
אז שוב, המטרה בגריד זה בעזרת HTML ו-CSS לכתוב את המינימום בשביל להצליח לעשות המון דברים בדו מימד אז בואו ניקח סקשן וקלאס קונטיינר כמו שהיה לנו בעבר כמובן זה לא חייב להיות סקשן זה יכול להיות דיב בואו ניקח כאן דיבים ופשוט ניתן להם 1 עד 6 יש לנו 3 4 5 6 וזהו זה המינימום שאנחנו צריכים לבצע ב html
עכשיו דרך ה css אנחנו יכולים לגרום כל הדבר הזה להסתדר כמו שאנחנו רוצים בתמונה הזאת של המטרו. בואו רגע נסגור את התמונה, נריץ את זה קודם ואז נוכל להסתכל עליהם סייד ביי סייד.
בואו נציב שוב פעם כמו מקודם את זה בצורה כזאת, אנחנו רואים שזה כאן, אנחנו רוצים להתחיל לפתח את זה. אז דבר ראשון אני רוצה ג'נרל סטיילינג שלא קשורים, ג'נרל סטיילינג, לא קשורים לגריד שלנו יש לנו את הקונטיינר בואו ניתן לו מרג'ין קח שלוש היה לנו מקודם אחוז ואז הוא טיפה ירחיק
אותו פונט סייז בואו ניתן לו אקסטרה בואו ניקח כל אחד מהדיבים או במציאות זה קונטיינר חצי דיב טקסט אליין גם כן נשים את המידע באמצע בורדר אחד פיקסלים Solid Black בוא נקרא לזה Background Color וניתן לו שוב פעם Alice Blue עם 10 פיקסלים Padding ויש לנו כרגע
כאן למטה את כל הפריטים מסודרים בוא רגע נזיז את זה רק לכאן האמת שאני לא צריך כל כך את הסטטוס באר ויש לנו את כל הפריטים מסודרים אחד מתחת לשני.
עוד לא נתנו להם בכלל הגדרה של גריד. אנחנו באים לפה ואנחנו רוצים grid for displaying metro. אני קורא לזה מטרו, כן? יכול להיות שיש לזה שמות יותר מתאימים.
אז בואו ניקח את ה-container. ההגדרה קודם כל צריכה להיות ברמת ה-container שה-display שלה זה grid. נגיד לו שיש לו grid template columns כמו מקודם ואנחנו עכשיו צריכים לעצור רגע ולהסתכל על התמונה שלנו.
בואו רגע נציג את התמונה של המטרו, אולי נפתח אותה בצורה של reveal in file explorer ונריץ אותה בלי קשר לvisual studio. את זה אנחנו יכולים לסגור, את זה אנחנו יכולים לסגור וזאת התמונה. עכשיו בואו נסתכל רגע מה קורה כאן. כמה עמודות אתם רואים?
קצת קשה להגיד, תשמע, יש לך, לא יודע מה, שתי עמודות, שלוש עמודות, כמה עמודות יש פה? אז מה שאנחנו צריכים לעשות זה בשביל לסדר את זה בצורה הזאת, להסתכל על העמודה הקטנה ביותר ולראות כמה היא משוכפלת אצלם.
אנחנו יכולים לראות שאם אנחנו מסתכלים על זאת, היא פחות או יותר חצי מזאת. זאת אומרת שזאת אחת אז זאת שתיים סך הכל שלוש וזאת נראית אותו הדבר כמו זאת אז גם זאת שתיים.
זאת אומרת שאנחנו יכולים לראות שכאילו יש לנו פה כפולות של עמודות שיוצרות לנו סך הכל חמש עמודות. אז יש כאן איזשהו מצב של חלוקה לכפולות מסוימות או ליחידות מידה. זה משהו שמינימום אנחנו צריכים כן להגדיר.
אנחנו לא יכולים שזאת תהיה נניח 0.98 כלומר אנחנו כן יכולים אבל זה כבר יהיה הרבה יותר מורכב. אז בואו נניח שזאת תופסת לנו יחידה, זאת שתי יחידות, זאת שתי יחידות ולכן סך הכל יש לנו חמש עמודות.
אז אם אנחנו חוזרים, אנחנו יכולים לעשות repeat של 51fr, כמו שלמדנו בסרטון הקודם, של הטבלה וזה נותן לנו מיד את ההגדרה של החמש עמודות.
בואו נחזור לפה והנה כבר אנחנו רואים שיש לנו חמש עמודות, שישה חלקים מסודרים בצורה כזאת בחמש עמודות. זה מגניב.
בואו נחזור לפה ונחליט כמה אנחנו נותנים grid auto rows כמו שהיה לנו מקודם. בואו ניקח את ה-MIMAX ונגיד שכמה בעצם כל שורה תופסת.
אז כמה זאת תופסת, כמה זאת תופסת. אז בוא נניח שזאת תופסת לי 100 פיקסלים, אנחנו רואים שזאת היא כפליים מ-100, זאת גם תופסת 100 וזאת גם תופסת וזאת כנראה כפליים מאלה.
אז בואו נניח שיש לנו פה 100 פיקסלים, 100 פיקסלים על עמודה ואוטו לגבי היתר. חזור, האמת לא לכאן, רציתי לחזור לאתר וכבר אנחנו רואים שזה מתייצב 100 פיקסלים. זה מגניב.
ואנחנו רוצים טיפה אולי איזשהו gap ביניהם, אתם רואים את ה-gap שנמצא ביניהם? ראינו בסרטון הקודם שפשוט ניתן gap נהיה חמישה פיקסלים והם מיד טיפה מתרחקים אחד מהשני.
מכאן סיימנו להגדיר את הקונטיינר ופה כל מה שאנחנו צריכים לעשות זה ללכת רכיב רכיב ולהגיד לו כמה עמודות הוא תופס וכמה שורות הוא תופס.
כאשר אם הוא תופס עמודה אחת אז אנחנו לא צריכים להגיד לו כמה עמודות הוא תופס ואם הוא תופס שורה אחת אנחנו לא צריכים להגיד לו כמה שורות הוא תופס, כי ב-Default הוא יודע להתפרס על עמודה אחת ועל שורה אחת.
רק אם הוא מתפרס על יותר מזה או פחות מזה אנחנו צריכים להגיד לו. אז אנחנו פשוט באים אחד-אחד ואומרים להם: Div nth child 1. בואו נחשוב ביחד, אני אעשה את זה בשורה אחת שיהיה קצת יותר קל, אבל כמה בעצם הוא תופס.
בואו נחזור לפה ונראה שהוא מתפרס לנו על ארבע עמודות אחד שתיים שלוש ארבע וזה מתפרס על החמישית איך אנחנו אומרים באנגלית מתפרס על pen אז pen זה מתפרס או מתרחב על אז אנחנו אומרים לו grid column pen over 4 תתפרס על ארבע עמודות בואו נחזור נראה שאחד תפס לנו ארבע.
מגניב, אבל כמה שורות הוא תופס לנו? הוא מתפרס על שתיים. אז בואו ניגש אליו ונגיד לו הפעם שהוא מתפרס grid row pan