أداة Grid Template Areas

جرّب بنفسك

الإعدادات

اختر التخطيط

gap (px)

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

CSS الناتج

display: grid;

المعاينة

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

ما هي Grid Template Areas؟

ميزة في CSS Grid تتيح لك تسمية مناطق التخطيط بأسماء ثم رسم الصفحة بها كأنك ترسم مخطّطًا. بدل التعامل مع أرقام الخطوط، تكتب أسماء مثل header وsidebar وcontent، وترتّبها بصريًا في الكود نفسه.

أجمل ما فيها أن الكود يشبه شكل الصفحة: تنظر إلى grid-template-areas فترى تخطيط صفحتك مرسومًا بالكلمات قبل أن تفتح المتصفّح.

🔑 اربطها بشيء تعرفه

كأنك تخطّط غرف بيت على ورقة: تكتب "مطبخ مطبخ صالة" في الصف الأول، و"نوم نوم صالة" في الثاني — فتفهم فورًا أن الصالة تمتدّ عبر الصفّين. الكود مرآة للتخطيط.

متى تستخدمها؟

تخطيط الصفحة الرئيسية

رأس، جانبي، محتوى، تذييل — بأسماء واضحة سهلة التعديل.

إعادة الترتيب للجوال

أعِد رسم المناطق فقط في media query، دون لمس HTML.

تخطيط يقرؤه غيرك

الأسماء توضّح النيّة أكثر من الأرقام لمن يقرأ كودك لاحقًا.

الخصائص المستعملة

الخاصية	ماذا تفعل؟	قيم شائعة
grid-template-areas	يرسم التخطيط بأسماء المناطق.	"head head" "nav main"
grid-area	يُسنِد عنصرًا إلى منطقة مسمّاة.	header / main
grid-template-columns	عرض الأعمدة كالمعتاد.	200px 1fr
. (نقطة)	خلية فارغة بلا محتوى.	.

مثال عملي

تخطيط صفحة بأربع مناطق مرسومة بالأسماء:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
.site-header  { grid-area: header; }
.site-sidebar { grid-area: sidebar; }
.site-content { grid-area: content; }
.site-footer  { grid-area: footer; }

لاحظ أن header وfooter يمتدّان عبر العمودين لأنهما مكرّران في الصف. الكود نفسه يُظهر التخطيط — هذه قوّة الميزة.

أخطاء شائعة

1. عدم تطابق عدد الأعمدة: كل صف في grid-template-areas يجب أن يحوي العدد نفسه من الأسماء، وإلا لا يعمل التخطيط إطلاقًا.
2. نسيان علامات الاقتباس حول كل صف: كل صف نصّ مستقلّ بين علامتي تنصيص.
3. اسم منطقة في الرسم بلا عنصر مُسنَد إليه بـ grid-area: المنطقة تبقى فارغة.

كيف تستفيد من الأداة أعلاه؟

أعِد ترتيب أسماء المناطق في الأداة أعلاه، وشاهد كيف يُعاد بناء الصفحة. جرّب نقل sidebar من اليمين إلى اليسار بتبديل الأسماء فقط — دون لمس أي عنصر HTML.

أسئلة شائعة

نعم. في الاتجاه من اليمين لليسار، يبدأ العمود الأول من اليمين تلقائيًا، فتنعكس المناطق بما يناسب العربية دون جهد إضافي.

ضع نقطة (.) مكان الاسم في تلك الخلية، فتبقى فارغة بلا محتوى.

النتيجة واحدة، لكن الأسماء أوضح وأسهل قراءة وتعديلًا من أرقام الخطوط — خاصة في التخطيطات المعقّدة وعند إعادة الترتيب للجوال.

🔲 CSS Grid

أساسيات الشبكة.

📱 التجاوب

أعِد الرسم للجوال.

↔️ Flexbox

ترتيب في خط واحد.