פריסת רשת CSS של Holy Grail - קוד מוכן
עצב פריסות CSS Grid באופן חזותי: הגדר עמודות, שורות ופערים, ולאחר מכן הקלד שמות אזורים בתאים כדי לבנות אזורי רשת-תבנית - עם תצוגה מקדימה חיה ו-CSS ו-HTML הניתנים להעתקה.
תוצאה
דף זה פותח את מחולל הרשת שנטען מראש בפריסת הגביע הקדוש: שלוש עמודות ושלוש שורות, עם כותרת עליונה ותחתונה על פני כל הרוחב ושורה ניווט/ראשית/צידה ביניהן. שורת הכותרת משתמשת בגובה אוטומטי, השורה האמצעית ממלאת את החלל הנותר, ושתי העמודות הצדדיות קבועות ב-200px בעוד העמודה הראשית לוקחת את השאר.
פריסת הגביע הקדוש זכתה לשמה מכיוון שבאמת היה קשה לבנות אותה בצורה מהימנה לפני CSS Grid - שנים של פריצות לצוף, פריסות שולחן ומיקום מוחלט ניסו לזייף את הצורה המדויקת הזו. עם אזורי תבנית-רשת הוא מתמוטט לחמישה אזורים בעלי שם וקומץ גדלי מסלולים, וזו הסיבה שהיא נותרה הדוגמה הראשונה הסטנדרטית להוראת CSS Grid.
כל מספר ופער בעמוד זה עדיין פעילים: כוונן את העמודות הצדדיות, הוסף שורה רביעית, או שנה שם אזור והתצוגה המקדימה ועדכון ה-CSS הניתן להעתקה באופן מיידי. העתק את בלוקי ה-CSS וה-HTML היישר לפרויקט שלך - הכל פועל באופן מקומי בדפדפן שלך, שום דבר לא מועלה.