כל מאפייני הגריד הנפוצים, מקובצים לפי היכן שהם חלים: על המכולה, על הפריט ועל יחידות המידה. כל שורה מלווה את המאפיין בערכיו הנפוצים.
גריד מסדר אלמנטים בשני ממדים: שורות ועמודות בו-זמנית. הגדירו display: grid על ההורה, הגדירו מסלולים עם grid-template-columns ו-grid-template-rows, והניחו את הילדים בתאים. השתמשו בגריד לפריסות עמוד וכרטיסים; השתמשו בפלקסבוקס לסרגלים חד-ממדיים. השניים משתלבים בחופשיות.
טבלת עיון · 33 ערכים
גריד CSSExplained
33 of 33 rows
מכולה
grid | inline-grid
הופך את האלמנט למכולת גריד.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
מגדיר את העמודות ואת רוחבן.
auto 1fr auto
מגדיר את השורות ואת גובהן.
[main-start] 1fr [main-end]
נותן שמות לקווי הגריד בתבנית וממקם פריטים לפי השמות האלה.
1rem | 8px 16px
ריווח בין שורות ועמודות.
"header header" "nav main"
נותן שמות לתאים לצורך מיקום קריא.
"head head" 64px "nav main" 1fr / 200px 1fr
מגדיר שורות, עמודות ואזורים בקיצור אחד.
repeat(2, 1fr) / auto-flow 80px
מגדיר את כל מאפייני המסלול ואת grid-auto-flow בהצהרה אחת.
minmax(80px, auto)
מגדיר את גובה השורות שהתבנית אינה מגדירה.
120px | minmax(0, 1fr)
מגדיר את רוחב העמודות שהתבנית אינה מגדירה.
row | column | row dense
קובע את הציר לפריטים שלא מוקמו; dense ממלא פערים מוקדמים יותר.
start | center | end | stretch
מיישר כל פריט בתוך התא שלו לאורך ציר השורות.
start | center | end | stretch
מיישר כל פריט בתוך התא שלו לאורך ציר העמודות.
center | start end
מגדיר את align-items ו-justify-items בהצהרה אחת.
start | center | space-between
מיישר את רשת המסלולים בתוך המכולה לאורך ציר השורות.
start | center | space-between
מיישר את רשת המסלולים בתוך המכולה לאורך ציר העמודות.
center | end start
מגדיר את align-content ו-justify-content בהצהרה אחת.
פריט
1 / 3 | span 2
ממקם פריט על עמודות או פורש על פני כמה מהן.
1 / 2 | span 3
ממקם פריט על שורות או פורש על פני כמה מהן.
grid-column: 2 / -1
סופר קווים מסוף הגריד; -1 הוא הקו האחרון.
header | 1 / 1 / 2 / 3
נותן שם לפריט או ממקם אותו במלואו בקיצור אחד.
start | center | end | stretch
מיישר פריט בודד זה בתוך התא שלו לאורך ציר השורות.
start | center | end | stretch
מיישר פריט בודד זה בתוך התא שלו לאורך ציר העמודות.
center | start end
מגדיר את align-self ו-justify-self בהצהרה אחת.
יחידות מידה
1fr | 2fr
חלק יחסי מהמרחב הפנוי במסלול.
auto | 1fr auto
ממדד מסלול לפי התוכן שלו; יישור יכול למתוח אותו.
min-content | max-content
ממדד מסלול לפי התוכן הקטן או הגדול ביותר שלו.
fit-content(180px)
ממדד מסלול לפי התוכן שלו אך לעולם לא מעבר לתקרה הנתונה.
minmax(200px, 1fr)
מגביל מסלול בין מינימום למקסימום.
repeat(4, 1fr)
חוזר על תבנית מסלולים בלי להקליד כל אחד מהם.
repeat(auto-fit, minmax(120px, 1fr))
מוסיף כמה מסלולים שנכנסים; auto-fit מקפל את הריקים.
grid-template-columns: subgrid
גורם לגריד מקונן לשתף את המסלולים ושמות הקווים של ההורה.
grid-template-rows: masonry
ניסיוני: אורז פריטים בעמודות לפי גובה במקום שורות קבועות.