מחולל CSS Grid

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

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

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

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