מחולל רשת CSS

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

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

עמודות-פער ו-שורות-פער ברירת המחדל ל-8 פיקסלים ומתאחדים לקו פער בודד כשהם תואמים, ורשת התצוגה המקדימה החיה תמיד משקפת את מסלולי ה-grid-template-columns ו-grid-template-שורות, כולל עמודות פיקסלים קבועות מהגדרה מראש כמו מסילות הצד של הגביע הקדוש של 200px. הפלט הניתן להעתקה מכסה את שני הצדדים: גוש CSS מוכן לגיליון הסגנונות שלך ושלד HTML תואם עם div אזורי רשת אחד לכל אזור עם שם.

Grid ו-flexbox פותרים בעיות פריסה שונות, וה-css-flexbox-generator באתר זה מהווה נקודת התחלה טובה יותר לפריסות חד-ממדיות - שורה או עמודה בודדת של פריטים גמישים כגון סרגל ניווט או ערימת כרטיסים. פנה אל מחולל הרשת הזה במקום זאת כאשר אתה זקוק לשליטה דו מימדית, שורות ועמודות מפורשות, או אזורים בעלי שם כמו כותרת עליונה/נווט/ראשי/תחתונה; שני הכלים מגיעים לרוב באותו עמוד, רשת עבור מעטפת הדף ו-flexbox בתוך חלקיו. כמו כל כלי באתר זה, הוא פועל כולו בדפדפן שלך - ללא העלאה, ללא חשבון.