جريد - Grid

المفاهيم الأساسية:

• حاوية الجريد (Grid Container): العنصر الذي يحتوي على عناصر شبكة الجريد.
• عناصر الجريد (Grid Items): العناصر التي يتم وضعها داخل حاوية الجريد.
• أعمدة الجريد (Grid Columns): تقسيمات عمودية داخل حاوية الجريد.
• صفوف الجريد (Grid Rows): تقسيمات أفقية داخل حاوية الجريد.
• فجوات الجريد (Grid Gaps): المسافات الفارغة بين عناصر الجريد.
• مناطق الجريد (Grid Areas): مناطق محددة داخل حاوية الجريد لوضع العناصر.

خطوات عملية:

• أنشئ حاوية جريد: استخدم الخاصية display: grid في نمط حاوية الجريد.
• حدد أعمدة و صفوف الجريد: استخدم خصائص grid-template-columns و grid-template-rows لتحديد عدد وأبعاد الأعمدة والصفوف.
• ضع عناصر الجريد: استخدم الخاصية grid-column و grid-row لتحديد موضع كل عنصر داخل حاوية الجريد.
• حدد فجوات الجريد: استخدم الخاصية grid-gap لإنشاء فجوات بين عناصر الجريد.
• أنشئ مناطق الجريد (اختياري): استخدم الخاصية grid-template-areas لإنشاء مناطق محددة لوضع العناصر.

مثال CSS:

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

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.item3 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.item4 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

هذا المثال ينشئ حاوية جريد بثلاثة أعمدة وصفين وفجوة 10 بكسل بين العناصر. ثم يضع العناصر الأربعة في أماكن مختلفة داخل حاوية الجريد.