מדריך לרשת CSS: שליטה בפריסות עם מאפייני רשת

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

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

מכולות ופריטים ברשת

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

כך הוא מיוצג:

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

כל אחת מהרשתות הללו פועלת ללא תלות באחרת, כלומר המאפיינים שנקבעו עבור רשת פנימית אינם משפיעים על פריסת הרשת החיצונית, ולהיפך.

כך זה נראה:

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

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

קווי רשת ומסלולים

לפני שתתחיל להשתמש ברשת ה-CSS, ישנם שני מונחי מפתח שאתה צריך להכיר:

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

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

CSS Grid Container Properties

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

תבנית רשת

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

• רשת-תבנית-שורות: מגדיר את גובה השורות.
• עמודות-תבנית-רשת: מגדיר רוחב עמודות.

הנה כמה דוגמאות:

שימוש בפיקסלים:

.grid-container {
display: grid;
grid-template-columns: 250px 250px 250px;
grid-template-rows: 250px 250px;
}

שימוש באחוזים:

.grid-container {
grid-template-columns: 25% 50% 25%;
grid-template-rows: 50% 50%;
}

באמצעות fr:

.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr;
}

שימוש במילות מפתח אוטומטיות ו-minmax().:

.grid-container {
grid-template-columns: autominmax(150px, 1fr) auto;
grid-template-rows: 100pxauto;
}

שימוש ב-repeat() עבור גודל עקבי:

.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);
}

מיקום אוטומטי ואזורי תבניות רשת

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

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

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

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

יישור ב-CSS Grid

אתה יכול להשתמש במאפייני יישור כדי לשלוט במיקום של פריטי רשת בתוך תאי הרשת שלהם. הנכסים הם:

• להצדיק-פריטים: שולט ביישור אופקי של פריטים בתוך תא הרשת שלהם.
  • ערכים: התחלה, סיום, מרכז ומתיחה.
• align-items: שולט ביישור אנכי של פריטים בתוך תא הרשת שלהם.
  • ערכים: התחלה, סיום, מרכז ומתיחה.
• להצדיק-תוכן: מיישר את כל הרשת בתוך המיכל לאורך הציר האופקי.
  • ערכים: התחלה, סוף, מרכז, מתיחה, מרווח-בין, מרווח-מסביב, ומרווח-שווה.
• align-content: מיישר את כל הרשת בתוך המיכל לאורך הציר האנכי.
  • ערכים: התחלה, סוף, מרכז, מתיחה, מרווח-בין, מרווח-מסביב, ומרווח-שווה.

הנה דוגמה:

.grid-container {
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
justify-content: space-between;
align-content: center;
}

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

פער רשת

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

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

.grid-container {
grid-gap: 20px;
}

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

מאפייני פריט רשת CSS

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

רשת-שורה-התחלה ורשת-שורה-סוף:

• מגדיר את שורות שורות ההתחלה והסיום עבור פריט.
• הערכים יכולים להיות מספרי שורות, "span n" או "אוטומטי".

.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

הקוד הזה מציב פריט רשת 1 מקו השורה השנייה לקו השורה הרביעית.

רשת-עמודה-התחלה ורשת-עמודה-סוף:

• מגדיר את שורות העמודות ההתחלה והסיום עבור פריט.
• ערכים יכולים להיות מספרי שורות, "span n" או "אוטומטי".

.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

הקוד הזה מציב פריט רשת 2 משורת העמודה הראשונה לקו העמודה השלישית.

אזור רשת:

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

.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.content {
grid-area: content;
}
.right {
grid-area: right;
}
.footer {
grid-area: footer;
}

הנה התוצאה:

להצדיק-עצמי:

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

.grid-item-5 {
justify-self: center;
}

קוד זה מרכז אופקית את פריט רשת 5 בתוך התא שלו.

ליישר-עצמי:

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

.grid-item-1 {
align-self: end;
}

הקוד הזה מתיישר פריט רשת 1 לתחתית התא שלו.

אל תהסס לשלב ולהתאים אישית את המאפיינים הללו כדי ליצור את הפריסה והמראה הרצוי עבור כל פריט רשת ב-CSS Grid שלך.

יצירת פריסות רספונסיביות באמצעות רשתות CSS

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

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

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

חקור את האפשרויות של פריסת רשת CSS

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

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