מגרש משחקים ל-CSS Grid

כל הכלים

הרכב באופן חזותי תבניות CSS Grid, מרווחים ומיקום, ואז העתק את קוד ה-CSS של הפריסה.

תצוגה מקדימה

לחץ על פריט ממוספר ברשת כדי לבחור ולמקם אותו מחדש.

grid-template-columns —
grid-template-rows —
CSS שנוצר
—
—
עמודות
שורות
מרווחים
16px
16px
יישור
פריטי הרשת
פריט 1
הגדרות מוכנות

אודות מגרש משחקים ל-CSS Grid

CSS Grid Playground מרכיב פריסות grid אמיתיות באופן חזותי. הוסיפו והסירו מסלולי עמודות ושורות כדי לעצב את grid-template-columns ו-grid-template-rows, קבעו את המרווחים בין העמודות והשורות, וכוונו את כל ארבע תכונות היישור — justify-items, align-items, justify-content ו-align-content — בעוד התצוגה המקדימה משתקפת מייד עם כל שינוי.

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

שלוש תבניות מוכנות — holy grail, לוח בקרה וגלריה — טוענות מבני עמוד קלאסיים שאפשר לנתח ולהתאים. כשהפריסה נראית נכון, העתיקו את קוד ה-CSS שנוצר, הכולל את כל כללי מיכל ה-grid ומיקומו של כל פריט.

כיצד להשתמש ב-מגרש משחקים ל-CSS Grid

  1. הוסיפו או הסירו מסלולי עמודות ושורות כדי להגדיר את תבנית ה-grid.
  2. קבעו את המרווח בין העמודות ובין השורות.
  3. כווננו את בקרי היישור: justify-items, align-items, justify-content ו-align-content.
  4. הוסיפו פריטים, לחצו על אחד בתצוגה המקדימה, וקבעו את התחלת/פרישת העמודה והשורה שלו כדי למקם אותו.
  5. טענו את התבנית holy grail, לוח הבקרה או הגלריה כדי ללמוד פריסה קלאסית.
  6. העתיקו את קוד ה-CSS שנוצר לגיליון הסגנונות שלכם.

שאלות נפוצות

justify-items מיישר כל פריט בתוך התא שלו ב-grid; justify-content מיישר את כל ה-grid בתוך המיכל כאשר המסלולים אינם ממלאים אותו. אותה הבחנה חלה אנכית עם align-items מול align-content.

בחרו את הפריט והגדילו את מספר העמודות שהוא נפרש עליהן — פלט ה-CSS משתמש ב-grid-column עם ערך span. בשילוב עם פרישת שורות אפשר לבנות סרגלי כותרת, סרגלי צד ותאי תוכן גדולים באותו grid.

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

Grid מצטיין בפריסות דו-ממדיות שבהן שורות ועמודות חייבות להתיישר — שלד עמוד, לוחות בקרה, גלריות. Flexbox מתאים ביותר לזרימות חד-ממדיות כמו סרגלי כלים ותפריטים. הם משתלבים היטב: grid לעמוד, flex בתוך רכיבים.

כן, היא חינמית ופועלת בדפדפן — התנסו כמה שתרצו, ושום דבר שתיצרו לא עוזב את המחשב שלכם.
שתף זאת
כלים קשורים
בונה חתימת אימייל עצב חתימת אימייל HTML מקצועית מ-30 תבניות, התאם אישית ושמור. חינם
אייקון ל-PNG המר Bootstrap Icons, Font Awesome ועוד לתמונות PNG מותאמות אישית — בחינם, בדפדפן שלך. חינם
מחולל אייקוני אפליקציה צור סט אייקוני אפליקציה שלם ומוכן לחנות עבור App Store ו-Google Play — גרדיאנט פרימיום, רקעי mesh ותבניות, נבנה מהלוגו שלך. חינם
מחולל Favicon בנה חבילת favicon שלמה מלוגו, אייקון גופן או מונוגרמה — favicon.ico, קובצי PNG מודרניים, אייקון Apple touch, אייקוני PWA, מניפסט ווב וקטע HTML. חינם
מחולל CSS Box Shadow צור box-shadows מרובדות ב-CSS עם מחוונים חיים לזז, טשטוש, פיזור, צבע, אטימות ו-inset — תצוגה מקדימה על אלמנט אמיתי והעתק CSS מוכן להדבקה מיידית. חינם
מחולל CSS Border Radius עצב border-radius של CSS באופן חזותי עם תצוגה מקדימה חיה והעתק קוד מוכן לייצור. חינם
חיפושים פופולריים
מחולל css grid css grid playground מחולל grid-template-columns מחולל פריסת css grid בונה grid-template-areas כלי grid gap ב-css ויזואליזציה של css grid
צריך עזרה?
נתקלת בבעיה בכלי הזה? ספר לצוות שלנו.
דיווח על בעיה

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