CSS Academy · درس

الفجوة ووضع العناصر في الشبكة

أضف مسافات بين خلايا الشبكة باستخدام gap، وضع العناصر باستخدام grid-column وgrid-row.

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

الفجوة في CSS Grid

تحدد الخاصية gap المسافة بين صفوف الشبكة وأعمدتها. وهي تحل محل الخاصية الأقدم grid-gap، كما تعمل أيضًا مع Flexbox.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

row-gap وcolumn-gap

حدد فجوات الصفوف والأعمدة بشكل مستقل:

<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>

أرقام خطوط الشبكة

ترقّم CSS Grid خطوطها بدءًا من 1. تحتوي شبكة مكوّنة من 3 أعمدة على خطوط أعمدة مرقمة 1 و2 و3 و4. وتُحسب الأرقام السالبة من النهاية: إذ يمثل -1 الخط الأخير، ويمثل -2 الخط قبل الأخير.

grid-column وgrid-row

ضع العناصر يدويًا باستخدام أرقام الخطوط مع grid-column وgrid-row:

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
  <div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
  <div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>

الكلمة المفتاحية span

استخدم span للتعبير عن عدد المسارات التي ينبغي أن يغطيها العنصر بدلًا من استخدام أرقام الخطوط المطلقة:

<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

أرقام الخطوط السالبة

تُحسب الفهارس السالبة من النهاية. ويمتد 1 / -1 دائمًا على عرض الشبكة بالكامل، بصرف النظر عن عدد الأعمدة:

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

الاختصار grid-area

تحدد grid-area قيم التموضع الأربع للشبكة في خاصية واحدة: row-start / column-start / row-end / column-end.

<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
  <div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>

التموضع التلقائي

تُوضَع العناصر التي لم يحدد موضعها صراحةً تلقائيًا في الخلية التالية المتاحة وفق خوارزمية grid-auto-flow. ويملأ المتصفح الخلايا من اليسار إلى اليمين، ومن الأعلى إلى الأسفل افتراضيًا.

justify-items وalign-items في Grid

في حاوية الشبكة، تحاذي justify-items محتوى الخلايا أفقيًا، بينما تحاذي align-items المحتوى عموديًا. وتكون القيمة الافتراضية لكلتيهما stretch.

<div class="grid" style="min-height:120px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>

justify-self وalign-self

يمكن لعناصر الشبكة الفردية تجاوز محاذاة الحاوية باستخدام justify-self وalign-self:

<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
  <div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>

تداخل عناصر الشبكة

يمكن لعناصر متعددة أن تشغل خلية الشبكة نفسها. استخدم z-index للتحكم في العنصر الذي يظهر في الأعلى. يتيح ذلك إنشاء تصميمات ذات طبقات، مثل صورة مع نص فوقها.

<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
  <div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
  <div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>

تحقق سريع

لدى عنصر القيمة grid-column: 2 / span 3. ما الأعمدة التي يشغلها في شبكة مكوّنة من 5 أعمدة؟

مراجعة

تضيف gap ممرات بين خلايا الشبكة. وتُوضَع العناصر باستخدام أرقام الخطوط مع grid-column وgrid-row. وتحدد الكلمة المفتاحية span عدد المسارات التي ينبغي تغطيتها. استخدم 1 / -1 للامتداد دائمًا عبر جميع الأعمدة. ويمكن لعناصر الشبكة أن تتداخل باستخدام z-index.

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

هل درس «الفجوة ووضع العناصر في الشبكة» مجاني؟

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

ماذا ستتعلم في «الفجوة ووضع العناصر في الشبكة»؟

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

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

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

كم من الوقت يستغرق درس «الفجوة ووضع العناصر في الشبكة»؟

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

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

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

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

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