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

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

ציון מספר עמודה, רוחב ופער

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

לדוגמה:

.מְכוֹלָה {
ספירת עמודות: 3;
}

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

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

לדוגמה, ה-CSS הזה מצהיר 3 עמודות, כל אחת ברוחב של 200 פיקסלים:

.מְכוֹלָה {
ספירת עמודות: 3;
רוחב העמודה: 200פיקסלים;
}

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

instagram viewer

לדוגמה:

.מְכוֹלָה {
ספירת עמודות: 3;
פער-עמודים: 20פיקסלים; /* מגדיר את הפער בין העמודות ל-20 פיקסלים */
}

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

הקפדה על איזון עמודות

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

כדי לאזן בין עמודות, עליך לוודא שבכל עמודה בפריסה שלך יש בערך אותה כמות תוכן.

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

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

הנה דוגמה כיצד להשתמש ב- מילוי עמודות מאפיין לאיזון עמודות בפריסה מרובת עמודות:

פריסה מרובת עמודות {
ספירת עמודות: 3;
פער-עמודים: 20פיקסלים;
מילוי עמודות: איזון;
}

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

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

לשים הכל ביחד

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

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

html>
<html>
<רֹאשׁ>
<קישורrel="גיליון סגנונות"href="CSScolumns.css" />
רֹאשׁ>
<גוּף>
 אלמנט מיכל 
<divמעמד="פריסה של מגזין">
 אלמנטים של ילדים 
<divמעמד="מאמר">
<h2>כותרת המאמרh2>


<ע>Lorem ipsum dolor sit amet, consectetur adipiscing elit. סד פנימה
 magna vel lorem pharetra bibendum.ע>
div>


<divמעמד="מאמר">
<h2>כותרת המאמרh2>


<ע>Lorem ipsum dolor sit amet, consectetur adipiscing elit. סד פנימה
 magna vel lorem pharetra bibendum.ע>
div>


<divמעמד="מאמר">
<h2>כותרת המאמרh2>


<ע>Lorem ipsum dolor sit amet, consectetur adipiscing elit. סד פנימה
 magna vel lorem pharetra bibendum.ע>
div>
div>
גוּף>
html>

כדי ליצור פריסה בסגנון מגזין באמצעות מודול CSS Multi-column, שלבו את ספירת עמודות, רוחב העמודה, פער-עמודים, ו מילוי עמודות נכסים:

פריסת מגזין {
ספירת עמודות: 3;
רוחב העמודה: 300פיקסלים;
פער-עמודים: 20פיקסלים;
מילוי עמודות: איזון;
}
.מאמר {
צבע רקע: #f8f8f8;
גבול-רדיוס: 4פיקסלים;
צל קופסא: 0 2פיקסלים 4פיקסליםrgba(0, 0, 0, 0.1);
ריפוד: 10פיקסלים;
פריצה פנימה: הימנעות-עמודה;
}

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

שימוש ב- Fallbacks עבור דפדפנים לא נתמכים

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

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

לדוגמה:

.מְכוֹלָה {
/* נפילה עבור דפדפנים שאינם תומכים בספירת עמודות */
רוֹחַב: 100%;
}
/* זיהוי תמיכה בספירת עמודות */
@תומך (ספירת עמודות:3) {
.מְכוֹלָה {
ספירת עמודות: 3;
 }
}

בדוגמה זו אנו משתמשים ב- @תומך שאילתת תכונה לאיתור תמיכה ב- ספירת עמודות תכונה. אם הדפדפן תומך בספירת עמודות, ה- מְכוֹלָה אלמנט יוצג בשלוש עמודות. אם הדפדפן אינו תומך בספירת עמודות, הוא יציג את התוכן בעמודה אחת באמצעות ה רוֹחַב תכונה.

פירוק תוכן לעמודות

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

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