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

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

פריסות 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. Pancake Stack: ‏ 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, התיבות יתרחבו אם הגודל האופקי שלהן חורג מ-150px כדי למלא את כל השטח שנותר. עם זאת, אם משנים את הערך הזה ל-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;
}

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

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

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

סיכום

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