מבוא למודול פריסת רשת ה- CSS

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

פריסת הרשת אינה תלויה במיקום של אלמנטים בסימון, ומכאן, אתה יכול לדשדש את מיקומי האלמנטים בסימון מבלי לשנות את הפריסה. במודל הרשת, רכיב מיכל הרשת הוא מחולקים לרשתות ושורות (הידוע באופן קולקטיבי רשת רצועות) על ידי קווי רשת. עכשיו בואו נראה איך ליצור רשת מדגם.

תמיכה בדפדפן

נכון לכתיבת מאמר זה, מודול ה- CSS Grid נתמך רק על ידי דפדפן IE האחרון ו- Edge. רשת ה- CSS היא בשלב ניסיוני בדפדפנים העיקריים האחרים שבהם אתה צריך הפעל את התמיכה באופן ידניYou

• Firefox: הקש Shift + F2, הזן את הפקודה הבאה אל סרגל הקלט GCLI שהופיע בתחתית הדפדפן: pref set layout.css.grid.enabled נכון.
• Chrome: עיין ב- chrome: // flags כתובת האתר והפעל תכונות פלטפורמת אינטרנט ניסיונית.

כל התמיכה העיקרית הדפדפן עשוי לבוא מוקדם / אמצע 2017.

רשת מדגם

ל להפוך רכיב לתוך מיכל רשת אתה יכול להשתמש אחד משלושת אלה להציג נכסיםYou

1. תצוגה: רשת; - האלמנט הוא מומרים למכל רשת
2. הצג: inline-grid; - האלמנט הוא להמרה למכל רשת בתוך שורה
3. הצג: subgrid; - אם האלמנט הוא פריט רשת הוא הוסב ל subrid כי מתעלם תבנית רשת ופער מאפייני הרשת

בדיוק כמו שולחן מורכב תאים מרובים בטבלה, רשת היא המורכב של תאים מרובים ברשת. פריט רשת הוא שהוקצו קבוצה של תאים ברשת כי הוא המכונה באופן קולקטיבי אזור רשת.

אנחנו הולכים ליצור רשת עם חמישה חלקים (שטחי רשת): למעלה, למטה, שמאלה, ימינה ומרכז. HTML מורכב חמש divs בתוך div מכולה.

 
 
חלק עליון
 
שמאלה
 
מרכז
 
ימין
 
למטה
 
 

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

ה רשת שמות האזור הם להיות הפניה על ידי אזור רשת רכוש של פריטים בודדים ברשת.

 .מיכל רשת width: 500px; גובה: 500px; תצוגה: רשת; grid-template-areas: "top top top" "left center right" "תחתית תחתית תחתית"; . grid-top grid-area: top; . grid-bottom grid-area: bottom; . grid-left grid-area: left; . grid-right grid-area: right;  .Gid-centre grid-area: center;  

אז קוד זה יוצר רשת עם שלוש שורות ועמודות. ה חלק עליון פריט תופסת שטח המשתרע על פני שלוש עמודות בשורה הראשונה וה בתחתית פריט מרחף מעל שלוש עמודות בשורה האחרונה. כל אחד מה שמאלה, מרכז ו ימין פריטים לוקח טור אחד בשורה האמצעית.

עכשיו אנחנו צריכים להקצות ממדים אל השורות והעמודים האלה. ה רשת-תבנית-עמודות ו רשת-תבנית שורות נכסים להגדיר את גודל המסלול הרשת (שורה או עמודה).

 .מיכל רשת width: 500px; גובה: 500px; תצוגה: רשת; grid-template-areas: "top top top" "left center right" "תחתית תחתית תחתית"; רשת תבנית עמודות: 100px אוטומטי 100px; רשת תבנית שורות: 50px אוטומטי 150px;  

כך נראית רשת ה- CSS שלנו כעת (עם כמה סגנונות נוספים):

רווח בין פריטים ברשת

אתה יכול להוסיף רווח ריק בין עמודות לשורות באמצעות רשת פער טור ו רשת פערים, או רכושם הארוכה רשת פער.

 .מיכל רשת width: 500px; גובה: 500px; תצוגה: רשת; grid-template-areas: "top top top" "left center right" "תחתית תחתית תחתית"; רשת תבנית עמודות: 100px אוטומטי 100px; רשת תבנית שורות: 50px אוטומטי 150px; פער רשת: 5px 5px;  

להלן ניתן לראות כי רשת פער רכוש הוסיף פערים בין הפריטים ברשת אכן.

יישר תוכן רשת ופריטים

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

במקרה הצורך, גודל המסלול (שורה או עמודה) מכווצים כדי להתאים את התוכן כאשר מיושר. תסתכל על צילומי מסך של תוכן הרשת מיושר עם ערכים שונים להלן.

justify-content: start;

justify-content: end;

justify-content: center;

צדק-התוכן: space-between;

justify-content: space-around;

הצדקה-תוכן: רווח-שווה;

align-content: start;

align-content: end;

align-content: center;

align-content: space-between;

align-content: space-around;

align-content: space-evenly;

גם את הצדקה-תוכן ו יישור תוכן נכסים ליישר את כל התוכן בתוך הרשת.

ל ליישר פריטים בודדים בתוך הרשת שלהם אזורים, להשתמש ב זוג אחר של תכונות יישורYou צדק- פריטים ו יישור פריטים. לשניהם יש ערך אחד: להתחיל, ח, מרכז, הבסיס (ליישר פריטים לאורך קו רשת הבסיס של האזור) ו למתוח (פריטים למלא את כל השטח).