גריד

כמה הגדרות הכי חשובות

הגדרות של גריד

display:grid;
grid-template-columns:2fr 1fr;
grid-template-rows:auto 1fr;

 

המון שיטות איך למקם גריד

הגדרה מאיפה עד איפה תופס הגריד

 

grid-column:2/4
grid-row:2/3

 

אם רוצים לספור מהסוף עושים במינוס

הספירה תיעשה מהקו הראשון עד האחרון ז"א שאם יש לנו 3 תאים אז יהיה לנו 4 קווים

אם לא מוסיפים קו סיום הוא מוסיף עוד 1

 

השיטה שאיתה משתמשים בדר"כ הכי חשוב

מציירים מפה עם שמות אקראיים של מה שאנחנו רוצים

כמובן לפי ה grid-template-columns שקבענו

ומכניסים ל div העוטף

grid-template-areas:"header header"
          "title sidebar"
          "main sidebar"
          "footer footer";

 

אח"כ מחברים את המפה לקלאסים שיש לנו בדף

למשל יש html כזה

<div class="site">
  <header class="myheader">header</header>
  <h1 class="mytitle">title</h1>
  <main class="content">CONTENT</main>
  <aside class="sidebar">sidebar</aside>
  <footer class="footer">main footer</footer> 
</div>

css:
.myheader { background:red; grid-area:header; }
.mytitle { background:black; grid-area:title; }
.main  { background:red; grid-area:main; }
.sidebar { background:black; grid-area:sidebar; }
.footer { background:black; grid-area:footer; }

 

z-index אוטומטי מוגדר בגריד לא צריך פוזישיין

grid-aouto-row

מגדיר גובה לשורות שנוצרות אוטומטית ולא הגדרנו להם גובהה

grid-auto-rows:100px;
grid-auto-rows:minmax(100px,auto);

שתי דוגמאות בשורה הראשונה אני מגדיר גובה קבוע

בשניה אני מגדיר שמינימום יהיה 100 אחרת שיתן גובה אוטומטי לפי התוכן

 

יכול להיות גם grid-auto-columns:100px;

לשורות שנוצרות אוטומטית שזה יכול לקרות אם מגדירים לפני זה

gid-auto-flow:column;

שזה אומר שהאייטמים יסתדרו בשורה ואם יש אייטם שלא מוגדר הוא יתווסף בשורה אחר כך

 

אם אין מקום מתמקם איפה שיש חורים

gid-auto-flow:dense;

 

סרטון הסבר על הכל של אלעד שכטר מומלץ.