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

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

מאמר זה מסביר תכונות CSS הקשורות לפריסת רשת.

תוכלו ללמוד כיצד לתאר רשת ורשת בשורה.

YouTube Video

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

css-grid.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-grid.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>grid</h3>
 23            <section style="width: 100%; height: 350px;">
 24                <header><h4>display: grid; grid-template-columns: 100px 200px auto; grid-template-rows: 100px auto 50px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="grid-box">
 27                        <div class="grid-item">Item 1</div>
 28                        <div class="grid-item">Item 2</div>
 29                        <div class="grid-item">Item 3</div>
 30                        <div class="grid-item">Item 4</div>
 31                        <div class="grid-item">Item 5</div>
 32                        <div class="grid-item">Item 6</div>
 33                    </div>
 34                </section>
 35            </section>
 36            <section style="width: 100%; height: 550px;">
 37                <header><h4>display: grid; grid-template-columns: 120px 1fr 80px; grid-template-rows: 100px 1fr 100px;</h4></header>
 38                <section class="sample-view">
 39                    <div class="grid-container" style="color: #666;">
 40                        <header class="grid-header">Header</header>
 41                        <aside class="grid-sidebar">Sidebar</aside>
 42                        <article class="grid-content">
 43                            <p>Content</p>
 44                        </article>
 45                        <aside class="grid-ads">Ads</aside>
 46                        <footer class="grid-footer">Footer</footer>
 47                    </div>
 48                </section>
 49            </section>
 50        </article>
 51        <article>
 52            <h3>gap</h3>
 53            <section style="height: 300px;">
 54                <header><h4>display: grid; gap: 30px 10px;</h4></header>
 55                <section class="sample-view">
 56                    <div class="gap-grid-container">
 57                        <div>Item 1</div>
 58                        <div>Item 2</div>
 59                        <div>Item 3</div>
 60                        <div>Item 4</div>
 61                        <div>Item 5</div>
 62                        <div>Item 6</div>
 63                    </div>
 64                </section>
 65            </section>
 66            <section>
 67                <header><h4>display: flex; gap: 50px;</h4></header>
 68                <section class="sample-view">
 69                    <div class="gap-flex-container">
 70                        <div>Item 1</div>
 71                        <div>Item 2</div>
 72                        <div>Item 3</div>
 73                    </div>
 74                </section>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>grid-template-areas</h3>
 79            <section style="height: 350px;">
 80                <header><h4>grid-template-areas: "header header" "sidebar content" "footer footer";</h4></header>
 81                <section class="sample-view">
 82                    <div class="grid-template-areas-container">
 83                        <div class="grid-template-areas-header">Header</div>
 84                        <div class="grid-template-areas-sidebar">Sidebar</div>
 85                        <div class="grid-template-areas-content">Content</div>
 86                        <div class="grid-template-areas-footer">Footer</div>
 87                    </div>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>inline-grid</h3>
 93            <section>
 94                <header><h4>display: inline-grid</h4></header>
 95                <section class="sample-view">
 96                  Here is an inline grid:
 97                  <span class="inline-grid-container">
 98                      <div class="inline-grid-item">1</div>
 99                      <div class="inline-grid-item">2</div>
100                      <div class="inline-grid-item">3</div>
101                      <div class="inline-grid-item">4</div>
102                  </span>
103                  This is contained within a paragraph.
104                </section>
105            </section>
106        </article>
107    </main>
108</body>
109</html>

פריסת רשת

grid 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 200px auto;
 4    grid-template-rows: 100px auto 50px;
 5    gap: 10px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16    border: 2px solid black;
17}

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

  • מחלקת grid-box מיישמת פריסת רשת על ידי הגדרת grid במאפיין display. אלמנט זה נקרא מיכל רשת.
  • מאפיין grid-template-columns מגדיר את רוחב העמודות ברשת. בדוגמה זו, העמודה הראשונה היא 100px, העמודה השנייה היא 200px, והעמודה השלישית תופסת את השטח הנותר (auto).
  • מאפיין grid-template-rows מגדיר את גובה השורות ברשת. השורה הראשונה היא 100px, השורה השנייה מוגדרת כאוטומטית (auto), והשורה השלישית היא בגובה 50px.
  • מאפיין gap מגדיר את הרווח בין פריטי הרשת. הוספת רווח של 10px בין עמודות ושורות.

טרמינולוגיה בסיסית

  1. מיכל רשת הוא אלמנט שמאפיין display בו מוגדר כ-grid, והילדים שלו הופכים לפריטי רשת.
  2. פריטי רשת הם אלמנטים ילד שנמצאים ישירות תחת מיכל הרשת.

מאפייני רשת עיקריים

grid-template-columns & grid-template-rows 
1.container {
2    grid-template-columns: 1fr 2fr 1fr;
3}
  • מאפייני grid-template-columns ו-grid-template-rows מגדירים את הגודל של כל עמודה ושורה.
  • ניתן להשתמש ביחידות כמו px ו-%, כמו גם fr (שבר) כדי להגדיר יחס מהשטח הנותר.
    • בדוגמה זו, ישנם שלושה עמודות, והעמודה השנייה היא ברוחב כפול משאר העמודות.
grid-column & grid-row 
 1.container {
 2  display: grid;
 3  grid-template-columns: repeat(4, 1fr); /* 4 columns */
 4  grid-template-rows: repeat(3, 100px); /* 3 rows */
 5}
 6
 7.item {
 8  grid-column: 2 / 4;
 9  grid-row: 1 / 3;
10}
  • grid-column ו-grid-row מציינים באיזו עמודה או שורה ימוקם פריט הרשת.
    • בדוגמה זו, הפריט משתרע מהעמודה השנייה לעמודה הרביעית ומהשורה הראשונה לשורה השלישית.
grid-auto-rows & grid-auto-columns 
 1.container {
 2  display: grid;
 3  grid-template-rows: 100px 200px; /* Explicitly define 2 rows */
 4  grid-template-columns: 1fr 2fr; /* Explicitly define 2 columns */
 5  grid-auto-rows: 150px; /* Automatically added rows will be 150px */
 6  grid-auto-columns: 100px; /* Automatically added columns will be 100px */
 7}
 8
 9.item {
10  grid-column: 3; /* Positioned in the 3rd column (auto-generated) */
11  grid-row: 3; /* Positioned in the 3rd row (auto-generated) */
12}
  • grid-auto-rows ו-grid-auto-columns הן תכונות השולטות בגודל השורות והעמודות שנוצרות אוטומטית כאשר קווי הפריסה או העמודות לא מוגדרים במפורש.
    • בדוגמה זו, מוגדרות במפורש 2 שורות ו-2 עמודות, אך אם יתווספו עוד אלמנטים, שורות או עמודות חדשות ייווצרו אוטומטית בהתאם ל-grid-auto-rows ול-grid-auto-columns.
justify-items & align-items 
1.container {
2    justify-items: center; /* Center items horizontally */
3    align-items: center;   /* Center items vertically */
4}
  • יישור פריטי הרשת אופקית (justify-items) ואנכית (align-items).
grid-area 
1/* grid-area syntax
2grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
3*/
4.item {
5    grid-area: 1 / 2 / 3 / 4;
6}
  • grid-area קובע בבת אחת באיזו אזור של מיכל הרשת יש למקם את פריט הרשת.
    • בדוגמה זו, הכוונה לתפיסת המקום מהשורה הראשונה לשורה השלישית ומהעמודה השנייה לעמודה הרביעית.
gap 
1.container {
2    gap: 10px 20px; /* 10px space between rows, 20px space between columns */
3}
  • gap מוסיף רווחים בין עמודות ושורות. ניתן גם להגדיר את המרווחים בין העמודות והשורות באופן אינדיבידואלי באמצעות column-gap ו-row-gap.
grid-auto-flow 
1.container {
2    grid-auto-flow: column; /* Add items in the column direction */
3}
  • grid-auto-flow הוא מאפיין שמגדיר את הכיוון שבו ממוקמים פריטים, או לפי שורות או לפי עמודות.

דוגמה לפריסות מורכבות 

 1.grid-container {
 2    display: grid;
 3    grid-template-columns: 120px 1fr 80px;
 4    grid-template-rows: 50px 1fr 50px;
 5    gap: 10px;
 6    background-color: transparent;
 7    border: none;
 8    height: 400px;
 9}
10
11.grid-header {
12    grid-column: 1 / 4;
13    background-color: lightblue;
14}
15
16.grid-sidebar {
17    grid-column: 1 / 2;
18    grid-row: 2 / 3;
19    height: 100%;
20    background-color: lightslategray;
21    color: white;
22}
23
24.grid-content {
25    grid-column: 2 / 3;
26    grid-row: 2 / 3;
27    background-color: lightskyblue;
28}
29
30.grid-content p {
31    margin: 0;
32    padding: 0;
33    height: 260px;
34}
35
36.grid-ads {
37    grid-column: 3 / 4;
38    grid-row: 2 / 3;
39    height: 100%;
40    background-color: lightsteelblue;
41}
42
43.grid-footer {
44    grid-column: 1 / 4;
45    background-color: lightgray;
46}

באמצעות גריד, ניתן ליצור עיצוב שלם של עמוד אינטרנט עם קוד פשוט.

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

יתרונות הרשת

היתרונות של הרשת כוללים את הנקודות הבאות:.

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

מאפיין gap 

 1.gap-grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(3, 1fr);
 4    gap: 30px 10px;
 5    background-color: transparent;
 6    border: none;
 7    height: 200px;
 8}
 9
10.gap-grid-container div {
11    width: 100px;
12    background-color: lightskyblue;
13}
14
15.gap-flex-container {
16    display: flex;
17    gap: 50px;
18}
19
20.gap-flex-container div {
21    width: 80px;
22    background-color: lightgreen;
23}

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

  • במחלקה gap-grid-container, מוגדר רווח של 30px אנכית ו-10px אופקית בין כל אלמנט. מכיוון שגריד עם 3 עמודות נוצר באמצעות grid-template-columns, מיושמים רווחים אנכיים ואופקיים בין כל אלמנט. במחלקה gap-flex-container, מיושם רווח של 50px בין שלושת הפריטים ב-flexbox.

תחביר בסיסי 

1.container {
2  display: grid; /* or flex */
3  gap: <row-gap> <column-gap>;
4}
  • row-gap מציין את הרווח בין שורות. זהו המרווח האנכי בפריסות גריד או פלקס.
  • column-gap מציין את הרווח בין עמודות. זהו המרווח האופקי.

אם לא מציינים שני ערכים, ערך אחד מיושם הן עבור row-gap והן עבור column-gap.

יתרונות של תכונת gap

היתרונות של תכונת gap כוללים את הבאים:.

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

תכונת grid-template-areas 

 1.grid-template-areas-container {
 2    display: grid;
 3    grid-template-columns: 1fr 2fr; /* 2 columns */
 4    grid-template-rows: auto auto;  /* 2 rows */
 5    grid-template-areas:
 6      "header header"
 7      "sidebar content"
 8      "footer footer"; /* In the 3rd row, the footer spans across */
 9    gap: 10px;
10    height: 250px;
11}
12
13.grid-template-areas-container div {
14    width: 100%;
15    height: 100%;
16}
17
18.grid-template-areas-header {
19    grid-area: header; /* Placed in the "header" area */
20    background-color: lightblue;
21}
22
23.grid-template-areas-sidebar {
24    grid-area: sidebar; /* Placed in the "sidebar" area */
25    background-color: lightslategray;
26}
27
28.grid-template-areas-content {
29    grid-area: content; /* Placed in the "content" area */
30    background-color: lightskyblue;
31}
32
33.grid-template-areas-footer {
34    grid-area: footer; /* Placed in the "footer" area */
35    background-color: lightsteelblue;
36}

תכונת grid-template-areas מספקת דרך לתת שמות לאזורים בתוך מיכל גריד ולהשתמש בשמות אלו למיקום קל של אלמנטים בגריד. שימוש בתכונה זו מאפשר הגדרות פריסה אינטואיטיביות מבחינה חזותית.

אלמנטים הממוקמים באזורים ששמם נקבע ב-grid-template-areas צריכים לקבל את אותו השם באמצעות תכונת grid-area. גם אם אלמנטים מתפרסים על פני כמה תאים, הם ממוקמים אוטומטית בצורה נכונה.

בדוגמה זו, הגריד נוצר כך:.

  • בשורה הראשונה, "header" ממוקם לאורך שתי עמודות.
  • "Sidebar" ממוקם בצד שמאל ו-"content" בצד ימין בשורה השנייה.
  • "Footer" ממוקם לאורך שתי עמודות בשורה השלישית.

שימוש בסיסי 

1grid-template-areas:
2    "area1 area2 area3"
3    "area1 area4 area5";

בתכונת grid-template-areas, שם האזור מצוין עבור כל שורה. על ידי מיקום אלמנטים באזורים עם שמות שהוקצו להם, ניתן ליצור פריסות בקלות. - בדוגמה זו, נוצר גריד עם 2 שורות ו-3 עמודות, וכל תא נקרא area1, area2, וכן הלאה.

הגדרת תאים ריקים באמצעות . 

1grid-template-areas:
2  "header header header"
3  "sidebar . content"
4  "footer footer footer";

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

היתרונות של התכונה grid-template-areas

היתרונות של תכונת grid-template-areas כוללים את הנקודות הבאות.

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

הערות

בעת השימוש בתכונת grid-template-areas, חשוב לשים לב לנקודות הבאות.

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

inline-grid 

 1.inline-grid-container {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6}
 7.inline-grid-item {
 8    background-color: lightskyblue;
 9    width: 50px;
10    padding: 0;
11    margin: 0;
12}

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

מקרי שימוש עבור inline-grid

inline-grid אינו נפוץ כמו grid, אך ניתן להשתמש בו ביעילות במצבים ספציפיים.

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

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

1<button class="inline-grid">
2    <span>Icon</span>
3    <span>Text</span>
4</button>

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

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

יישור ומידות של inline-grid 

1.inline-grid {
2    display: inline-grid;
3    vertical-align: middle;
4}
  • כמו אלמנטים אינליינים אחרים, inline-grid שומר על יישור אנכי ביחס לתוכן שסביבו. ניתן לשלוט ביישור של הגריד באמצעות תכונת vertical-align.
1.inline-grid {
2    display: inline-grid;
3    width: 200px;
4    height: 100px;
5}
  • לגבי הגודל, אלמנט inline-grid תופס רק את הרוחב שנדרש לתוכן הרשת שלו. במידת הצורך, ניתן להגדיר במפורש את הרוחב, הגובה והממדים המינימליים/מקסימליים.
1.inline-grid {
2    display: inline-grid;
3    grid-template-columns: auto 1fr;
4}

גם סידור הרשת עצמו יכול לקבוע את גודל מיכל ה-inline-grid, והמגמה הזו חזקה יותר כאשר משתמשים ביחידות גמישות כמו fr, auto ואחוזים.

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

YouTube Video

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