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

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

Una Kravets

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

כדי לנסות את הדמואים האלה בעצמכם, אתם יכולים להיכנס לדף המוטמע של Glitch שלמעלה או להיכנס לכתובת 1linelayouts.glitch.me.

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

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

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. ערימת פנקייקים: grid-template-rows: auto 1fr auto

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

הוספת 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;
}

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

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));
}

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

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

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

08. Line Up: ‏ justify-content: space-between

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

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

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

09. Clamp My Style: ‏ 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 בגרסה 84 של Chromium, ויש מאמץ פעיל מצד Firefox להטמיע אותה, אבל היא לא נמצאת כרגע בגרסאות יציבות של דפדפנים.

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

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

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

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

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

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

סיכום

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