تحسين تصميمات الويب باستخدام خاصية Gap في CSS: دليلك لإضافة فراغ وتحسين التخطيطات

تُوفر CSS العديد من الطرق لتخطيط العناصر على صفحات الويب الخاصة بك، بدءًا من تحديد الموضع المُطلق وحتى التصميم المُستند إلى الشبكة. إنَّ المسافات حول العناصر وفيما بينها لا تقل أهمية، ومرة أخرى، هناك العديد من الخيارات. تعد خاصية Gap طريقة مُفيدة ومُتعددة الاستخدامات لإدخال المساحة البيضاء، وهي تعمل مع العديد من مخططات الويب المُختلفة.

يُعتبر استخدام خاصية Gap في CSS طريقة مُناسبة لتحسين تخطيطات مواقع الويب. تُتيح خاصية Gap إضافة فراغ بين العناصر بطريقة أنيقة، مما يُعزز قابلية التصفح ويُحسِّن تجربة المستخدم. في هذا الدليل، سنلقي نظرة على كيفية استخدام خاصية Gap في CSS بشكل فعَّال لتحسين تصميماتك على الويب. تحقق من أفضل مشاريع HTML و CSS المُناسبة للمُبتدئين.

ما هي خاصية Gap؟

تعد Gap في CSS خاصية أسلوب بسيطة ولكنها أساسية للمساعدة في تحديد المسافات بين تخطيطات تصميمك. يُعد توفير مساحة مُناسبة بين عناصرك أحد القواعد الذهبية للتكوين التي يجب عليك تطبيقها للحصول على تصميم رسومي مُمتع ومُحسَّن. تعمل خاصية Gap على تحديد المسافات العمودية والأفقية بين العناصر وتعطي تباعدًا بينها. بالتالي، فإنَّ استخدام Gap يسهل تحقيق التصميم المُناسب وتنظيم العناصر بشكل أفضل، دون الحاجة لاستخدام أكواد إضافية لإضافة فواصل بين العناصر.

يُمكنك استخدام هذه الخاصية لتحديد حجم الفراغات بين العناصر في ثلاثة تنسيقات تخطيط:

1. تخطيط الصندوق المرن (“Flexbox”).
2. تخطيط الشبكة (Grid).
3. تخطيط متعدد الأعمدة ().

تدعم جميع المتصفحات الحديثة خاصية Gap التي تكمل خصائص نموذج الصندوق مثل الهامش والحشو.

كيفية كتابة خاصية Gap في CSS

بناء الجملة الأساسي لخاصية Gap هو:

gap: <row-gap> <column-gap>;

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

gap: 10em;

…يعني أن كلاً من الصفوف والأعمدة سيكون بها فراغ يبلغ 10 أضعاف حجم الخط الحالي، بينما:

gap: 20px 10%;

…سوف يُنتج المسافة بين العناصر في الصف تبلغ 20 بكسل والمسافة بين العناصر في العمود تبلغ عُشر عرض العنصر المحتوي.

يجب عليك استخدام خاصية Gap مع عناصر الحاوية التي تُحدد التخطيط، بدلاً من العناصر الموجودة داخل الحاوية. تهدف الخاصية إلى إنشاء مسافة مُوحدة بين العناصر بدلاً من المسافات المُتغيِّرة الأكثر تعقيدًا.

استخدام خاصية Gap مع Flexbox

يُمكنك استخدام خاصية Gap للتحكم في المسافة بين الصفوف والأعمدة التي يُنشئها التخطيط المرن. سيُحدد الاتجاه المرن الذي يستخدمه تخطيطك ما إذا كانت المسافة بين العناصر في الصف أو المسافة بين العناصر في العمود تنطبق.

افتراضيًا، في اتجاه الصف العادي، ستظهر العناصر الموجودة داخل الحاوية المرنة بجوار بعضها البعض. إليك كود CSS البسيط:

.flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
}

يُنتج هذا التخطيط:

لاحظ أن كل عنصر داخل الحاوية يستخدم خصائص نموذج الصندوق الكلاسيكي للتباعد: الحشو والهامش. من خلال إضافة بعض المسافة بين العناصر:

.flex-layout { gap: 20px; }

سيؤدي إلى زيادة المسافة بين العناصر المرنة، ولكن ليس حولها:

إذا كان تخطيطك المرن يعرض العناصر عبر كل من الأعمدة والصفوف، عن طريق التفاف العناصر، على سبيل المثال:

.flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
}

سترى تأثير كلا الثغرات:

ضع في اعتبارك دائمًا أنَّ الخصائص الأخرى، مثل الهامش وضبط المحتوى، يُمكن أن تُؤثر على المسافة بين العناصر. فكر في Gap باعتبارها قيمة دنيا إلا إذا كنت تتحكم بشكل صريح في جميع الخصائص الأخرى التي يُمكن أن تؤثر على التباعد. تحقق من ألعاب ممتعة لمساعدتك على تعلم برمجة CSS بسهولة.

استخدام خاصية Gap مع الشبكة

يُمكنك أيضًا استخدام Gap مع تخطيط الشبكة. يتمثل الاختلاف الرئيسي في أنك ستحتاج عادةً إلى تحديد مسافة بين العناصر في الصفوف والأعمدة نظرًا لأن الشبكة أكثر ملاءمة للتخطيطات ثنائية الأبعاد.

كما هو الحال في التخطيط المرن، ستعرض الشبكة العناصر بجوار بعضها البعض بشكل افتراضي، على الرغم من أنه يُمكنك التحكم في التباعد حول كل عنصر باستخدام الحشو والهامش:

.grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
}

والنتيجة هي تخطيط الشبكة النموذجي:

من خلال إضافة Gap:

​.grid-layout {
    gap: 80px 40px;
}

سيتم إدراج مسافة بين كل عنصر:

لاحظ كيفية تطبيق القيم الفردية لفجوة الصف والعمود هنا، مما يؤدي إلى إنشاء مسافة بين العناصر في الصفوف تبلغ ضعف حجم (80 بكسل) المسافة بين الأعمدة (40 بكسل). تذكر أنه إذا استخدمت قيمة واحدة، فسوف تُحدد نفس المسافة بين الصفوف والأعمدة.

استخدام خاصية Gap مع تخطيطات متعددة الأعمدة

يُمكنك استخدام خاصية Gap مع تخطيطات الأعمدة أيضًا، ولكن قيمة واحدة فقط هي ذات الصلة في هذه الحالة؛ لا توجد صفوف. تحتوي التخطيطات مُتعددة الأعمدة على فجوة افتراضية:

.column-layout {
    column-count: 3;
}

ولكنها صغيرة جدًا بحجم 1em:

يكون هذا ملحوظًا بشكل خاص عند تغيير الخط، وخاصة إذا كنت تقوم بمُحاذاة النص:

.column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
}

تصطدم أسطر النص الناتجة ببعضها البعض وتصبح غير مُريحة للقراءة:

من خلال تحديد مسافة بين العناصر، يُمكنك زيادة المسافة بين الأعمدة، مما يمنحها مساحة أكبر.

.column-layout {
    gap: 2em;
}

قد تجد أن 2em أو حتى 3em تعطي نتيجة أكثر قابلية للقراءة، اعتمادًا على عوامل أخرى مثل عرض الأعمدة:

تذكر أنه يمكنك استخدام إحدى أدوات المتصفح المساعدة مثل أدوات التطوير في Google Chrome للتحقق من تخطيطاتك ومعرفة مدى تأثير خصائص مثل الفجوة والهامش على تخطيطاتك.

عند استخدام قيمتين لخاصية Gap، تأكد من أنَّه تم تعيينهما بالطريقة الصحيحة. يمكن أن يكون ترتيب “الصف والعمود” غير بديهي، ولكنه يطابق ترتيب خصائص الاختصارات الأخرى مثل الحشو والهامش.

ستختلف الطريقة الدقيقة التي ستستخدم بها خاصية Gap اعتمادًا على تخطيط التصميم الذي تطبقه عليه. بشكل عام، ومع ذلك، يجب عليك الوصول إلى خاصية Gap عندما تحتاج إلى مسافة مُنتظمة بين العناصر، ولكن ليس حولها. يُمكنك الإطلاع الآن على بدائل ChatGPT المُتقدمة التي تُوفر إمكانية برمجة التطبيقات تلقائيًا.