.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}מהו מחולל הרשת CSS?
מחולל הרשת של CSS הוא בונה חזותי עבור פריסת הרשת של CSS.אתה בוחר כמה עמודות ושורות אתה רוצה, בוחר גודל מסלול עבור כל ציר, מגדיר את הפערים ואת היישור, ורשת תצוגה מקדימה מסדרת מחדש בזמן אמת.CSS המדויק שמייצר את מה שאתה רואה יושב בתיבה מוכנה להעתקה מתחת, כך שלעולם לא תצטרך לכתוב עמודות תבנית רשת ביד או לספור יחידות שבר בראש שלך.
CSS Grid הוא מודל פריסה דו מימדי בניגוד ל-flexbox, אשר מניח פריטים לאורך ציר בודד, רשת שולטת בשורות ובעמודות בו זמנית המיכל מחזיק את המבנה דרך קבוצה קטנה של מאפיינים: רשת-תבנית-עמודות ורשת-תבנית-שורות מגדירות את המסלולים, פער מוסיף מרווחים ביניהם, ומצדיק-פריטים, מיישר-פריטים, מצדיק-תוכן ומיישר-תוכן ממקמים את הפריטים והמסלולים כלי זה חושף את המאפיינים הללו בלוח אחד ומציג את התוצאה באופן מיידי.
המחולל משתמש בפונקציית החזרה () עבור כל ציר עם יותר ממסלול אחד, כך שעמודות רשת-תבנית: חזרה (3, 1fr) היא מה שאתה מקבל עבור רשת של שלוש עמודות של עמודות שוות ולא רשימה חוזרת. יחידת fr מייצגת חלק מהשטח הפנוי במיכל, וזה מה שהופך את פריסות הרשת לנוזלות: שלוש עמודות 1fr כל אחת לוקחות שליש מהרוחב וזורמות מחדש ככל שהמיכל משתנה. אתה יכול גם לערבב רצועות אוטומטיות, מיני תוכן, מקסימום תוכן ופיקסלים קבועים מהתפריט בגודל המסלול.
הכל פועל כולו בדפדפן שלך אין הרשמה, שום דבר לא מועלה, והכלי ממשיך לעבוד במצב לא מקוון לאחר טעינת הדף. זה שימושי הן כעזר למידה, מכיוון שאתה יכול לראות כיצד כל מאפיין משנה את הפריסה, והן כדרך מהירה לייצר CSS רשת מוכן לייצור עבור גלריה, לוח מחוונים, פריסת כרטיס או מעטפת עמוד מלא. הכלל שנוצר מכוון למחלקת.grid-container ומפרט רק את המאפיינים בעלי השפעה גלויה, כך שהפלט נשאר נקי.
כיצד להשתמש במחולל הרשת של CSS?
הגדר עמודות ושורות
בחר כמה עמודות ושורות צריכות להיות לרשת וצפה בתצוגה המקדימה בונה את התאים.
בחר גדלי מסלול
בחר גודל עבור העמודות והשורות, כגון 1fr, אוטומטי, תוכן מינימלי או ערך פיקסל קבוע.
כוונון פערים ויישור
הגדר את פערי השורות והעמודות, ולאחר מכן התאם את הצדקה ויישור למיקום פריטים ומסלולים.
העתק את ה-CSS
העתק את כלל הרשת שנוצר והדבק אותו בגיליון הסגנונות שלך, או המשך לשנות את התצוגה המקדימה.
תכונות מפתח
תצוגה מקדימה חיה
רשת אמיתית זורמת מחדש כשאתה משנה עמודות, שורות, גדלי מסלולים, פערים ויישור.
חזור() פלט
צירים מרובי מסלולים משתמשים בערכי תבנית רשת קצרים וקריאה במקום רשימות חוזרות.
fr ומסלולי תוכן
בחר יחידות שבר, אוטומטי, תוכן מינימלי, תוכן מקסימלי או פיקסלים קבועים עבור כל ציר.
הפרד פערי שורות ועמודות
הגדר פערים באופן עצמאי; הכלי פולט את קיצור הפער או ערך בודד באופן אוטומטי.
Frequently Asked Questions
Related Tools
CSS Animation Generator
Build CSS keyframe animations from presets like fade, slide, bounce and spin. Adjust duration, easing, delay, iteration and direction, preview live, then copy the keyframes and animation shorthand.
CSS Transform Generator
Build a CSS transform from translate, rotate, scale, skew and 3D perspective with live sliders and a preview, then copy production-ready code.
CSS Transition Generator
Build a CSS transition from property, duration, timing function and delay with a live hover preview, then copy production-ready code. Supports multiple layers.
JWT Generator
Generate and sign JSON Web Tokens with HS256, HS384, or HS512, add standard claims, and copy the token. Runs client-side.
Comments
0 comments
No comments yet. Be the first to share your thoughts!