Articles
מבוא ל-CSS
מאפייני CSS הקשורים לפריסת עמודות

מאפייני CSS הקשורים לפריסת עמודות

מאמר זה מסביר את מאפייני ה-CSS הקשורים לפריסת עמודות.

תוכלו ללמוד כיצד לתאר פריסות עמודות.

YouTube Video

HTML לתצוגה מקדימה

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

פריסת עמודות

עמודות 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

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

  • בדוגמה זו, התוכן מחולק ל-3 עמודות עם מרווח של 20px וכלל של 2px בין העמודות. בנוסף, האלמנט h5 נפרס על פני מספר עמודות.

המאפיין columns הוא קיצור למאפייני column-width ו-column-count.

תחביר של המאפיין columns 

1columns: <column-width> <column-count>;

columns פועל לפי פורמט זה.

  • <column-width>: מגדיר את הרוחב של כל עמודה. ניתן להשתמש ב-auto או בכל יחידת אורך אחרת (לדוגמה px, em, %, וכו') כערך.
  • <column-count>: מגדיר את מספר העמודות. מובע כערך מספרי.
מאפיין column-width 
1.container {
2  column-width: 250px;
3}

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

  • בדוגמה זו, רוחב כל עמודה הוא 250px ומספר העמודות האופטימלי מחושב בהתבסס על רוחב המיכל.
תכונת column-count 
1.container {
2  column-count: 3;
3}

column-count היא תכונה שמגדירה במפורש לכמה עמודות האלמנט המסוים מחולק. בניגוד ל-column-width, תכונה זו קובעת את מספר העמודות.

  • בדוגמה זו, התוכן בתוך המכולה מחולק לשלוש עמודות.
תכונת column-gap 
1.container {
2  column-gap: 20px;
3}

column-gap היא תכונה שמגדירה את המרווח (פער) בין כל עמודה. ישנה תכונה כללית ב-CSS Grid הנקראת gap, אך column-gap שימושית כשמעוניינים להתאים רק את המרווחים בין העמודות.

  • בדוגמה זו, ישנו מרווח של 20 פיקסלים בין כל עמודה. ערך ברירת המחדל הוא 16 פיקסלים.
תכונת column-rule 
1.container {
2  column-rule: 2px solid #333;
3}

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

  • בדוגמה זו, קו שחור מוצק ברוחב של 2 פיקסלים מוצג בין העמודות. column-rule ניתן לפירוק לשלוש התכונות הבאות.
    • column-rule-width: מגדירה את רוחב הקו.
    • column-rule-style: מגדירה את סגנון הקו. לדוגמה, ישנם solid, dashed, dotted וכדומה.
    • column-rule-color: מגדירה את צבע הקו.
תכונת column-span 
1h5 {
2  column-span: all;
3}

column-span היא תכונה שמגדירה אלמנט מסוים כך שיתפרש על פני מספר עמודות. נעשה בה שימוש בעיקר עבור אלמנטים כמו כותרות או כותרות משנה. ישנם שני ערכים אפשריים:. - none: האלמנט אינו מתפרש על עמודות והוא מתאים לעמודה אחת. זהו הערך המוגדר כברירת מחדל. - all: האלמנט מוצג כך שהוא מתפרש על כל העמודות.

  • בדוגמה זו, האלמנט h5 מוצג כשהוא מתפרש על פני מספר עמודות.
תכונת column-fill 
1.container {
2  column-fill: balance;
3}

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

  • הגדרה זו מבצעת התאמה כך שהתוכן יחולק באופן שווה.
שימוש עם שאילתות מדיה 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

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

  • בדוגמה זו, כאשר רוחב המסך הוא 600px או פחות, תהיה עמודה אחת. למסכים רחבים יותר, זה יחולק ל-3 עמודות ברוחב של 200px כל אחת.

סיכום

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

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

סדר 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

תכונת ה-order ב-CSS משמשת לשליטה בסדר התצוגה של אלמנטים כאשר משתמשים בפריסות Flexbox או Grid. בדרך כלל, אלמנטים מוצגים על פי הסימון ב-HTML, אך ניתן לשנות את סדר הצגתם באמצעות תכונת ה-order. תכונה זו מסייעת בעיצוב ממשקי משתמש גמישים ובבנייה של עיצובים רספונסיביים.

  • בדוגמה זו, הפריטים מסומנים ב-HTML כ-Item 1, Item 2, Item 3, אך סדר התצוגה משתנה ל-Item 2, Item 3, Item 1 בשל תכונת ה-order ב-CSS.

יסודות תכונת order

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

תחביר בסיסי 
1.item {
2  order: <integer>;
3}
  • ניתן לציין כל ערך שלם עבור ה-order. ניתן להשתמש בערכים חיוביים, שליליים או אפס. ככל שהערך קטן יותר, האלמנט יוצג מוקדם יותר, וככל שהערך גדול יותר, האלמנט יוצג מאוחר יותר.

שימוש בערכים חיוביים ושליליים

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

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

בדוגמה זו, Item 1 מוגדר כ-order: -1, ולכן הוא מופיע ראשון. לעומת זאת, Item 3 מוגדר כ-order: 1, ו-Item 2 מוגדר כ-order: 2, ולכן הם מופיעים בסדר הזה.

order בעיצוב רספונסיבי

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

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

בדוגמה זו, בתצוגה רגילה, הפריטים מוצגים בסדר Item 1, Item 2, Item 3, אך כאשר רוחב המסך הוא פחות מ-600px, Item 2 מופיע ראשון, Item 3 אחריו, ו-Item 1 בסוף.

שיקולים עבור order

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

סיום

מאפיין order ב-CSS הוא כלי עוצמתי שמאפשר שליטה פשוטה בסדר התצוגה של אלמנטים בעיצובים של Flexbox או Grid. על ידי שימוש בערכים חיוביים או שליליים, ניתן לשנות את סדר האלמנטים בצורה גמישה, מה שמועיל במיוחד בעיצוב רספונסיבי. עם זאת, יש לשים דגש על נגישות ועל הפער בין הסדר החזותי למבנה ה-HTML. אם נלקחים בחשבון בצורה נכונה, מאפיין order יכול להיות שימושי ליצירת עיצובים דינמיים וגמישים יותר.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות לפריסת רשת