קורס Front End למתכנתים שיעור תרגול מאפייני CSS לשינוי מראה

#1
זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/frontend/lessons/css-1-lab
#2

שלום,
אני ממש נהנית לתרגל אחרי ההסבר הברור!!!
רק שאלה קטנה…
בתרגיל 1 כתוב:“מספר העמודות והשורות בגריד נקבע לפי מספר התמונות.”
מה הכוונה? לשימוש באיזה תכונה בסלקטור זה חותר?
נגיד יש לי 6 תמונות כמה תהיינה בכל שורה?

תודה!

#3

הי @nava
כיף לשמוע - וגם אפשר לשנות את שם המשתמש פה בפורום (לוחצים על האייקון הקטן בצד שמאל למעלה ובוחרים הגדרות פרופיל)

לשאלה שלך - גודל של כל תמונה הוא 200 פיקסלים, והמרווח בין התמונות הוא 20 פיקסלים. לכן אם המסך שלך ברוחב 960 פיקסלים ייכנסו בכל שורה 4 תמונות
אז אם יש 10 תמונות בגלריה אנחנו נראה אותן מסודרות ב 4 עמודות ו 3 שורות (השורה האחרונה לא מלאה)
אבל אם יש 2 תמונות בגלריה נראה את שתיהן בשורה הראשונה וזהו

בקיצור התמונות יהיו מסודרות לפי המקום הפנוי שיש

#4

היי הכנסתי 6 תמונות אבל שיצאו מתחומי הגריד עד שהשתמשתי במאפיינים
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: repeat(3, 1fr)
אבל עדין אני לא מצליח להקטין את התמונות גם כשאני מקטין את הגריד התמונות נשארות אותו הדבר
מה אפשר לעשות?

#5

הי,

יכול להדביק כאן את הקוד המלא (או קישור אליו) ?

#6

https://drive.google.com/drive/folders/1Z2UGbg3VMvk-TV0tEKrmwg-s78UL_n65?usp=sharing
היי שיתפתי בגוגל דרייב, הצלחתי להסתדר עם הגודל של התמונות אבל רק כאשר אני שם את המאפיינים בקובץ HTML כמו שאתה רואה.
כשאני מוריד את המאפיינים מהHTML ומוסיף את אותם מאפיינים לCSS התמונות יוצאות מפרופוציה

#8

הי

סליחה זה אני שלא הספקתי להגיע לזה - בכל מקרה טוב לשלוח תזכורות :slight_smile:

לעניין שלנו:

  1. הגדרת width לתמונה ב HTML מגדירה מה הגודל “האמיתי” של התמונה. זאת הגדרה אופציונאלית שעוזרת לדפדפן להציג את הריבוע הריק לפני שהוא סיים לטעון את התמונה.

  2. הגדרת מימדים ב CSS זה סיפור יותר מורכב כי המשמעות שלהם מושפעת מאופן התצוגה - האם אני בתוך גריד? האם בתוך flexbox? האם אני אלמנט inline-block או לגמרי inline. כדאי לקרוא בתיעוד על כל מנגנון תצוגה איזה מאפייני CSS משפיעים עליו ומה משמעות כל אחד

  3. במקרה שלך לקחתי את הקוד כמו שהוא והורדתי את הגדרת המימדים ב HTML ונראה לי שהגעתי לבעיה שדיברת עליה. בשביל לתקן את זה הייתי צריך להוסיף רק את הבלוק הבא ל CSS:

img {
  max-width: 100%;
}

בדרך כלל אלמנטים מרשים לעצמם “לגלוש החוצה” מהאלמנט בתוכו הם נמצאים (אני מדבר על זה בשיעור על overflow). הגדרת רוחב מקסימלי לתמונה יקטין את התמונות שלמטה כדי שייכנסו למשבצת הקטנה בגריד, אבל לא ישפיע על התמונה העליונה.

אתה יכול לראות את התוצאה ולשחק איתה לייב בקודפן שיצרתי כאן:

#9

תודה רבה עזרת לי מאוד =)

#10

היי,
בתרגיל 2 אני לא רואה ש-box-border משפיע(כלומר אם מוסיפה padding תמונות יורדות שורה)

בנוסף, אני רואה שבתשובה שלך לשאלה של אחד המשתמשים העלת דוגמא עם הרבה הגדרות של wrapper
זה משהו שצריך להשתמש בו בשלב זה?

#11

הי,

אין דבר כזה box-border, יש border ויש box-sizing: border-box. מה ניסית לעשות?

(לגבי תשובות לאחרים - יש המון המון דרכים לגשת לכל שאלה. אין צורך להתרגש מכיוון שמישהו אחר לקח ושעדיין לא נראה לך ברור. ככל שתתקדמי בקורס ובפיתוח ווב בכלל לאט לאט גם תראי יותר דרכים לפתור כל שאלה)

#12

קודם כל תודה
בפועל בקוד כן כתבתי:
box-sizing: border-box
אבל לא הצלחתי לעשות שתמונות לא תרדנה שורה כשאני מוסיפה padding
לגבי ההערה השניה-קיבלתי:)

#13

הי,

התמונות ירדו שורה אם הרוחב שלהן + הריפוד ביניהן + השוליים הוא גדול יותר מרוחב השורה. הגדרת box-sizing: border-box גורמת לזה שהריפוד והגבול יחשבו בתור חלק מהרוחב.

בדוגמה שלך אני רואה שכשאני מוסיף לכלל ה CSS האחרון (של התמונות שלמטה) מאפיין padding, הריפוד לא גורם לירידת שורה והגודל של כל תמונה הופך קטן יותר. כן יש ירידת שורה כי סכום הרוחב של כל התמונות הוא יותר גדול מרוחב השורה.

למה את התכוונת כשכתבת שאין השפעה ל box-border ?

#14

אה נכוןןן הבנתי
ממש תודה!!!

לייק 1