מה זה CSS Grid?
CSS Grid Layout הוא מערכת פריסה דו-ממדית המובנית בדפדפנים מודרניים. מגדירים מיכל רשת עם display: grid, ואז שולטים בעמודות עם grid-template-columns ובשורות עם grid-template-rows. יחידות שבריות (fr) מחלקות את הרווח הפנוי באופן יחסי. פריטים ילד יכולים להתפרס על פני מספר עמודות או שורות באמצעות grid-column: span N ו-grid-row: span N.
כיצד להשתמש במחולל CSS Grid
-
הגדירו את מספר העמודות והשורות באמצעות שדות המספרים (1–12 לכל אחד).
-
כוונו את grid-template-columns ו-grid-template-rows לשליטה בגדלים (לדוגמה: 1fr 2fr, 200px auto).
-
הגדירו את הרווח בין התאים (לדוגמה: 10px, 1rem).
-
לחצו על כל תא בתצוגה המקדימה לבחירתו (הופך לכתום).
-
הגדירו col-span ו-row-span בלוח הרחבת התא, ואז לחצו על החל. תאים מורחבים הופכים לירוקים.
-
לחצו על לשונית CSS או HTML לשינוי פורמט הפלט, ואז העתיקו ללוח.
-
לחצו על אפס הכל להתחלה מחדש עם רשת 3×3 חדשה.