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

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

Una Kravets

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

כדי לעקוב אחר ההדגמות האלה או לשחק עם ההדגמות האלה בעצמכם, אפשר להשתמש בהטמעה של 'תקלה' שלמעלה, או להיכנס לכתובת 1linelayouts.glitch.me.

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

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

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

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

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

02. הפנקייק לאחר תהליך בנייה: 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;
}

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

3. בסרגל הצד כתוב: grid-template-columns: minmax(<min>, <max>) …)

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

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

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

04. ערימת פנקייקים: grid-template-rows: auto 1fr auto

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

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

כדי שהכותרת התחתונה תיצמד לתחתית המסך, מוסיפים:

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

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

05. פריסה קלאסית של גביע קדוש: 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;
}

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

6. רשת עם 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;
}

7. RAM (חוזר, אוטומטי, 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));
}

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

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

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

8. חבילת ערוצים: justify-content: space-between

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

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

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

9. הצמדה לסגנון שלי: clamp(<min>, <actual>, <max>)

כאן נסביר על טכניקות מסוימות עם פחות תמיכה בדפדפן, אבל יש להן השלכות מלהיבות מאוד על פריסות ועל עיצוב רספונסיבי של ממשק המשתמש. בהדגמה הזו מגדירים את הרוחב באמצעות הצמדה, למשל: 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 בגרסה 84 של Chromium, ו-Firefox משקיע מאמצים רבים כדי להטמיע אותה, אבל נכון לעכשיו היא לא מופיעה באף מהדורה של דפדפן יציב.

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

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

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

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

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

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

סיכום

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