במהלך הבנייה של אפליקציית אינטרנט, אחד הדברים הראשונים שדרושים לכם הוא הדרך לפרוס את התוכן של האפליקציה.
מעצבים רבים משתמשים במשבצות מדומה כדי לפרוס תוכן באתר או באפליקציה. בקבוצת ה-CSS השקיעו מאמצים רבים כדי להפוך את הפריסות לקלות יותר, וכחלק מזה שיצרנו את מודול פריסת הרשת של CSS, שמופיע עכשיו בדפדפנים.
התכונה הזו זמינה להתנסות ב-Chrome מאחורי דגל ניסיוני. הוא מוטמע גם ב-IE מגרסה 10, וסביר להניח שיופיע ברוב הדפדפנים בקרוב.
תקציר מנהלים
- פריסת רשת CSS מאפשרת להגדיר שורות ועמודות לפריסה
- הרשתות יכולות להתאים את עצמן לשטח הזמין
- סדר התוכן יכול להיות בלתי תלוי בסדר התצוגה של קונטיינרים ברשת
- הפריסות יכולות להשתנות בהתאם לשאילתות מדיה, מה שמקל על העיצוב הרספונסיבי
- התוכן יכול להיות חופף (הפעלת פריסה בלתי אפשרית בשיטות אחרות)
- פריסת הרשת מהירה
יש סרטון סקירה כללית שמסביר הרבה על אופן הפעולה של פריסת רשת של CSS (השקפים זמינים כאן:
אני רוצה לנסות
עכשיו קל להשתמש בפריסת רשת של CSS ב-Chrome. הדבר הראשון שצריך לעשות הוא להפעיל את התכונה הניסיונית והניסיונית כדי להפעיל אותה.
קודם כול טוענים את כתובת ה-URL chrome://flags וגוללים למטה לאפשרות הפעלת תכונות ניסיוניות של פלטפורמת האינטרנט, כפי שמוצג בהמשך:
פשוט לוחצים על הפעלה כדי להפעיל את התכונה הניסיונית. אמורה להופיע הודעה לגבי הפעלה מחדש של הדפדפן שנראה כך:
עכשיו פשוט לוחצים על הלחצן הפעלה מחדש עכשיו כדי להפעיל מחדש את הדפדפן. תוכלו לנסות את פריסת הרשת של CSS.
דעתכם חשובה לנו
פריסת רשת CSS היא פרימיטיבי חדש ונהדר לתוכן באינטרנט, אבל כמו תמיד, נשמח לשמוע מה המפתחים חושבים על זה. יש הרבה דרכים לתת משוב - כאן אפשר לכתוב תגובה, לשלוח אימייל לרשימת קבוצת העבודה של W3C CSS ולציין '[css-grid]' בשורת הנושא, לתעד באגים או לשלוח ציוץ בבלוג. נשמח לראות את הפריסות הנהדרות שתיצרו באמצעות התכונה החדשה המועילה הזו.