CSS Academy · درس

Display Grid وأعمدة الصفوف وقوالبها

فعّل CSS Grid، وحدّد مسارات الأعمدة والصفوف باستخدام grid-template-columns وgrid-template-rows.

Display Grid وأعمدة الصفوف وقوالبها درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

تفعيل CSS Grid

يُفعَّل CSS Grid باستخدام display: grid على حاوية. وتصبح عناصرها الابنة المباشرة تلقائيًا عناصر شبكة توضع في الخلايا.

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>

grid-template-columns

تحدد grid-template-columns عدد الأعمدة وحجمها. وتنشئ كل قيمة مسار عمود واحدًا.

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

grid-template-rows

تحدد grid-template-rows مسارات الصفوف الصريحة. وتنشئ العناصر التي تتجاوز الصفوف المحددة صفوفًا ضمنية.

<div class="layout" style="min-height:220px;">
  <div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
  <div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>

مسارات الأعمدة والصفوف

تنشئ كل قيمة في grid-template-columns أو grid-template-rows مسارًا واحدًا. ويمكن للمسارات استخدام أي وحدة قياس للحجم:

ثابتة: 200px و10rem
مرنة: 1fr
قائمة على المحتوى: auto وmin-content وmax-content

وحدة fr

توزّع fr (وحدة الكسر) المساحة المتاحة بعد طرح الأحجام الثابتة. ينشئ 1fr 2fr أعمدة بنسبة 1:2.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>

auto في المسارات

يحدد auto في المسار حجمه بما يلائم المحتوى. وعند استخدامه لعمود، يأخذ الحد الأدنى المطلوب بواسطة الخلية الأوسع؛ وعند استخدامه لصف، يلائم الخلية الأطول.

<div class="sidebar-layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>

مثال على تخطيط الصفحة

تخطيط شائع لصفحة مكوّنة من ثلاثة صفوف، يتضمن الترويسة والمحتوى الرئيسي والتذييل:

<div class="page">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
  <footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>

الاختصار grid-template

يجمع grid-template بين الصفوف والأعمدة:

<div class="grid" style="display:grid;min-height:180px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>

فحص الشبكة في DevTools

يمكن لـ Chrome وFirefox DevTools عرض خطوط مسارات الشبكة فوق الصفحة. انقر على شارة الشبكة في لوحة Elements لعرض الأعمدة والصفوف والفجوات والمناطق المسماة.

اختيار Grid أو Flexbox

استخدم Grid عندما تحتاج إلى التحكم في الصفوف والأعمدة في الوقت نفسه. واستخدم Flexbox للتخطيطات أحادية البعد، مثل صف من العناصر أو عمود من العناصر. وتستخدم العديد من التخطيطات كليهما.

أرقام الخطوط

ترقّم Grid خطوطها تلقائيًا بدءًا من 1. يمكنك الإشارة إلى هذه الأرقام لوضع العناصر يدويًا. تمتد خطوط الأعمدة من 1 إلى n+1، حيث تمثل n عدد الأعمدة.

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>

تحقق سريع

ماذا ينشئ grid-template-columns: 200px 1fr 2fr؟

مراجعة

ينشئ display: grid حاوية شبكة. ويحدد grid-template-columns وgrid-template-rows المسارات. وتوزّع وحدة fr المساحة المتبقية بشكل نسبي. ويحدد auto الحجم بما يلائم المحتوى. وتُعد Grid مثالية للتحكم في التخطيطات ثنائية الأبعاد.

الأسئلة الشائعة

هل درس «Display Grid وأعمدة الصفوف وقوالبها» مجاني؟

نعم — نص درس «Display Grid وأعمدة الصفوف وقوالبها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «Display Grid وأعمدة الصفوف وقوالبها»؟

فعّل CSS Grid، وحدّد مسارات الأعمدة والصفوف باستخدام grid-template-columns وgrid-template-rows. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «Display Grid وأعمدة الصفوف وقوالبها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy