أداة Grid Template Areas

Grid Template Areas طريقة أنيقة داخل CSS Grid تتيح لك تسمية مناطق صفحتك بأسماء واضحة مثل header وsidebar وmain وfooter، ثم ترتيبها بصريًا وكأنك ترسم مخطّطًا. ميزتها الكبرى أن الكود يصبح مقروءًا كخريطة لأي شخص يفتحه لاحقًا.

هذه الأداة تتيح لك تجربة توزيع المناطق ومشاهدة الصفحة تتشكّل مباشرة، مع كود جاهز للنسخ يوفّر عليك التخمين.

جرّب بنفسك

الإعدادات

اختر التخطيط

gap (px)

ارتفاع الحاوية

CSS الناتج

display: grid;

المعاينة

هذه أقوى ميزة في Grid: ترسم التخطيط بالكلمات!

متى تستخدم هذه الخاصية؟

استخدم Template Areas عندما يكون لديك تخطيط صفحة واضح المناطق وتريد كودًا سهل القراءة والصيانة:

تخطيطات لوحات التحكّم بمناطق ثابتة
صفحات بها رأس وشريط جانبي ومحتوى وتذييل
إعادة ترتيب المناطق على الجوال بسهولة

هي امتداد لـCSS Grid، فيُفضّل أن تتقن الشبكة الأساسية أولًا.

أمثلة عملية

مثال: تخطيط صفحة برأس وشريط جانبي ومحتوى وتذييل.

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

غيّر ترتيب الأسماء في الأداة بالأعلى لترى كيف تنتقل المناطق في مكانها فورًا.