CSS Grid للتخطيط
عرّف الصفوف والأعمدة باستخدام CSS Grid، وضع العناصر بدقة، وأنشئ تخطيطات شائعة للصفحات بأقل قدر من التعليمات البرمجية.
CSS Grid للتخطيط درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو CSS Grid؟
إن CSS Grid نظام تخطيط ثنائي الأبعاد، إذ تتحكم في الصفوف والأعمدة معًا. وهو أفضل أداة لبنية الصفحة العامة ولتحديد مواضع العناصر صراحةً ضمن شبكة محددة.
تحديد الأعمدة: grid-template-columns
تحدّد grid-template-columns بنية الأعمدة. استخدم أحجامًا ثابتة (px)، أو كسورًا مرنة (fr)، أو auto. وتكرّر repeat(n, size) تعريف المسار.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}وحدة fr
توزّع fr (وحدة الكسر) المساحة المتبقية بشكل تناسبي. ويمنح 1fr 2fr العمود الثاني ضعف المساحة الممنوحة للعمود الأول. وهي أساسية لمسارات الشبكة المرنة.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}تحديد الصفوف: grid-template-rows
يمكنك أيضًا تحديد الصفوف صراحةً. وإذا لم تفعل ذلك، ينشئ المتصفح صفوفًا ضمنية تلقائيًا. ويحدّد grid-auto-rows: minmax(200px, auto) أحجام الصفوف الضمنية.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap في Grid
كما هو الحال في Flexbox، تضيف gap مسافة بين مسارات الشبكة من دون التأثير في الحواف الخارجية. وتتحكم row-gap وcolumn-gap في المحورين بشكل منفصل.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
سمِّ مناطق الشبكة باستخدام السلاسل النصية، وعيّن العناصر إليها باستخدام grid-area. وينتج عن ذلك كود تخطيط واضح وسهل القراءة بصريًا.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }وضع العناصر باستخدام grid-column وgrid-row
تحكّم بدقة في موضع العنصر باستخدام grid-column: start / end وgrid-row: start / end. استخدم -1 للإشارة إلى السطر الأخير. وتمتد span N عبر N من المسارات.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit وminmax() — أعمدة متجاوبة
أقوى صيغة مختصرة لإنشاء شبكة متجاوبة هي: repeat(auto-fit, minmax(280px, 1fr)). فهي تنشئ أكبر عدد ممكن من الأعمدة التي تتسع لها المساحة، على ألا يقل عرض كل منها عن 280px، وتملأ المساحة المتبقية باستخدام 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill مقابل auto-fit
تنشئ auto-fill مسارات حتى إن كانت فارغة، فتحافظ على شبكة ثابتة. أما auto-fit فتطوي المسارات الفارغة، ما يسمح للعناصر بالتمدد لملء السطر. استخدم auto-fit للمحتوى الذي ينبغي أن يتمدد.
الشبكة الضمنية مقابل الشبكة الصريحة
تُسمى المسارات التي تعرّفها الشبكة الصريحة. وعندما تضيف عناصر أكثر من المسارات المعرّفة، ينشئ المتصفح مسارات ضمنية. تحكّم في حجمها باستخدام grid-auto-rows وgrid-auto-columns.
Grid مقابل Flexbox — متى تستخدم كلًّا منهما؟
Grid: للتخطيطات ثنائية الأبعاد، وبنية الصفحة، والمعارض، ولوحات المعلومات. Flexbox: للصفوف أو التكديسات أحادية البعد، والتوسيط، وتوزيع العناصر في صف. ويكمل كل منهما الآخر؛ استخدم Grid لهيكل الصفحة، وFlexbox للمكونات الداخلية.
تحقّق سريعًا
ما قيمة CSS التي تنشئ أعمدة بعرض لا يقل عن 250px وتتشارك المساحة المتبقية بالتساوي؟
مراجعة: CSS Grid
تحدّد grid-template-columns الأعمدة. وتشارك fr المساحة. وتبسّط repeat() التكرار. وتضيف gap المسافات الفاصلة. وتجعل grid-template-areas التخطيطات سهلة القراءة. وينشئ auto-fit + minmax شبكات متجاوبة من دون استعلامات وسائط. ويُعد Grid الخيار الأساسي لتخطيطات الصفحات ثنائية الأبعاد.
الأسئلة الشائعة
هل درس «CSS Grid للتخطيط» مجاني؟
نعم — نص درس «CSS Grid للتخطيط» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «CSS Grid للتخطيط»؟
عرّف الصفوف والأعمدة باستخدام CSS Grid، وضع العناصر بدقة، وأنشئ تخطيطات شائعة للصفحات بأقل قدر من التعليمات البرمجية. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «CSS Grid للتخطيط»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.