Grid — شبكة الصفحة الكاملة

Flexbox يرتب بخط واحد، أما Grid يبني شبكة كاملة من أعمدة وصفوف — الأنسب لتخطيط الصفحات:

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
}

هذا التقسيم يعطينا عموداً جانبياً بعرض ثابت 200 بكسل وعموداً رئيسياً ياخذ كل الباقي — وgap تفصل بين الخانات بدون هوامش يدوية.

ونقدر نخلي عنصراً يمتد فوق الشبكة كلها:

.header { grid-column: 1 / -1; }

القيمة 1 / -1 تعني من أول خط لآخر خط. معظم المواقع الحديثة تمزج: Grid للتخطيط الكبير وFlexbox للصفوف الصغيرة داخله.