עשר פריסות מודרניות בשורה אחת של CSS

בפוסט הזה נציג כמה שורות חזקות של CSS שמבצעות עבודה רבה ועוזרות לכם ליצור פריסות מודרניות חזקות.

Una Kravets

פריסות CSS מודרניות מאפשרות למפתחים לכתוב כללי סגנון משמעותיים וחזקים בכמה הקשות בלבד. בהרצאה שלמעלה ובפוסט הזה שבא אחריה, נבחנות 10 שורות עוצמתיות של CSS שמבצעות עבודה רבה.

כדי להתנסות בהדגמות האלה בעצמכם, אפשר לעיין בהטמעה של האתר שמופיעה למעלה או להיכנס לכתובת 1linelayouts.com.

01. סופר מרוכז: place-items: center

בפריסה הראשונה, 'שורה אחת', נפתור את התעלומה הגדולה ביותר בכל תחום ה-CSS: איך ממקמים דברים במרכז. חשוב לי שתדעו שעם place-items: center זה קל יותר ממה שאתם חושבים.

קודם מציינים את grid כשיטת display, ואז כותבים place-items: center באותו רכיב. ‫place-items היא קיצור דרך להגדרה של align-items וגם של justify-items בבת אחת. אם מגדירים את האפשרות הזו ל-center, גם align-items וגם justify-items מוגדרים ל-center.

.parent {
  display: grid;
  place-items: center;
}

כך התוכן ימוקם בדיוק במרכז של רכיב האב, ללא קשר לגודל המקורי שלו.

‫02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

עכשיו נפרק את הפנקייק! זה פריסה נפוצה באתרים שיווקיים, למשל, שבה מוצגים 3 פריטים בשורה, בדרך כלל עם תמונה, שם ואז טקסט שמתאר כמה תכונות של מוצר. בנייד, נרצה שהן יוצגו אחת מעל השנייה בצורה מסודרת, ויתרחבו ככל שגודל המסך יגדל.

אם משתמשים ב-Flexbox כדי ליצור את האפקט הזה, לא צריך שאילתות מדיה כדי להתאים את המיקום של הרכיבים האלה כשמשנים את גודל המסך.

הקיצור flex מייצג: flex: <flex-grow> <flex-shrink> <flex-basis>.

לכן, אם רוצים שהתיבות יתמלאו עד לגודל <flex-basis>, יתכווצו בגדלים קטנים יותר, אבל לא יתרחבו כדי למלא את כל השטח הנוסף, צריך לכתוב: flex: 0 1 <flex-basis>. במקרה הזה, <flex-basis> הוא 150px, ולכן הוא נראה כך:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

אם כן רוצים שהתיבות יתמתחו וימלאו את הרווח כשהן עוברות לשורה הבאה, מגדירים את <flex-grow> ל-1, כך שזה ייראה כך:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

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

‫03. סרגל הצד אומר: grid-template-columns: minmax(<min>, <max>) …)

בהדגמה הזו נעשה שימוש בפונקציה minmax עבור פריסות רשת. במקרה הזה, אנחנו מגדירים את הגודל המינימלי של סרגל הצד ל-150px, אבל במסכים גדולים יותר, מאפשרים לו להתרחב עד 25%. סרגל הצד תמיד יתפוס 25% מהשטח האופקי של רכיב האב שלו, עד שערך 25% יהיה קטן מ-150px.

מוסיפים את הערך הזה כערך של grid-template-columns עם הערך הבא: minmax(150px, 25%) 1fr. הפריט בעמודה הראשונה (סרגל הצד במקרה הזה) מקבל minmax של 150px ב-25%, והפריט השני (הקטע main כאן) תופס את שאר המקום כרצועה אחת של 1fr.

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. Pancake Stack: grid-template-rows: auto 1fr auto

בניגוד ל-Deconstructed Pancake, בדוגמה הזו הרכיבים לא עוברים לשורה חדשה כשהגודל של המסך משתנה. הפריסה הזו, שנקראת בדרך כלל כותרת תחתונה קבועה, משמשת לעיתים קרובות גם אתרים וגם אפליקציות, באפליקציות לנייד (הכותרת התחתונה היא בדרך כלל סרגל כלים) ובאתרים (אפליקציות של דף יחיד משתמשות בדרך כלל בפריסה הגלובלית הזו).

הוספת display: grid לרכיב תיתן לכם רשת עם עמודה אחת, אבל האזור הראשי יהיה בגובה התוכן בלבד, והכותרת התחתונה תהיה מתחתיו.

כדי שהכותרת התחתונה תישאר בתחתית, מוסיפים:

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

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

05. פריסת Holy Grail קלאסית: grid-template: auto 1fr auto / auto 1fr auto

בפריסה הקלאסית הזו יש כותרת עליונה, כותרת תחתונה, סרגל צד ימני, סרגל צד שמאלי ותוכן ראשי. הפריסה דומה לפריסה הקודמת, אבל עכשיו יש סרגלי צד!

כדי לכתוב את כל הרשת הזו באמצעות שורת קוד אחת, משתמשים במאפיין grid-template. כך אפשר להגדיר את השורות והעמודות בו-זמנית.

הצמד של המאפיין והערך הוא: grid-template: auto 1fr auto / auto 1fr auto. הקו הנטוי בין הרשימה הראשונה לרשימה השנייה שמופרדות ברווחים מציין את ההפרדה בין השורות והעמודות.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

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

‫06. רשת של 12 עמודות: grid-template-columns: repeat(12, 1fr)

אחרי זה יש לנו עוד קלאסיקה: רשת של 12 עמודות. אפשר לכתוב במהירות רשתות ב-CSS באמצעות הפונקציה repeat(). אם משתמשים ב: repeat(12, 1fr); עבור עמודות תבנית הרשת, מקבלים 12 עמודות, כל אחת בגודל 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

עכשיו יש לכם רשת של 12 ערוצים, ואפשר למקם את הצאצאים ברשת. אפשר למקם אותם באמצעות קווי רשת. לדוגמה, grid-column: 1 / 13 יתפרס לכל האורך מהשורה הראשונה עד האחרונה (ה-13) ויתפרס על 12 עמודות. grid-column: 1 / 5; יכלול את ארבעת החודשים הראשונים.

דרך נוספת לכתוב את זה היא באמצעות מילת המפתח span. בעזרת span, אתם מגדירים את שורת ההתחלה ואז את מספר העמודות שצריך להרחיב מנקודת ההתחלה הזו. במקרה כזה, grid-column: 1 / span 12 יהיה שווה ל-grid-column: 1 / 13, ו-grid-column: 2 / span 6 יהיה שווה ל-grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

‫07. ‫RAM (Repeat, Auto, MinMax): ‏ grid-template-columns(auto-fit, minmax(<base>, 1fr))

בדוגמה השביעית הזו, נשלב כמה מהמושגים שכבר למדנו כדי ליצור פריסה רספונסיבית עם רכיבי צאצא גמישים שמוצבים באופן אוטומטי. ממש מגניב. המונחים העיקריים שכדאי לזכור כאן הם repeat, auto-(fit|fill) ו-minmax()', שאפשר לזכור אותם באמצעות ראשי התיבות RAM.

התוצאה הסופית היא:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

אתם משתמשים שוב בפונקציה repeat, אבל הפעם אתם משתמשים במילת המפתח auto-fit במקום בערך מספרי מפורש. ההגדרה הזו מאפשרת מיקום אוטומטי של רכיבי הצאצא האלה. גם לרכיבי הצאצא האלה יש ערך בסיסי מינימלי של 150px וערך מקסימלי של 1fr. כלומר, במסכים קטנים יותר הם יתפסו את הרוחב המלא של 1fr, וכשהרוחב של כל אחד מהם יגיע ל-150px, הם יתחילו להופיע באותה השורה.

עם auto-fit, התיבות יתמתחו כשהגודל האופקי שלהן יעלה על 150px כדי למלא את כל השטח שנותר. עם זאת, אם משנים את הערך הזה ל-auto-fill, התמונות לא יתמתחו כשהגודל הבסיסי שלהן בפונקציית minmax יעלה על הגודל המקסימלי:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

‫08. הזזה למעלה: justify-content: space-between

בפריסה הבאה, הנקודה העיקרית להדגמה היא justify-content: space-between, שבה רכיבי הצאצא הראשון והאחרון ממוקמים בקצוות של תיבת התוחמת שלהם, והרווח שנותר מחולק באופן שווה בין הרכיבים. הכרטיסים האלה מוצבים במצב תצוגה של Flexbox, והכיוון מוגדר לעמודה באמצעות flex-direction: column.

הפעולה הזו מציבה את הכותרת, התיאור ובלוק התמונה בעמודה אנכית בתוך הכרטיס הראשי. לאחר מכן, החלת justify-content: space-between מעגנת את האלמנט הראשון (הכותרת) והאחרון (בלוק התמונה) לקצוות של ה-flexbox, והטקסט התיאורי שביניהם ממוקם עם מרווח שווה לכל נקודת קצה.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

‫09. הגבלת הסגנון שלי: clamp(<min>, <actual>, <max>)

כאן נסביר על כמה טכניקות עם פחות תמיכה בדפדפנים, אבל יש להן השלכות מעניינות מאוד על פריסות ועל עיצוב ממשקי משתמש רספונסיביים. בהדגמה הזו, מגדירים את הרוחב באמצעות clamp באופן הבא: width: clamp(<min>, <actual>, <max>).

כך מגדירים גודל מינימלי ומקסימלי מוחלטים וגודל בפועל. עם ערכים, זה יכול להיראות כך:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

הגודל המינימלי כאן הוא 23ch או 23 יחידות תווים, והגודל המקסימלי הוא 46ch, 46 תווים. יחידות רוחב התווים מבוססות על גודל הגופן של הרכיב (במיוחד על הרוחב של הגליף 0). הגודל בפועל הוא 50%, שמייצג 50% מהרוחב של רכיב ההורה.

הפונקציה clamp() מאפשרת לרכיב לשמור על רוחב של 50% עד ש-50% יהיה גדול מ-46ch (בחלונות תצוגה רחבים יותר) או קטן מ-23ch (בחלונות תצוגה קטנים יותר). אפשר לראות שכשאני מגדיל ומקטין את הגודל של רכיב האב, הרוחב של הכרטיס הזה גדל עד לנקודת המקסימום שלו וקטן עד לנקודת המינימום שלו. הוא נשאר במרכז של ההורה כי הוספנו מאפיינים נוספים כדי למרכז אותו. כך אפשר ליצור פריסות קריאות יותר, כי הטקסט לא יהיה רחב מדי (מעל 46ch) או צר מדי (פחות מ-23ch).

זו גם דרך מצוינת להטמיע טיפוגרפיה רספונסיבית. לדוגמה, אפשר לכתוב: font-size: clamp(1.5rem, 20vw, 3rem). במקרה הזה, גודל הגופן של כותרת תמיד יישאר בין 1.5rem ל-3rem, אבל הוא יגדל ויתכווץ בהתאם לערך בפועל של 20vw כדי להתאים לרוחב של אזור התצוגה.

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

10. שמירה על יחס הגובה-רוחב: aspect-ratio: <width> / <height>

ולבסוף, הכלי האחרון לפריסת הרכיבים הוא הניסיוני ביותר מבין כולם. התכונה הזו נוספה לאחרונה ל-Chrome Canary ב-Chromium 84, ויש מאמץ פעיל של Firefox להטמיע אותה, אבל כרגע היא לא זמינה בגרסאות יציבות של דפדפנים.

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

כשמשתמשים במאפיין aspect-ratio, כשמשנים את גודל הכרטיס, הבלוק החזותי הירוק שומר על יחס הגובה-רוחב של 16x9. אנחנו שומרים על יחס הגובה-רוחב עם aspect-ratio: 16 / 9.

.video {
  aspect-ratio: 16 / 9;
}

כדי לשמור על יחס גובה-רוחב של 16x9 בלי המאפיין הזה, צריך להשתמש בpadding-top hack ולהגדיר לו ריווח של 56.25% כדי להגדיר יחס בין הגובה לרוחב. בקרוב נוסיף נכס שימנע את הפריצה ואת הצורך בחישוב האחוז. אתם יכולים ליצור ריבוע ביחס של 1 / 1, יחס של 2:1 עם 2 / 1, ובעצם כל מה שאתם צריכים כדי שהתמונה הזו תותאם לגודל מסוים.

.square {
  aspect-ratio: 1 / 1;
}

התכונה הזו עדיין חדשה, אבל כדאי להכיר אותה כי היא פותרת הרבה בעיות שנתקלתי בהן בעצמי, במיוחד כשמדובר בסרטונים וב-iframes.

סיכום

תודה שהצטרפתם אלינו למסע הזה באמצעות 10 שורות CSS עוצמתיות. למידע נוסף, כדאי לצפות בסרטון המלא ולנסות את ההדגמות בעצמכם.