עשר פריסות מודרניות בשורה אחת של 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. ערימת פנקייקים: grid-template-rows: auto 1fr auto

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

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

כדי שהכותרת התחתונה תישאר בתחתית, מוסיפים: 

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

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

05. פריסת Classic 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 (חזרה, אוטומטי, מינימום-מקסימום): 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));
}

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

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