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