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