המדריך הבסיסי ל-CSS ב-HTML – פרק ו' – Grid Layout

באמצעות CSS ב-HTML נוכל לארגן פריטים בתצוגת רשת – Grid Layout שלה שורות ועמודות וכך נוכל לסדר את הפריטים בצורה נוחה ומאורגנת

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

HTML5
HTML5

אם נרצה לארגן את האתר שלנו בתצורה דומה, נוכל להשתמש ב-Grid.

קובץ ה-HTML

צרו מסמך HTML לפי הדוגמא הבא:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
</head>
<body>
 
<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>
 
</body>
</html>

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

קובץ ה-CSS

על מנת לארגן את הדברים בתצורת רשת, נגדיר את הסגנון בקובץ CSS נפרד:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

כעת התוצאה נראית יותר קרובה למה שרצינו:

CSS in HTML - Grid Layout
CSS in HTML – Grid Layout
  • בשורה 8 הגדרנו את המיכל (container) של ה-grid.
    עשינו זאת על ידי שימוש בתכונה – dispay:grid.

 

  • בשורות 1-5 נתנו לכל פריט שם ייעודי לצורכי שימוש ה-grid.
    השתמשנו בתכונה grid-area על מנת לתת שמות לפריטים:

    header, menu, main, right ו-footer.
    נשתמש בשמות אלה כאשר נסדר את חלוקת התאים בהתאם לרצוננו.

 

  • את חלוקת השורות והעמודות כראות עינינו ביצענו בשורות 9-12,
    כאשר השתמשנו בשמות הפריטים שנתנו לכל grid-area לפני כן בשורות 1-5.
    ראו כיצד סידרנו אותם, ממש כפי שהיינו רוצים לראות את התצורה הסופית.
    הרשת מסודרת כך שיש לה 6 עמודות ו-3 שורות.
    איחוד בין תאים מתבצע באופן אוטומטי בהתאם לסידור זה,
    ומשום כך אנו רואים 3 עמודות בלבד בדף האינטרנט שלנו.

 

  • בשורה 18 השתמשנו בסלקטור המיוחד – element > element.
    נשתמש בו כדי לבחור כל אלמנט שההורה שלו הוא div.
    כלומר שהתחביר – grid-container > div. מתייחס לכל אלמנט כזה במיכל שלנו.
    וכך נתנו עיצוב אחיד לפריטי הרשת השונים.

 

מילוי התוכן ב-Grid שיצרנו

כעת, כל שנותר לנו לעשות הוא למלא את הדף בתוכן רלוונטי על מנת לקבל תמונת שלד אתר.
נעשה זאת בהתאם לאזורים השונים, כלומר שנשים תגיות רלוונטיות באזורים השונים:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="my_style.css">
    <meta charset="utf-8" />
    <title>Hello, World!</title>
</head>
<body>
<div class="grid-container">
  <div class="item1">
    <h1 style="text-shadow:0 0 5px #0000FF;">An exemple of grid cointainer</h1>
  </div>
  <div class="item2">Menu<br/><br/><br/>
    <ul>
        <li><a href>Category 1</a></li><br/>
        <li><a href>Category 2</a></li><br/>
        <li><a href>Category 3</a></li><br/>
        <li><a href>Category 4</a></li><br/>
        <li><a href>Category 5</a></li><br/>
    </ul>
  </div>
  <div class="item3">
      <article>

          <section>
          <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.<br/> 
          Voluptas alias rem iusto asperiores exercitationem ducimus soluta at, <br/>
          sapiente fugit velit illo quam nobis perspiciatis ex? Excepturi minus id ad nihil!<br/>
          </p>
        </section>

        <section>
          <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br/>
          Voluptas alias rem iusto asperiores exercitationem ducimus soluta at, <br/>
          sapiente fugit velit illo quam nobis perspiciatis ex? Excepturi minus id ad nihil!<br/>
          </p>
        </section>

          <section>
          <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br/>
          Voluptas alias rem iusto asperiores exercitationem ducimus soluta at, <br/>
          sapiente fugit velit illo quam nobis perspiciatis ex? Excepturi minus id ad nihil!<br/>
          </p>
        </section>

        <section>
          <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. <br/>
          Voluptas alias rem iusto asperiores exercitationem ducimus soluta at, <br/>
          sapiente fugit velit illo quam nobis perspiciatis ex? Excepturi minus id ad nihil!<br/>
          </p>
        </section>

      </article>
  </div>  
  <div class="item4"><br/><br/>
      <img src="logo.png" style="height: 50px; width: 100px;"><br/><br/><br/>
      <img src="logo.png" style="height: 50px; width: 100px;"><br/><br/><br/>
      <img src="logo.png" style="height: 50px; width: 100px;"><br/><br/><br/>
      <img src="logo.png" style="height: 50px; width: 100px;">

  </div>
  <div class="item5">
    <p>
        all rights reserverd to anyone who wants them since 1902
      </p>
  </div>
</div>

</body>
</html>

שימו לב כי אם לא ניתן סגנון לטבלה ששמנו באזור ה-menu,
היא תופיע בתצוגתה הרגילה – פחות מתאים לנו.
לכן נוסיף את הקטע הבא לקובץ ה-CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

כעת נוכל לקבל דף אינטרנט שנראה כך:

CSS in HTML - Grid Layout
CSS in HTML – Grid Layout

בפרק הבא של המדריך נלמד על Flexbox – כלי layout נוסף שנוכל לארגן באמצעותו פריטים על גבי דף HTML.
לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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