העברת פריטים ב- CSS פריסת רשת [מדריך]
משתמש ב מודול פריסת רשת ב עיצוב אתרים הופך להיות יותר ויותר ריאלי כמו דפדפנים נוספים מתחילים תתמוך בזה. בעת יצירת פריסות מילוי תאים ברשת, אולי יגיע רגע, אם כי, כאשר אתה רוצה להשיג דברים מסובכים יותר.
לדוגמה, ייתכן שתרצה מעט לנוע כמה פריטים רשת תקוע באזורים הרשת שלהם. ייתכן גם תרצה להעביר אותם מתוך מיכל הרשת (גלישה), או אחד על השני (חפיפה), או פשוט ... כדי קצת שטח ריק מסביב.
אז, בפוסט הזה, אני אראה לך איך אתה יכול להעביר, סדר, גלישה, חפיפה, ופריטים גודל הרשת בעת שימוש במודול פריסת הרשת של CSS.
צור רשת CSS
ראשית, בואו ליצור רשת פשוטה עם CSS שורה אחת ושלוש עמודות.
ב- HTML, אנו יוצרים חבורה של divs שבו מיכל הרשת מכיל את שלושת הפריטים ברשת.
ב CSS, מיכל הרשת יש תצוגה: רשת; נכס ואת הפריטים ברשת יש אזור רשת המזהה את השמות של אזורי פריט הרשת.
אנחנו גם תוסיף את ה רשת-תבנית-אזורים נכס למכל הרשת, שבו נעשה שימוש בשמות אזור הרשת להקצות את שטחי הרשת לתאי הרשת שהם מייצגים.
כל העמודות לקחת את הגודל של שבר אחד (fr) של רוחב מכולה, להבטיח את ההכללה של פריטים ברשת.
.grid-container display: grid; grid-template-areas: 'left right right'; רשת תבנית עמודות: לחזור (3, 1fr); רשת-שורות-שורות: 80px; grid-gap: 5px; רוחב: 360px; צבע רקע: מגנטה; . grid-left grid-area: left; .Gid-centre grid-area: center; . grid-right grid-area: right; .Gid-container div background-color: lightgreen;
גלישה פריטים ברשת
אתה יכול לעשות פריט רשת על גדותיו אם יש צורך בפריסה. כדי להשיג את ההשפעה overflow, אתה רק צריך השתמש בגודל עמודה שונהYou
.grid-container display: grid; grid-template-areas: 'left right right'; רשת תבנית עמודות: לחזור (3, 150px); grid-gap: 5px;
ה סכום הטור וגודל הפער הוא גדול יותר רוחב המכולה, מה שגורם לפריטי הרשת לגלוש במיכל שלהם.
פריטי רשת חופפים
א פריט רשת יכול להיות חופף (כיסוי מלא או חלקי) עוד פריט רשת במקרים הבאים:
- זה מוגדר טווח על פני (ומעלה) תא (ים) של פריט רשת אחרת.
- גודלו כבר גדל, גורם לו חפיפה עם פריט הרשת הסמוכה.
- זה עבר על גבי פריט רשת נוסף.
בהמשך נדון במקרים השני והשלישי “שינוי גודל” ו “נע” סעיפים.
ראשית, בואו לראות את המקרה הראשון כאשר פריט רשת משתרע על פני עוד אחד.
את פריט הרשת במרכז יש משתרע על שמאל, כך שרק שני פריטים גלויים על המסך.
.רשת מרכז רשת-אזור: מרכז; טבלה רשת: 1/3;
ה טבלה רשת ו רשת נכסים להקצות קווי רשת בין טור או שורה צריך להתאים.
בתרשים שלהלן, תוכל לראות כיצד טבלה רשת: 1/3 כלל CSS פועל: העמודה המרכזית בין קווי הרשת 1 ו -3. כתוצאה מכך, העמוד המרכזי חוצה את השמאלית.
העבר פריטי רשת
על ידי זז, אני מתכוון להזיז את הפריטים מעט מסביב. אם אתה רוצה לחלוטין להעביר פריט לתא רשת אחר / אזור אני ממליץ לך לעדכן את קוד היצירה של הרשת.
נע סביב פריטים ברשת הוא פשוט. רק להשתמש ב שולים, ה שינוי צורה, או ה מקומות קרובים נכסים. ראה להלן כיצד הפריטים מועברים באמצעות מאפיינים אלה.
ניתן להעביר את מרכז הרשת ואת פריטי הרשת הימני (כפי שמוצג למעלה) בדרכים הבאות:
1. שימוש שולים
שוליים שליליים מגדילים את הממדים של פריטי רשת, בעוד השוליים החיוביים מקצצים אותם. באמצעות שילוב של שניהם, אתה יכול להזיז את slighlty להעביר את הפריטים סביב.
.רשת מרכז רשת-אזור: מרכז; margin-left: -10px; margin-right: 10px; margin-top: -10px; margin-bottom: 10px; . grid-right grid-area: right; margin-left: 10px; margin-right: -10px; margin-top: -10px; margin-bottom: 10px;
2. שימוש שינוי צורה
ה לתרגם() פונקציית CSS מזיז אלמנט לאורך ציר x ו- y. שימוש בו יחד עם שינוי צורה המאפיין מאפשר לך לשנות את המיקום של פריט רשת.
.רשת מרכז רשת-אזור: מרכז; להפוך: לתרגם (-10 -10x, -10px); . grid-right grid-area: right; להפוך: לתרגם (10px, -10px);
3. שימוש עמדה
משתמש ב מקומות קרובים הכלל עם שצוין חלק עליון, בתחתית, שמאלה, ו ימין מאפיינים יכולים לשמש עבור נע סביב פריטים ברשת גם כן.
.רשת מרכז רשת-אזור: מרכז; מקומות קרובים bottom: 10px; right: 10px; . grid-right grid-area: right; מקומות קרובים bottom: 10px; משמאל: 10px;
הזמנת פריטים ברשת
פריטי רשת מוצגים על המסך לפי סדר הופעתם בקוד המקור של HTML.
בקטע הקודם, כאשר הפריט המרכזי הועבר שמאלה, הוא הונח על גבי הפריט השמאלי על ידי הדפדפן. זה קרה כי ב- HTML, עם זאת, אנו יכולים לשנות את הפריטים רשת סדר משתמש ב משתמש ב כמו מודול CSS Grid Layout, שינוי סדר האלמנטים ב- HTML אינו משפיע על פריסת הרשת, אתה יכול גם לשים אם אתה משתמש בשורות או עמודות בגודל אוטומטי עבור פריט רשת (באמצעות זכור, ברשת המדגם שלנו, כל שלוש עמודות לקחת חלק אחד ( כאן, אנו משנים את הגודל של הפריט השמאלי משתמש ב כאן, אנו משנים את הגודל של הפריט השמאלי משתמש ב z-index או ה להזמין מאפייני CSS.
z-index: 1; הכלל, פריט רשת שמאל יש הקשר גבוה יותר.. גריד-שמאל grid-area: left; z-index: 1;
גודל פריטי רשת
אוטומטי, fr, gr יחידות), זה יהיה להתכווץ כדי לפנות מקום הפריט השכן שלה כי גדל בגודל רק אם אמר פריט לא היה בגודל שינוי צורה או מרווח שלילי.fr) של מיכל הרשת. תסתכל איך כל שלושת הפריטים נראים כמו אחרי שמאל אחד הוא גודל בשתי דרכים שונות.1. גודל עם
רוחב ו גובהרוחב ו גובה נכסים. כתוצאה מכך, הוא נשאר בתוך מיכל הרשת.
.גריד-שמאל grid-area: left; רוחב: 200px; גובה: 90px;
2. גודל עם
שינוי צורהשינוי צורה נכס. כתוצאה מכך, הוא עולה על המכולה ואת הפער הרשת גם נעלמת.
.גריד-שמאל grid-area: left; צורה: scalex (1.8);
