במשך שנים האינסטינקט שלי כשעיצוב קרא לפריסה דו-ממדית אמיתית היה להגיע לערימה של מיכלי פלקס מקוננים שורה של כרטיסים בתוך עמודה בתוך שורה אחרת, כל אחד מתגמש, כל אחד נלחם באחרים על שטח זה עבד, במובן שהפיקסלים נחתו בסופו של דבר איפה שרציתי, אבל זה אף פעם לא היה הכלי הנכון, ובכל פעם שהייתי צריך לשנות את העיצוב שילמתי על קיצור הדרך.CSS Grid נבנה בדיוק בשביל זה, וביום שהפסקתי להתחמק מזה קוד הפריסה שלי התקצר והסימון שלי נעשה שטוח יותר.
הדבר שהרחיק אותי מהרשת יותר מדי זמן היה התחביר. grid-template-columns: repeat(3, minmax(0, 1fr)) אינו ביטוי שמתגלגל מהאצבעות, והקשר בין המסלולים שאתה מצהיר לבין התיבות המופיעות אינו ברור עד שראית את זה קורה כמה עשרות פעמים. הפער הזה בין "אני יודע מה אני רוצה" ו-"אני מכיר את המאפיין שמייצר אותו" זה בדיוק מה שמחולל סוגר.
ה מחולל רשת CSS מאפשר לך להגדיר את מספר העמודות והשורות, לבחור גודל עבור כל ציר, לחייג את הפערים ולהתאים את היישור, כל זאת בזמן שתצוגה מקדימה חיה זורמת מחדש לפניך ה-CSS המדויק שמייצר את מה שאתה רואה יושב בתיבה מוכנה להעתקה מתחת זה הופך את הרשת ממפרט שאתה צריך לשנן לפריסה שאתה בונה על ידי לחיצה.
TL;DR: CSS Grid הוא מודל פריסה דו מימדי השולט בשורות ובעמודות בו זמנית המיכל מניע אותו
grid-template-columns,grid-template-rows,gap, והארבעה מצדיקים ומיישרים מאפיינים. מחולל זה חושף את כולם, מציג תצוגה מקדימה חיה ופולט CSS נקי שמשתמשrepeat()והfrיחידה. מכיוון שהתצוגה המקדימה מציגה עם אותן הצהרות שהיא מוציאה, מה שאתה רואה זה בדיוק מה שאתה מדביק. זה פועל כולו בדפדפן שלך ללא הרשמה.
איזו בעיה פותר מחולל רשת CSS?
הקושי עם CSS Grid הוא לא שזה מסובך זה שזה מופשט אתה מתאר מבנה ("שלוש עמודות שוות עם קצת רווח ביניהן") והדפדפן מחשב את הגיאומטריה העקיפה הזו היא כל העניין, כי זה מה שהופך רשתות להגיב ללא שאילתת מדיה אחת אבל קשה להחזיק את העקיפה בראש שלך אתה לא יכול להסתכל repeat(3, 1fr) והרגיש מיד את התוצאה כמו שאתה יכול להסתכל על רשת מעובדת של קופסאות.
גנרטור ממוטט את לולאת הכתיבה-שמירה-רענון לאינטראקציה אחת אתה משנה את ספירת העמודות ושלוש תיבות הופכות לארבע אתה מחליף מסלול מ 1fr ל auto והעמודה נצמדת לרוחב התוכן שלה אתה מעלה את הפער והקופסאות נושמות אחרי עשר דקות של זה יחידת השבר מפסיקה להיות סמל שאתה מתרגם והופכת לדבר שאתה מגיע אליו בכוונה וכשאתה מסיים לחקור, אתה לא נשאר עם פתק לתמלול, כי ה-CSS העובד כבר כתוב עבורך בתיבת הפלט.
יש יתרון שני, שקט יותר בניית הפריסה על ידי מניפולציה מאלצת את הכלי לפלוט רק CSS תקף ומעוצב היטב. אתה לא יכול לייצר שבור grid-template-columns ערך על ידי לחיצה, כך הפלט הוא תמיד משהו שאתה יכול להדביק בביטחון. האמינות הזו היא הסיבה שאני שומר קבוצה של בוני CSS חזותיים בקרבת מקום במקום לכתוב כל כלל מאפס.
באילו מאפיינים שולט מיכל הרשת?
CSS Grid, כמו flexbox, מפצל אחריות בין המכולה לפריטים שלה המכולה מגדירה את המסלולים ואת המבנה הכולל, ושם חיות רוב החלטות הפריסה, אז זה המקום שבו מתמקד הגנרטור הנה מה שכל נכס מכולה עושה.
| נכס | מה זה שולט | ערכים משותפים |
|---|---|---|
grid-template-columns |
מספר וגודל העמודות | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
מספר וגודל השורות | repeat(2, auto), 100px, 1fr |
gap |
רווח בין מסלולים | כל אורך, למשל 16px או 20px 10px |
justify-items |
מיקום הפריט לאורך ציר השורה | stretch, start, center, end |
align-items |
מיקום הפריט לאורך ציר העמוד | stretch, start, center, end |
justify-content |
מיקום המסלול כאשר הרשת צרה יותר מהמיכל שלה, על ציר השורה | start, center, space-between |
align-content |
מיקום המסלול על ציר העמוד | start, center, space-between |
המודל המנטלי שעושה את המקל הזה הוא ההבחנה בין המסלולים והפריטים. grid-template-columns ו grid-template-rows הגדירו את המסלולים, שהם הנתיבים הריקים של הרשת הפער יושב בין אותם נתיבים. ה justify-items ו align-items לאחר מכן, מאפיינים ממקמים כל פריט בתוך התא שהוא תופס, בעוד justify-content ו align-content מקם את כל סט המסלולים בתוך המיכל כאשר יש מקום פנוי הגנרטור שומר על שתי הרמות הללו נפרדות ויזואלית כך שתוכל להרגיש את ההבדל בין הזזת פריט בתוך התא שלו לבין הזזת הרשת כולה בתוך הדף.
מה המשמעות של יחידת fr?
ה fr unit היא פיסת ה-CSS Grid שמשלמת עבור כל הדגם, וכדאי להבין אותה ולא להעתיק אותה. אחד fr מייצג חלק אחד מהשטח הפנוי במיכל הרשת לאחר הפחתת גדלים ופערים קבועים. אם אתה כותב grid-template-columns: 1fr 1fr 1fr, המיכל' הרוחב הזמין מחולק לשלושה חלקים שווים. לִכתוֹב 2fr 1fr 1fr והעמודה הראשונה לוקחת חצי מהשטח בעוד השניים האחרים מפצלים את השאר הדפדפן מחשב מחדש את השברים האלה בכל שינוי גודל, וזו הסיבה שרשת מבוססת שברים היא נוזלית ללא כל נקודות שבירה.
זוהי ההתנהגות שהופכת את הרשת לעדיפה על האחוזים עבור רוב הפריסות. קבוצה של 33.33% עמודות מתעלם הפער וגולש, כי האחוזים פלוס הפערים מסתכמים יותר מאשר מיכל יחידות שבר מחושבים לאחר הפערים נלקחים החוצה, כך repeat(3, 1fr) עם פער תמיד מתאים המחולל ברירת מחדל ל 1fr עמודות בדיוק מהסיבה הזו, ותוכלו לצפות בשלוש עמודות שוות מחזיקות בפרופורציות שלהן כשאתם משנים את הפער אם אתם רוצים עמודה שמחבקת את התוכן שלה במקום, החליפו אותה ל auto, min-content, או max-content ולראות את ההבדל מיד.
איך אני עושה פריסה של שלוש עמודות?
זה אחד הדברים הנפוצים ביותר שאנשים בונים עם גריד, והמתכון הוא שתי שורות הגדר את המיכל ל display: grid ולתת אותו grid-template-columns: repeat(3, 1fr). זה מייצר שלוש עמודות שוות שזורמות לשורות רבות ככל שהתוכן צריך. הוסף א gap ויש לך פריסת כרטיס.
במחולל, אתה מגדיר את ספירת העמודה לשלוש, השאר את הגודל דולק 1fr, והתצוגה המקדימה מציגה רשת של תאים שווים. תיבת הפלט מציגה:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
הסיבה שכדאי לבנות את זה על ידי לחיצה במקום הקלדה היא שפריסות אמיתיות אף פעם לא כל כך נקיות. תרצה שסרגל הצד יהיה ברוחב קבוע והתוכן יתגמש, או שהשורה הראשונה תהיה גבוהה מהשאר. כל אחד מהשינויים האלה הוא פקד אחד במחולל וערך ערוך אחד בפלט, ואתה רואה את האפקט לפני שאתה מתחייב לגיליון סגנונות. אם אתה עדיין מחליט בין רשת לגישה מבוססת גמישות עבור בלוק מסוים, ה מחולל flexbox הוא הכלי הנלווה, וההשוואה בהמשך המדריך הזה מסבירה מתי כל אחד מנצח.
מתי עלי להשתמש ברשת על פני flexbox?
זו השאלה שהכי חשובה ברגע שמכירים את שני הדגמים, והתשובה הכנה היא שזה תלוי במספר הממדים שיש לפריסה Flexbox הוא חד מימדי הוא מסדר פריטים לאורך ציר בודד, שורה או עמודה, ועוטף אותם אם שואלים רשת היא דו מימדית היא שולטת בשורות ובעמודות יחד, כך שניתן למקם פריט גם לפי השורה שלו וגם לפי העמודה שלו בבת אחת.
הכלל המעשי שאני משתמש בו הוא זה אם אני פורס קבוצה של דברים בשורה, סרגל ניווט, שורת תגים, סרגל כלים, ערימה של שדות טופס, כלומר flexbox. אם אני פורס מבנה עם שורות ועמודות שצריכות להתיישר זו לזו, מעטפת עמוד עם כותרת, סרגל צד ואזור תוכן, או גלריה שבה כל כרטיס יושב על קו רשת נקי, כלומר רשת. השניים אינם יריבים; תא רשת מכיל לעתים קרובות מיכל גמיש, ופריט גמיש הוא לעתים קרובות רשת קטנה. הנה הפיצול כטבלה.
| שאלה | Flexbox | רשת CSS |
|---|---|---|
| מידות | ציר אחד בכל פעם | שורות ועמודות יחד |
| הטוב ביותר עבור | סרגלי כלים, nav, שורות של פריטים, תגיות עטיפה | פריסות דפים, גלריות, לוחות מחוונים, טפסים |
| גודל מונע על ידי | תוכן, ואז הפצה | תבנית המסלול שאתה מצהיר עליה |
| יישור | justify-content, align-items |
אותו פלוס justify-items, align-content |
| שימוש אופייני | בתוך תא רשת | מסגרת הדף או הקטע הכוללת |
הגנרטור עושה את הבטון הזה כי אתה יכול לבנות את אותה תוצאה חזותית לשני הכיוונים ולראות מה מייצר את הכלל הנקי יותר עבור גלריה של קלפים שווים, רשת עם repeat() הוא שני קווים ו flex הוא מיכל עטיפה עם רוחבים על כל ילד. for שורה בודדת שצריך לפזר את הפריטים שלה לקצוות, להתגמש עם space-between הוא הנתיב הקצר יותר.
מה ההבדל בין פער, להצדיק-תוכן, וליישר-תוכן?
שלושת אלה מתבלבלים לעתים קרובות מכיוון שכולם עוסקים בחלל, אך הם פועלים ברמות שונות. ה gap property מגדיר את המרווח הקבוע בין מסלולים, והוא זה שבו תשתמש כמעט בכל רשת ערך בודד מרווח שורות ועמודות באופן שווה; שני ערכים מגדירים את פער השורות ואת פער העמודות בנפרד, בשורת הסדר ואז העמודה המחולל מאפשר לך להגדיר את שני הפערים באופן עצמאי ופולט את הקיצור רק כאשר הם שונים, כך שהפלט נשאר קצר ככל שהמצב מאפשר.
justify-content ו align-content, לעומת זאת, עשה משהו רק כאשר המסלולים של grid's קטנים מהמיכל, ומשאירים מקום פנוי להפצה. אם העמודות שלך הן כולן ברוחב פיקסלים קבועים והן אינן ממלאות את המיכל, justify-content: center ירכז את כל גוש המסלולים, ו space-between ידחוף אותם לקצוות. With fr עמודות שכבר ממלאות את הרוחב, למאפיינים האלה אין מה להפיץ ונראה שהם לא עושים כלום, וזה מקור נפוץ לבלבול המחולל משמיט אותם מהפלט כשהם נשארים בברירת המחדל start, אז כל שורה בכלל המועתק היא כזו שיש לה השפעה גלויה. ההרגל הזה לפלוט רק הצהרות משמעותיות הוא אותו הרגל שאני סומך עליו ב- מחולל גרדיאנט וה מחולל box-shadow, כי כלל מלא בשורות ללא ניתוח הוא כלל שאי אפשר לסמוך עליו במבט חטוף.
איך הגנרטור שומר על התצוגה המקדימה כנה?
המלכודת עם כל בונה חזותי היא שהתצוגה המקדימה והקוד המיוצא יכולים להתרחק זה מזה כלי שמציג את התצוגה המקדימה שלו בדרך אחת ומייצר את הקוד שלו בדרך אחרת גרוע יותר מאשר חסר תועלת, כי הוא מלמד אותך פריסה שלא תשחזר מחולל זה נמנע מכך על ידי בניית הן התצוגה המקדימה והן ה-CSS המועתק מרשימה אחת של הצהרות אותה פונקציה שמחליטה אילו מאפיינים לפלוט היא זו שמעצבת את תיבות התצוגה המקדימה, אז מה שאתה רואה זה בדיוק מה שאתה מדביק אין נתיב עיבוד נפרד שיכול לא להסכים.
בחירת העיצוב הזו היא הסיבה שהפלט משתמש repeat() לכל ציר עם יותר ממסלול אחד מסלול בודד נפלט כגודל חשוף, אך שניים או יותר קורסים לתוך repeat(n, size), שזה גם מה שבן אדם היה כותב וגם מה ששומר על הכלל קריא ככל שהספירה גדלה זה דבר קטן, אבל זה ההבדל בין פלט שהיית שולח לפלט שהיית משכתב.
בניית רשת כרטיסים רספונסיבית, צעד אחר צעד
הנה זרימת עבודה שאני משתמש בה לעתים קרובות התחל עם ספירת העמודות בשלוש והגודל פועל 1fr. כעת יש לך שלוש עמודות שוות וזורמות. הגדר את גודל השורה ל auto אז כל שורה גדלה כדי להתאים את הכרטיס הגבוה ביותר שלה. להעלות את הפער למשהו נוח, בסביבות עשרים פיקסלים לכרטיסים. זו רשת כרטיסים שלמה ומגיבה, והפלט הוא ארבע שורות.
כדי לגרום לו לעטוף בעצמו ללא שאילתות מדיה, השלב הבא בפרויקט אמיתי הוא החלפה repeat(3, 1fr) עבור repeat(auto-fill, minmax(240px, 1fr)), שאומר לדפדפן להתאים כמה שיותר עמודות של 240 פיקסלים-מינימום והוא יכול למתוח אותן למילוי המחולל נותן לך את נקודת ההתחלה של הספירה הקבועה; שעריכה אחת הופכת אותו לרשת עטיפה עצמית הבנת נקודת ההתחלה היא מה שהופך את העריכה לברורה, וזה כל הטיעון ללימוד פריסה על ידי בנייתה במקום הדבקה שלה. המקרה הרחב יותר להרכבת סט כלים שעובדים כך נמצא ביצירה על ערכת כלים למפתחי אינטרנט, והרגלי זרימת העבודה מאחוריו נמצאים ב כלי פרודוקטיביות למפתחים מדריך.
אילו דפדפנים תומכים ב-CSS Grid?
CSS Grid נתמך בכל דפדפן נוכחי וכבר שנים. המאפיינים שהמחולל הזה פולט הם סטנדרטיים ולא מקודמים, כך שהפלט עובד ב-Chrome, Firefox, Safari ו-Edge ללא קידומות ספקים או נפילות עבור כל דפדפן שפרויקט מכוון אליו באופן ריאלי היום gap נכס במכולות רשת, שהיה החלק האחרון שנחת באופן נרחב, נתמך גם הוא באופן אוניברסלי כעת. זה אומר שה-CSS שאתה מעתיק מוכן לייצור כפי שנכתב, מה שלא תמיד היה נכון בשנים הראשונות של הרשת וזו אחת הסיבות לכך שהמודל הוא סוף סוף ברירת המחדל ולא שיפור מתקדם. עבור הכללים הבסיסיים, מפרט CSS Grid Layout Module Level 1 מה-W3C הוא המקור העיקרי, ושווה לקרוא אותו ברגע שהמחולל נתן לך את האינטואיציה לעקוב אחריו.
אם אתה בונה ערכת כלים ויזואלית רחבה יותר לצד זה, ה מחולל border-radius ו מחולל מהדק CSS סיים את הסט, ואת מדריך כלי קידוד אוסף את אלה שאני מגיע אליהם הכי הרבה.
שאלות נפוצות
מהו מחולל רשת CSS?
מחולל רשת CSS הוא כלי ויזואלי שבונה קוד CSS Grid Layout מהגדרות שתבחר. אתה בוחר עמודות, שורות, גדלי רצועות, פערים ויישור, והוא מוציא את תבנית הרשת CSS יחד עם תצוגה מקדימה חיה של התוצאה.
מה המשמעות של יחידת fr ב-CSS Grid?
יחידת fr מייצגת חלק קטן מהשטח הפנוי במיכל הרשת. grid-template-columns: repeat (3, 1fr) יוצר שלוש עמודות שכל אחת מהן לוקחת נתח שווה מהרוחב הזמין וזורמת מחדש ככל שהמיכל משתנה.
מה ההבדל בין CSS Grid לבין flexbox?
CSS Grid הוא מודל דו מימדי השולט בשורות ובעמודות יחד, אידיאלי עבור פריסות עמודים ורשתות כרטיסים.Flexbox הוא חד מימדי, הנחת פריטים לאורך ציר בודד, אידיאלי עבור סרגלי כלים ושורות. הם משלימים ולעתים קרובות משתמשים בהם יחד.
איך אני עושה רשת מגיבה?
השתמש ביחידות fr כך שהמסלולים חולקים את הרוחב הזמין, ומשלבים חזרה () עם minmax () ומילוי אוטומטי או התאמה אוטומטית עבור רשתות העוטפות בעצמן. גנרטור זה פולט חזרה () עם מסלולי fr כנקודת התחלה שתוכל להרחיב.
מהו מאפיין הפער ב-CSS Grid?
gap מגדיר את המרווח בין מסלולי רשת ערך בודד מרווח את השורות והעמודות באופן שווה; שני ערכים מגדירים את פער השורות ואת פער העמודות בנפרד, בסדר פער השורות ואז פער העמודות.
האם הרשת שנוצרה CSS בטוחה לשימוש בייצור?
כן. CSS Grid נתמך בכל דפדפן מודרני והכלי פולט מאפיינים סטנדרטיים ללא קידומת. כל העיבוד מתרחש בדפדפן שלך, כך ששום דבר לא מועלה והכלי עובד במצב לא מקוון לאחר הטעינה.
האם מחולל הרשת של CSS עובד בנייד?
כן הכלי מגיב באופן מלא ועובד בכל דפדפן מודרני בטלפונים, טאבלטים ומחשבים שולחניים ה-CSS שנוצר זהה ללא קשר למכשיר עליו אתה בונה אותו.
האם מחולל רשת CSS זה בחינם?
כן. זה לגמרי בחינם ללא הרשמה, ללא סימני מים וללא מגבלות שימוש. CSS הרשת שהוא מייצר הוא שלך לשימוש בכל פרויקט.
