⭐ 0
🔍
טקסט תמונה PDF ומסמכים אודיו מוזיקה אלקטרוניקה זמן כלי עזר מאמתים אזוטרי משחקים

סרגל צד + פריסת רשת CSS של תוכן

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

הקלד שם בכל תא למטה; תאים בעלי אותו שם מתמזגים לאזור אחד של רשת-תבנית-אזורים.

מעבד... 0%

תוצאה

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

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

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

🛡️
מבוצע בדפדפן

הקבצים והקלטות שלך לעולם לא עוזבים את המכשיר הזה. העיבוד פועל באופן לא מקוון לחלוטין. 100% מאובטח.

פורמטים וכללים מקובלים

  • קלט מספרים עבור 1–6 עמודות ושורות, בתוספת פקדים נפרדים של פערי עמודות ופערים בשורות שמתאחדים לערך פער אחד כאשר הם תואמים.
  • מצב שמות אזורים: הקלד שם אזור ישר לתוך כל תא של הרשת החיה; הכלי בונה מחרוזת רשת-תבנית-שטחים חוקית ומזהיר כאשר שמות אינם יוצרים מלבנים נקיים.
  • בלוק CSS הניתן להעתקה (תצוגה: רשת, גריד-template-columns/rows, gap, grid-template-areas) בתוספת שלד HTML תואם עם גריד-area div אחד לכל אזור עם שם.

יתרונות מרכזיים

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

מקרי שימוש

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