الفصل الخامس نظام الشبكة (CSS Grid)

إليك كورس كامل عن نظام الشبكة (CSS Grid):

1. مقدمة عن CSS Grid

• CSS Grid هو نظام لتخطيط العناصر باستخدام صفوف وأعمدة. يسمح لك بإنشاء تخطيطات مرنة وديناميكية بدون الحاجة إلى تقنيات قديمة مثل float أو flexbox.
• يمكن من خلال CSS Grid تقسيم الصفحة إلى شبكة من الأعمدة والصفوف، مع تحديد حجم كل عنصر داخل هذه الشبكة.

2. إعداد حاوية الشبكة (Grid Container)

• لتفعيل نظام الشبكة، يجب تحديد حاوية الشبكة باستخدام display: grid;.
• مثال:
  css

  Copy code

  .container {
display: grid;
}


3. تعريف الأعمدة والصفوف

• لتحديد الأعمدة و الصفوف داخل الحاوية، نستخدم خاصية grid-template-columns و grid-template-rows.

أ. تعريف الأعمدة (Grid Columns)

• يمكن تحديد الأعمدة باستخدام وحدات قياس مثل px، fr، % أو auto.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* ثلاث أعمدة مع تباين في العرض */
}


ب. تعريف الصفوف (Grid Rows)

• مشابه لتعريف الأعمدة، يمكننا تحديد عدد الصفوف.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-rows: 100px 200px 100px; /* ثلاث صفوف بأحجام محددة */
}


4. مزيج الأعمدة والصفوف (Grid Template)

• يمكنك تحديد الصفوف و الأعمدة في نفس الوقت باستخدام grid-template-rows و grid-template-columns.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 150px 300px;
}


5. تقسيم الشبكة باستخدام grid-template-areas

• يمكنك تحديد شكل الشبكة باستخدام الأسماء بدلًا من الأبعاد الدقيقة.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}

• بعد ذلك، يمكنك تخصيص كل عنصر داخل الشبكة باستخدام grid-area:
  css

  Copy code

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


6. تحديد العناصر داخل الشبكة (Grid Items)

• يتم تحديد موضع العنصر داخل الشبكة باستخدام grid-column و grid-row.

أ. التحديد باستخدام grid-column

• لتحديد العنصر على الأعمدة.
• مثال:
  css

  Copy code

  .item {
grid-column: 1 / 3; /* العنصر يبدأ من العمود الأول ويصل إلى العمود الثالث */
}


ب. التحديد باستخدام grid-row

• لتحديد العنصر على الصفوف.
• مثال:
  css

  Copy code

  .item {
grid-row: 2 / 4; /* العنصر يبدأ من الصف الثاني ويصل إلى الصف الرابع */
}


ج. تحديد الموضع باستخدام grid-area

• يمكن أيضًا تحديد مكان العنصر باستخدام grid-area:
  css

  Copy code

  .item {
grid-area: 1 / 2 / 3 / 4; /* الصف الأول، العمود الثاني، الصف الثالث، العمود الرابع */
}


7. التكرار (Repeating)

• يمكن استخدام خاصية repeat() لتكرار الأعمدة أو الصفوف بدلاً من كتابة نفس القيمة عدة مرات.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* ثلاث أعمدة متساوية */
}


8. مقاييس مرنة (fr, minmax, auto-fill, auto-fit)

• fr: وحدة مرنة تعني “حصة من المساحة المتاحة”. وهي تُستخدم لتقسيم المساحة المتاحة بين الأعمدة والصفوف.
• minmax(): تُستخدم لتحديد الحد الأدنى والحد الأقصى لعرض أو ارتفاع العنصر.
• auto-fill و auto-fit: تستخدمان لتكرار الأعمدة أو الصفوف بشكل تلقائي بناءً على الحجم المتاح.

أ. مثال باستخدام fr:

ب. مثال باستخدام minmax():

9. الضبط التلقائي للمحتوى باستخدام auto

• auto يسمح بتحديد الأبعاد بناءً على محتوى العنصر.
• مثال:
  css

  Copy code

  .container {
display: grid;
grid-template-columns: auto auto auto;
}


10. محاذاة العناصر داخل الشبكة (Aligning Items)

• يمكنك محاذاة العناصر داخل الحاوية باستخدام align-items و justify-items.

أ. محاذاة العناصر عموديًا باستخدام align-items:

• القيم: start, center, end, stretch.
• مثال:
  css

  Copy code

  .container {
display: grid;
align-items: center;
}


ب. محاذاة العناصر أفقيًا باستخدام justify-items:

• القيم: start, center, end, stretch.
• مثال:
  css

  Copy code

  .container {
display: grid;
justify-items: center;
}


11. محاذاة الحاوية (Aligning the Grid Container)

• يمكنك محاذاة الحاوية نفسها داخل الصفحة باستخدام align-content و justify-content.

أ. محاذاة الحاوية عموديًا باستخدام align-content:

• القيم: start, center, end, stretch.
• مثال:
  css

  Copy code

  .container {
display: grid;
align-content: center;
}


ب. محاذاة الحاوية أفقيًا باستخدام justify-content:

• القيم: start, center, end, stretch.
• مثال:
  css

  Copy code

  .container {
display: grid;
justify-content: center;
}


12. أمثلة عملية

أ. تصميم شبكة بسيطة مع 3 أعمدة و 2 صفوف:

13. أفضل الممارسات لتصميم باستخدام Grid

• استخدم grid-template-areas لتصميم الشبكات بشكل بسيط ومرن.
• استخدم fr لوحدات مرنة لتوزيع المساحة.
• استفد من minmax() لتحديد حجم مرن للعناصر.

14. ملخص الدرس

• تعلمنا كيفية استخدام CSS Grid لتخطيط الصفوف والأعمدة.
• تعلمنا كيفية تحديد عناصر الشبكة باستخدام grid-column و grid-row و grid-area.
• استخدمنا مقاييس مرنة مثل fr و minmax() لتوزيع المساحة بشكل مرن.