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

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

Una Kravets

תאריך פרסום: 7 ביולי 2020, תאריך עדכון אחרון: 15 בדצמבר 2025

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

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

‫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>

ולבסוף, הפריסה האחרונה הזו פותרת בעיה שנתקלים בה לעיתים קרובות – שמירה על יחס הגובה-רוחב של תמונה.

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

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

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

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

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

סיכום

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