ניתן להגדיר רשת כקבוצה מצטלבת של קווים אנכיים ואופקיים. פריסת רשת CSS מפרידה עמוד למקטעים עיקריים. Grid Property מציע מערכת פריסה מבוססת רשת הכוללת שורות ועמודות. זה מקל על עיצוב דפי אינטרנט מבלי להתמקם ולצף. פריסת הרשת נותנת לנו דרך ליצור מבני רשת המתוארים ב-CSS, לא ב-HTML.

בדומה לטבלה, זה מאפשר למשתמש ליישר את האלמנטים לשורות ועמודות. אבל בהשוואה לטבלאות, קל לעצב פריסה עם רשת ה-CSS. אנו יכולים להגדיר עמודות ושורות ברשת על ידי שימוש רשת-תבנית-שורות ו עמודות-תבנית-רשת נכסים.

ניתן ליצור מיכל רשת על ידי הצהרת ה- תצוגה: רשת אוֹ תצוגה: רשת מוטבעת על אלמנט. מיכל רשת מכיל את הפריטים של רשת הממוקמים בתוך השורות והעמודות.

Grid v/s Flexbox

זו שאלה נפוצה שעולה בדרך כלל שאיך הרשת שונה מה-flexbox. הרשת מיועדת לפריסות דו-ממדיות (שורות ועמודות בו-זמנית), בעוד שה-flexbox משמש לפריסות החד-ממדיות (בשורה או בעמודה). Flexbox משמש כאשר כל דבר צריך להיות בקו ישר.

Flexbox משמש לסידור האלמנטים בעמודה אחת או בשורה אחת. מצד שני, הרשת היא הטובה ביותר לסדר את האלמנטים בעמודות ובשורות המרובות.

בואו נבין את הרשת ב-CSS באמצעות דוגמה.

דוגמא

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

תְפוּקָה