شبكة CSS: template-areas وauto-fit وminmax
سمِّ مناطق الشبكة لتصميمات سهلة القراءة، واستخدم auto-fit مع minmax() للأعمدة المتجاوبة، وتحكّم في المسارات الضمنية.
شبكة CSS: template-areas وauto-fit وminmax درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
مناطق القوالب المسماة — التخطيط المرئي
تتيح لك grid-template-areas تسمية المناطق بتنسيق مرئي يشبه ASCII art. تمثل كل سلسلة صفًا، وتمثل كل كلمة خلية. وتمثل النقاط (.) الخلايا الفارغة. عيّن العناصر باستخدام grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }مناطق القوالب المتجاوبة باستخدام استعلامات الوسائط
غيّر تخطيط template-areas عند نقاط التوقف لنقل الشريط الجانبي من عمود مستقل إلى أسفل المحتوى الرئيسي على الأجهزة المحمولة.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit مقارنةً بـ auto-fill
تعمل auto-fit على طي المسارات الفارغة، بحيث تتمدد العناصر لملء الصف. أما auto-fill فتحافظ على بنية الشبكة حتى إذا كانت بعض المسارات فارغة. في شبكات البطاقات المتجاوبة، تكون auto-fit هي الخيار المناسب في معظم الحالات.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}التعمق في minmax()
تعرّف minmax(min, max) مسارًا لا يقل حجمه عن min ولا يزيد على max. ومن التركيبات الشائعة: minmax(0, 1fr) (مرن بالكامل)، وminmax(200px, 1fr) (متجاوب مع حد أدنى)، وminmax(auto, auto) (بحجم يطابق المحتوى).
تمديد الأعمدة والصفوف
استخدم grid-column: span 2 لجعل عنصر يمتد على عمودين. وادمجه مع grid-row: span 2 لإنشاء عنصر مميز يشغل مساحة 2×2 في الشبكة.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}التوزيع التلقائي الكثيف
تملأ grid-auto-flow: dense الفجوات الفارغة بالعناصر الأصغر. يفيد ذلك في التخطيطات الشبيهة بتخطيط masonry، حيث تختلف أحجام العناصر.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}الوحدات الكسرية والنسب المئوية
تشير وحدة fr دائمًا إلى المساحة المتاحة بعد طرح المسارات ذات الأحجام الثابتة والفجوات. يمنح مزج fr مع الأحجام الثابتة أكبر قدر من المرونة: شريط جانبي ثابت ومحتوى رئيسي مرن.
grid-auto-columns وgrid-auto-rows
تتحكم هاتان الخاصيتان في حجم المسارات التي تُنشأ ضمنيًا، أي عندما توضع العناصر خارج الشبكة الصريحة. وتمنح grid-auto-rows: minmax(100px, auto) الصفوف الضمنية ارتفاعًا أدنى.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}فحص Grid في DevTools
تُظهر Chrome DevTools خطوط الشبكة وأسماء المناطق فوق الصفحة عند النقر على شارة 'grid' بجوار حاوية الشبكة في لوحة Elements. استخدمها لتصحيح أحجام المسارات غير المتوقعة ومواضع العناصر.
CSS Subgrid
تتيح grid-template-columns: subgrid لشبكة متداخلة محاذاة مساراتها مع مسارات الشبكة الأصلية. وهي مدعومة في جميع المتصفحات الحديثة منذ عام 2023 — وتُعد ضرورية لمحاذاة محتويات البطاقات الداخلية عبر شبكة من البطاقات.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}متى يتفوق Grid على Flexbox
يتفوق Grid عندما تحتاج إلى تحكم صريح ثنائي الأبعاد، أي عندما تكون الصفوف والأعمدة مهمة معًا. أما إذا كنت تريد ترتيب العناصر في صف أو تكديسها فقط، فـFlexbox أبسط.
تحقق سريع
أي قيمة من CSS Grid تنشئ أكبر عدد ممكن من الأعمدة بعرض أدنى يبلغ 200px، مع توزيع المساحة المتبقية بالتساوي على الأعمدة؟
مراجعة: CSS Grid المتقدم
تنشئ grid-template-areas تخطيطات مسماة سهلة القراءة. وتتيح auto-fit مع minmax إنشاء شبكات متجاوبة من دون استعلامات وسائط. مدّد العناصر عبر الأعمدة والصفوف. ويملأ التوزيع التلقائي الكثيف الفجوات. استخدم تراكب الشبكة في DevTools للتصحيح. وتعمل Subgrid على محاذاة العناصر المتداخلة مع المسارات الأصلية.
الأسئلة الشائعة
هل درس «شبكة CSS: template-areas وauto-fit وminmax» مجاني؟
نعم — نص درس «شبكة CSS: template-areas وauto-fit وminmax» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «شبكة CSS: template-areas وauto-fit وminmax»؟
سمِّ مناطق الشبكة لتصميمات سهلة القراءة، واستخدم auto-fit مع minmax() للأعمدة المتجاوبة، وتحكّم في المسارات الضمنية. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «شبكة CSS: template-areas وauto-fit وminmax»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تعمّق في Flexbox: المحاذاة والالتفاف والترتيب
- شبكة CSS: template-areas وauto-fit وminmax
- دمج Flexbox وGrid
- متغيرات CSS لتنسيق السمات