גלריות תמונות שנעשו על ידי אתרים כמו Unsplash, Pinterest Etc, נעשות על ידי טכניקות כמו מיקום או תרגום של פריט התמונה שזו משימה מסורבלת מאוד. תוכל להשיג את אותה פונקציונליות במהירות רבה באמצעות רשתות CSS.
לדוגמה: מעל גלריה של תמונות עם תמונות של רוחב משתנה ואת הגובה המהווה מקרה שימוש מושלם רשתות CSS.בוא נתחיל!
הרשת הבסיסית
עכשיו, בואו ליצור רשת 8x8 . אנו יכולים ליצור רשת בגדלים אחרים, אך זה תלוי בסוג הגלריה הרצוי. במקרה שלנו, רשת 8x8 תהיה אידיאלית.
- מיכל רשת מוגדר על ידי הגדרת מאפיין התצוגה של אלמנט לרשת . אז החטיבה , עם רשת הכיתה הולכת להיות מיכל הרשת שלנו .
- אנו משתמשים במאפיין רשת-תבנית-עמודות כדי להגדיר את מסלולי העמודות ואת שורות התבנית-רשת כדי לקבוע את מסלולי השורה. אנו מצהירים על מאפיינים אלה על מיכל הרשת. בדוגמה שלנו, אנו נכין מיכל רשת 8x8.
- רשת-הפער: היא מגדירה את הגודל של הפער בין השורות ואת העמודות ב בפריסת רשת. הערך עבור פער הרשת יכול להיות כל יחידת אורך CSS. בדוגמה שלנו נתתי את הערך של 15 פיקסלים כדי שהרשת שלנו תיראה טוב יותר .
HTML:
CSS:
.gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 15px; }
הערה:
כל הילדים הישירים של הרשת הופכים אוטומטית לפריטי רשת .
הכנסת פריטי רשת
כעת, נכניס את פריטי הרשת בתוך מיכל הרשת:
תמונות סטיילינג
.gallery__img { width: 100%; height: 100%; object-fit: cover; }הגדרה בכושר אובייקט ערך כיסוי זה כמו קביעת גודל הרקע כדי כיסוי עבור תמונת הרקע . אנו עושים זאת כדי שהתמונה תוכל למלא את גובה ורוחב התיבה שלה (פריט הרשת), תוך שמירה על יחס הממדים שלה.
הערה: הנכס בכושר אובייקט עובד רק אם אנו מגדירים את רוחב ו גובה נכסים.
הערה:
כברירת מחדל פריטי הרשת ערוכים על פי כללי המיקום האוטומטיים ברשת .
מיקום פריטי רשת
לפני שנתחיל למקם את פריטי הרשת, נלמד כמה מושגי יסוד.
רשת div הוא מכל הרשת , וכל ילד הישיר אלמנטים הם פריטים לרשת . כאשר הגדרנו את מסלולי הרשת עם עמודות תבנית רשת ושורות תבנית רשת , הרשת סיפקה לנו קווים ממוספרים הנקראים קווי הרשת המשמשים למיקום הפריטים. ניתן להתייחס לכל קו רשת לפי אינדקס מספרי.
עמודות להתחיל באחד , מן עזב כדי תקין כברירת מחדל, ואת השורות גם להתחיל בשעה אחת מן העליון אל התחתון . זה לוקח שני קווי הרשת לעשות עמודה אחת או שורה, טור אחד מכל צד, כך שלנו 8-טור ו 8-בשורה רשת מורכבת
קווי 9-טור ו 9 שורות שורות .
הקווים האנכיים 1 ו 2 לקבוע את תחילת ו נקודות הקצה של העמודה הראשונה. קווים 2 ו 3 העמודה השנייה וכן הלאה. באופן דומה, קווים אופקיים 1 ו -2 קובעים את מיקום השורה הראשונה , ושורות 2 ו- 3 את השורה השנייה וכן הלאה. הכרת המושגים הנ"ל תעזור לך להבין כיצד אנו ממקמים פריטים (תמונות) ברשת שלנו.
כעת נשתמש במספרי קווי רשת כדי לשלוט על אופן הצבת הפריטים על ידי החלת מאפיינים ישירות על פריט רשת. אנחנו יכולים לציין על איזה קו פריט לרשת מתחילה ואת קצוות , וכמה מסלולים זה צריך להרחיב .
פריט רשת 1
אז בואו ניצור כלל חדש המכוון לפריט הרשת הראשון. נשתמש תחילה במאפיין התחלת רשת-עמודות כדי לציין את קו רשת העמודות בו מתחיל פריט הרשת הראשון. סוף רשת העמודה מציין היכן מסתיים פריט הרשת הראשון.
אז ערך התחלת הרשת של העמודה הוא מספר המציין את קו הרשת בקצה השמאלי של העמודה. ערך סוף-רשת-עמוד מציין את קו הרשת המסמן את הקצה הימני של העמודה.
אז בדוגמא שניתן בהמשך, הגדרת רשת-טור-להתחיל ל 1 ו רשת-טור-סוף אל 3 אמצעים שפריט הרשת יימתח מהקצה השמאלי של רשת הקו, קו 1 עד קו 3 , מתמלא 2 עמודות . אנחנו גם נשתמש ברשת שורה-תחילה ו גריד-שורה-סוף המאפיינים כדי לציין את תחילת פריט רשת ואת עמדת קצה על קווי רשת בשורה באותו אופן כפי שעשינו עבור העמודה.
.gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
הערה:
כעת, נציב פריטים אחרים על אותם עקרונות שלמדנו לעיל.
פריט רשת 2
.gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; }
פריט רשת 3
.gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; }
פריט רשת 4
.gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; }
פריט רשת 5
.gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; }
פריט רשת 6
.gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; }
You can find the complete code below.
CSS Grids Gallery And the CSS:
*, *::after, *::before { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } body { font-family: "Nunito", sans-serif; color: #333; font-weight: 300; line-height: 1.6; } .container { width: 60%; margin: 2rem auto; } .gallery { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 5vw); grid-gap: 1.5rem; } .gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 1 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--2 { grid-column-start: 3; grid-column-end: 5; grid-row-start: 1; grid-row-end: 3; /** Alternative Syntax **/ /* grid-column: 3 / span 2; */ /* grid-row: 1 / span 2; */ } .gallery__item--3 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 1; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 5 / span 4; grid-row: 1 / span 5; */ } .gallery__item--4 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 3; grid-row-end: 6; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 3 / span 3; */ } .gallery__item--5 { grid-column-start: 1; grid-column-end: 5; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 1 / span 4; */ /* grid-row: 6 / span 3; */ } .gallery__item--6 { grid-column-start: 5; grid-column-end: 9; grid-row-start: 6; grid-row-end: 9; /** Alternative Syntax **/ /* grid-column: 5 / span 4; */ /* grid-row: 6 / span 3; */ }You can try adding your own CSS to make this gallery look the way you want it to look. You can also create more complex image galleries very easily.
You can learn more about the CSS Grids in the link given below
A Complete Guide to Grid | CSS-Tricks
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…css-tricks.com
I hope you’ve found this post informative and helpful. I would love to hear your feedback!
Thank you for reading!