Grid: الأعمدة والصفوف والمناطق

أنشئ معارض صور وتخطيطات صفحات كاملة بأعمدة CSS Grid وصفوفها ومناطقها المسمّاة.

9 دقيقة · 3 أسئلة

يحاذي Flexbox على محور واحد؛ أما Grid فيتحكّم في المحورين معاً. فما إن يشبه نموذجك جدولاً - معرض صور، لوحة تحكّم، صفحة كاملة برأس وشريط جانبي وتذييل - يكون Grid هو الأداة المناسبة. تعرّف الحاوية البنية في أعمدة وصفوف، ويضع الأبناء أنفسهم تلقائياً أو بالضبط حيث تختار.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

تقسم وحدة fr (الكسر) المساحة المتاحة: فـ 1fr 2fr تنشئ عمودين يكون الثاني فيهما بعرض ضعف الأول. وخلافاً للنسب المئوية، تأخذ fr قيمة gap في الحسبان دون أيّ عملية حسابية من طرفك. ولإبراز عنصر، اجعله يمتدّ على عدة مسارات بـ grid-column وgrid-row.

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

لصفحة كاملة، يتيح لك grid-template-areas أن ترسم النموذج مباشرة في CSS. تمثّل كل سلسلة نصية صفّاً من الشبكة، وتمثّل كل كلمة منطقة مسمّاة. عندئذٍ يضع الابن نفسه بـ grid-area. تُقرأ النتيجة كمخطط معماري: إنها أكثر الطرق قابلية للقراءة لتخطيط صفحة.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

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

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا تمثّل وحدة fr في grid-template-columns: 1fr 2fr؟
   • كسراً من المساحة المتاحة للحاوية
   • نسبة مئوية من عرض الشاشة
   • حجماً ثابتاً مُعبَّراً عنه بالبكسل
2. أيّ تصريح ينشئ ثلاثة أعمدة متساوية العرض؟
   • grid-template-columns: 3
   • grid-template-columns: repeat(3, 1fr)
   • grid-columns: 1fr 3
3. ما فائدة grid-template-areas؟
   • تسمية مناطق الشبكة حيث يضع الأبناء أنفسهم عبر grid-area
   • تحديد حجم أعمدة الشبكة
   • إنشاء حركات بين الخلايا