ما هي فوائد استخدام Grid و Gap في CSS؟ وكيف يتم استخدامهما لتحسين تصميم صفحات الويب؟

أبي عبد الرحمان نزار · 12 يونيو 2023

السلام عليكم ،

ماهي الفائدة من استخدام الgap

و كذلك ما هو grid و فيما يستخدم

أسامة زيادة · 12 يونيو 2023

وعليكم السلام

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

للإطلاع أكثر حول خاصية gap من هنا

grid
CSS Grid هو نظام تخطيط يمكن استخدامه لإنشاء تنسيقات مرنة ومعقدة للعناصر في صفحة الويب. يتكون CSS Grid من شبكة مكونة من صفوف (Rows) وأعمدة (Columns)، وتسمح بتحديد المواقع والأبعاد لكل عنصر في الشبكة. يتيح CSS Grid إمكانية تحديد عدد الصفوف والأعمدة، وتحديد حجم الصفوف والأعمدة بشكل مستقل، وتوزيع العناصر داخل الشبكة بسهولة.

فوائد استخدام CSS Grid تتضمن :-

تنظيم العناصر في صفحة الويب بشكل منتظم ومرن.
إمكانية تحقيق تصميمات متعددة الأعمدة والصفوف بسهولة.
التحكم في موقع وحجم العناصر داخل الشبكة بدقة.
إنشاء تصميمات متجاوبة تتكيف مع أحجام الشاشة المختلفة.
تحقيق تنظيم سهل للعناصر المتعددة داخل الشبكة باستخدام خصائص مثل التباعد والتوزيع.
باستخدام CSS Grid وخاصية الـ Gap، يمكنك بناء تصميمات واجهات مستخدم مرنة وجميلة بطريقة سهلة ومنظمة.

للإطلاع أكثر حول نظام grid من هنا

يمكنك الإطلاع على المقالات التالية للإستفادة أكثر :-

محمد Fahmy · 12 يونيو 2023

الـ gap في CSS هو عبارة عن فراغ بين العناصر الموجودة في الـ grid أو الشبكة. هذا الفراغ يجعل من السهل جدًا تحديد مسافة بين العناصر وتنظيمها بشكل جيد.

أما بالنسبة للـ grid، فهو نظام تخطيط يستخدم لتنظيم العناصر على صفحة الويب بطريقة منظمة. يمكن استخدام الـ grid لإنشاء تصاميم متعددة الأعمدة والصفوف بشكل مرن وبسيط.

وهذا مثال للتبسيط.

<!DOCTYPE html>
<html>
  <head>
    <title>Grid and Gap Example</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr;
        gap: 40px;
      }

      .header {
        background-color: #0f25e6;
        text-align: center;
        padding: 10px;
        font-size: 24px;
      }

      .text {
        background-color: #ff1111;
        padding: 10px;
        font-size: 18px;
		text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">عنوان الصفحة</div>
      <div class="text">نص الصفحة</div>
    </div>
  </body>
</html>

وهذه هي النتيجة.

وهذا شرح الكود.

في هذا المثال، يتم إنشاء شبكة Grid بواسطة خاصية `display: grid` التي تحدد العنصر "container" كعنصر شبكة. يتم تحديد عدد الأعمدة والصفوف باستخدام `grid-template-columns` و `grid-template-rows` على التوالي. في هذه الحالة، تم تعيين عمود واحد فقط باستخدام `1fr`، بينما تم تعيين صفين باستخدام `50px` و `1fr` على التوالي.

ويتم تحديد المسافات بين العناصر باستخدام `gap`، والذي يحدد المسافة بين العناصر في الشبكة. في هذا المثال، تم تعيين 40 بيكسل كمسافة بين العناصر.

وتم تحديد خصائص النص وعناصر العنوان باستخدام الفئات "header" و "text" على التوالي. يتم تعيين خصائص النص والعنوان بشكل فردي باستخدام CSS العادي.

بشكل عام، يتم استخدام الـ Grid في CSS لتحسين تصميم صفحات الويب وتحديد تخطيط الصفحة بشكل أفضل وأكثر فعالية. ويمكن استخدام Grid لتحسين تنظيم العناصر، مثل القوائم أو الجداول، وتحسين تصميم الصفحة بشكل عام.

وهذه بعض المقالات التي تشرح ال Grid Layout بالتفصيل.

وهذا توثيق كامل لل Grid Layout من موسوعة حسوب.

الخاصية grid - موسوعة حسوب (hsoub.com)

بلال زيادة · 12 يونيو 2023

في CSS ، يتم استخدام Grid و Gap لتحسين تصميم صفحات الويب وتنظيم العناصر الموجودة في الشبكة.

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

أما ال Gap ، فهو خاصية تستخدم لتحديد المسافة بين العناصر في Grid. يعمل Gap على تحديد المسافة العمودية والأفقية بين العناصر المجاورة. يمكنك تعيين قيمة لـ Gap لإضافة فراغ بين العناصر وتحسين تباعدها وتنظيمها بشكل أفضل.

استخدام Grid و Gap يوفر العديد من الفوائد في تصميم صفحات الويب، بما في ذلك:

تنظيم وتنسيق العناصر: يسمح Grid بتقسيم صفحة الويب إلى قسم منتظم من الصفوف والأعمدة ، وبالتالي يمكنك تنظيم العناصر بشكل أفضل وتنسيقها وفقًا للاحتياجات الخاصة بك.
الاستجابة والتوافقية: يمكنك استخدام Grid لإنشاء تصاميم مستجيبة تتكيف مع مختلف أحجام الشاشة وأجهزة الجهاز. يمكنك تعيين حجم الصفوف والأعمدة لتعديلها تلقائيًا بناءً على العرض المتاح.
تحقيق تنظيم نظامي: باستخدام Grid ، يمكنك إنشاء تنظيم نظامي ومتناغم للعناصر في صفحتك. يمكنك
توزيع العناصر بالتساوي على الشبكة وتحقيق تناغم بينها.
إعادة ترتيب العناصر: يمكنك تغيير ترتيب العناصر في الشبكة باستخدام Grid ، وذلك باستخدام خصائص مثل grid-template-areas و grid-template-columns و grid-template-rows.
تحسين قابلية الصيانة: باستخدام Grid ، يمكنك إنشاء تصميمات قابلة للصيانة بسهولة. يمكنك تحديد العناصر بشكل مستقل وتعديلها دون التأثير على بقية الشبكة.

باختصار ، استخدام Grid و Gap في CSS يساعد في تنظيم وتحسين تصميم صفحات الويب بشكل كبير من خلال إعطاءك التحكم في الموقع والتنسيق والتباعد بين العناصر.

Mustafa Suleiman · 12 يونيو 2023

تم توضيح الأمر بشكل كافي، ولكن أنت بحاجة إلى رؤية الأمر بشكل عملي لتستوعبه، وإليك الشرح من خلال أمثلة.

ولتوضيح فائدة الـ grid (الشبكة) والـ gap (الفراغات)، انظر إلى الكود التالي المستخدم في تصميم واجهة المستخدم.

HTML

<div class="container">
  <div class="item">عنصر 1</div>
  <div class="item">عنصر 2</div>
  <div class="item">عنصر 3</div>
  <div class="item">عنصر 4</div>
  <div class="item">عنصر 5</div>
  <div class="item">عنصر 6</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.item {
  background-color: #eaeaea;
  padding: 20px;
  text-align: center;
}

والنتيجة هي:

Screenshot2023-06-12135836.png.bf719ff2cfa3224926a9c6564c8808e5.png

في كود HTML يوجد عناصر ستتم توزيعها باستخدام الشبكة (grid) مع 3 أعمدة (columns)، والفراغ بين العناصر سيكون 20 بكسل (الـ gap).

والفوائد التي حققناها باستخدام الـ grid هي:

توزيع العناصر بشكل متساوٍا على الأعمدة والصفوف، مع وجود فراغات بحجم 20 بكسل بينها.
ستظهر العناصر في صورة شبكة منتظمة ومتساوية الأبعاد، مما يخلق تناغم بصري في التصميم.
يمكنك تغيير حجم الشاشة أو تحديد حجم العناصر بناءًا على احتياجاتك، وسيتكيف التصميم تلقائيًا مع الشاشة المستخدمة.

وربما يدور في بالك الآن لماذا لم نقم بتنسيق العناصر بشكل عادي بدلاً من استخدام Grid؟

أولاً يمنحك الـ grid قدرًا كبيرًا من التحكم في توزيع العناصر. يمكنك تحديد عدد الأعمدة والصفوف، وتحديد أحجام العناصر والفراغات بينها بشكل محدد، مما يعني أنه يمكنك تنفيذ تصميمات معقدة بسهولة.

يسمح لك أيضًا بتعديل توزيع العناصر بناءً على حجم الشاشة وجهاز العرض، وتغيير عدد الأعمدة وأحجام العناصر بناءًا على الاحتياجات المحددة لكل حجم شاشة، مما يعني أن واجهتك ستكون متجاوبة وتعمل بشكل جيد على مختلف الأجهزة.

ودعنا نقارن الكود السابق الذي يستخدم الـ grid مع كود يستخدم تنسيقات CSS العادية ولا يعتمد على flex أو Grid.

الكود باستخدام تنسيقات CSS العادية لتحقيق نفس الشكل والتنسيق:

<table class="container">
  <tr>
    <td class="item">عنصر 1</td>
    <td class="item">عنصر 2</td>
    <td class="item">عنصر 3</td>
  </tr>
  <tr>
    <td class="item">عنصر 4</td>
    <td class="item">عنصر 5</td>
    <td class="item">عنصر 6</td>
  </tr>
</table>

<style>
.container {
  border-collapse: separate;
  border-spacing: 20px;
}

.item {
  background-color: #eaeaea;
  padding: 20px;
  text-align: center;
}
</style>

في الكود الذي يستخدم الـ grid، نستخدم العنصر <div> كعناصر واجهة المستخدم ونعمل على تحقيق توزيعها بواسطة الـ grid، أما في الكود الذي يستخدم تنسيقات الجدول، نستخدم العناصر <table>, <tr>, و <td> لتحقيق التنسيق المطلوب.

لكن هناك فارق كبير جدًا بين استخدام Grid وFlex في إنشاء الواجهة وتقسميم عناصر الصفحة، وبين استخدام الجدول وخصائص CSS الأخرى.

حيث أنه لديك تحكم كامل من خلال Grid وFlex بينما في الجدول مثلاً لديك إمكانيات محدودة جدًا ومعقدة في الاستخدام.

وبخصوص الـ gap فالصورة بألف كلمة، وستفهم ما أقصده من خلال الصورة التالية:

فكما ترى يوجد مساحة بحجم 10 بكسل، في الصفوف والأعمدة، فجيب الإنتباه إلى أن gap:10px هي إختصار للكود التالي:

  row-gap: 10px;
  column-gap: 10px;

فبإمكانك تخصيص الفراغ بين الأعمدة والصفوف بشكل منفصل لكل منهما بدلاً من استخدام gap.

وأيضًا يجب عليك الإنتباه إلى الفرق بين Flex وGrid حيث أن Flex يستخدم لإنشاء واجهة أحادية البعد أي على شكل رأسي أو أفقي فقط، بينما Grid نستطيع إنشاء شبكة متعددة الأبعاد بداخله كالتالي:

وأنصحك باستخدام الأداة التالية أثناء تعلم Grid وFlex في البداية لكي تفهم الخواص الخاصة بهم بشكل أسهل حتى تعتاد عليها:

عبدالباسط ابراهيم · 12 يونيو 2023

قبل شرح ال gap يجب عليك أولاً التعرف على ال flexbox ثم التعرف على ال grid لأن هذه الطرق هي الأحدث للتعامل مع تخطيط الموقع بسهولة وبكفاءة عالية

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

لذلك قم بالإطلاع على المقالات التالية للمزيد من المعلومات

27 يونيو 2023

Grid و Gap هما خصائص في CSS تستخدم لتحسين تصميم صفحات الويب. بإستخدام Grid ، يمكن للمطورين تحديد أعمدة وصفوف لتنظيم المحتوى على صفحة الويب. وباستخدام Gap، يمكن إضافة فراغ (مسافة) بين الصفوف والأعمدة لجعل التصميم أكثر تنظيما وسهولة قراءته واستخدامه.

فوائد استخدام Grid:
- يوفر تنظيمًا احترافيًا ومنظمًا لتصميم صفحات الويب.
- يساعد على تقليل كود CSS اللازم لتخصيص المواقع.
- يتيح التحكم الكامل في المسافات بين العناصر وتحديد الطول والعرض الخاص بكل صف وعمود.

فوائد استخدام Gap:
- يجعل التصميم أكثر نظامية وترتيبًا.
- يساعد على تحسين قراءة المستخدمين وتحسين تجربة المستخدم.
- يعزز الاتساق في التصميم، ويحرص على تناسق جميع العناصر بشكل أفضل.

لاستخدام Grid و Gap، يجب اتباع الخطوات التالية:
1. قم بإنشاء عنصر grid container لتحديد المنطقة التي ستحتوي على نظام الشبكة.
2. قم بتحديد العناصر الفرعية داخل العنصر الرئيسي باستخدام الشبكة (grid items).
3. استخدم خصائص Gap لتحديد المسافات بين العناصر والأعمدة والصفوف.

في النهاية، Grid و Gap هما أدوات قوية في CSS لتحسين تصميم صفحات الويب وجعلها مرتبة ونظيفة.

ما هي فوائد استخدام Grid و Gap في CSS؟ وكيف يتم استخدامهما لتحسين تصميم صفحات الويب؟

السؤال

أبي عبد الرحمان نزار

رابط هذا التعليق

شارك على الشبكات الإجتماعية

6 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد Fahmy

رابط هذا التعليق

شارك على الشبكات الإجتماعية

بلال زيادة

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عبدالباسط ابراهيم

رابط هذا التعليق

شارك على الشبكات الإجتماعية

لعلامي صلاح الدين لعلامي

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية