באמצעות CSS ב-HTML נוכל לארגן פריטים בתצוגת רשת – Grid Layout שלה שורות ועמודות וכך נוכל לסדר את הפריטים בצורה נוחה ומאורגנת
בפרק האחרון של המדריך הבסיסי ל-HTML קראנו קצת על השינויים שנכנסו עם הגעת 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;
}
כעת התוצאה נראית יותר קרובה למה שרצינו:
- בשורה 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 example 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;
}
כעת נוכל לקבל דף אינטרנט שנראה כך:
בפרק הבא של המדריך נלמד על Flexbox – כלי layout נוסף שנוכל לארגן באמצעותו פריטים על גבי דף HTML.
לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן
