עשר פריסות מודרניות בשורה אחת של 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;
}

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

2) הפנקייק המפוקח: 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.

מוסיפים את הערך הזה כערך של 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. פריסה קלאסית של הגביע הקדוש: 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 טווחים. באמצעות הפונקציה repeat() אפשר לכתוב במהירות רשתות ב-CSS. בשימוש: 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 (חזרה, אוטומטי, מינ'): 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, הרכיב הראשון (שם הפריט) והרכיב האחרון (בלוק התמונות) מוצמד לקצוות של ה-flexbox, והטקסט התיאורי שביניהם ימוקם במרווח שווה בין כל נקודת קצה.

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

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

באמצעות המאפיין aspect-ratio, כשמשנים את גודל הכרטיס, יחס הגובה-רוחב הירוק נשאר 16 x 9. אנחנו מכבדים את יחס הגובה-רוחב עם 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;
}

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

סיכום

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