3 עמודות שוות פריסת רשת CSS
עצב פריסות CSS Grid באופן חזותי: הגדר עמודות, שורות ופערים, ולאחר מכן הקלד שמות אזורים בתאים כדי לבנות אזורי רשת-תבנית - עם תצוגה מקדימה חיה ו-CSS ו-HTML הניתנים להעתקה.
תוצאה
דף זה פותח את ערכת מחולל הרשת לשלוש עמודות ברוחב שוות בשורה אחת, כאשר אזורים בעלי שם מנותקים - הפריסה היא פשוט חזרה (3, 1fr), הדרך הקצרה ביותר לומר "שלוש עמודות שתמיד מחלקות את הרוחב הזמין באופן שווה".
עמודות ברוחב שווה הן סוס העבודה של רשתות כרטיסים, טבלאות תמחור וגלריות תמונות: שום אזור לא צריך מתן שמות מכיוון שכל עמודה ממלאת את אותו תפקיד, כך שגודל מסלול רגיל ברור יותר מאשר הצהרת אזורי תבנית רשת. הוסף שורה ואותן שלוש רצועות חוזרות מתחתיהן, עדיין אחידות לחלוטין.
הרם את ספירת העמודות לקבלת רשת צפופה יותר, או הפעל אזורים בעלי שם אם עמודה מאוחרת יותר צריכה להתבלט מהשאר - ה-CSS וה-HTML למטה מתעדכנים ברגע שאתה עושה זאת. הכל פועל בצד הלקוח, אז אין מה להעלות ואין מה לחכות.