تخطيط الشبكة في عمود باستخدام CSS-grid

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

كل ما تحتاجه لإنشاء تخطيط شبكي متجاوب هو تحديد الحد الأدنى لحجم العمود باستخدام خاصية CSS المخصصة (custom property). قد تختلف الآراء حول الحاجة إلى مثل هذه الشبكات، ولكن من وجهة نظري، تمثل أداة تنقل ممتازة يمكن تطويرها، حيث تظهر استعلامات مصممة بشكل جميل عند فتح الصفحة. كما يتم عرض كل شيء بشكل صحيح على الأجهزة المحمولة، وهو أمر لا يقل أهمية.

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

شرح كود الشبكة التكيفية (Adaptive Grid) باستخدام CSS

هذا الكود يُنشئ شبكة تكيفية (responsive grid) تلقائية تعيد ترتيب العناصر حسب حجم الشاشة. إليك الشرح التفصيلي:

HTML (هيكل الصفحة)

<ul class="avtosetka">
  <li>Блок 1</li>
  <li>Блок 2</li>
  <!-- ... -->
  <li>Блок 12</li>
</ul>

• نستخدم قائمة غير مرتبة (<ul>) مع صنف avtosetka لإنشاء حاوية الشبكة
• كل عنصر في القائمة (<li>) يمثل بلوك/خلية في الشبكة
• يوجد 12 بلوك كمثال

CSS (التنسيقات)

تنسيقات الشبكة الأساسية:

.avtosetka {
  --auto-grid-min-size: 16rem;
   
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1rem;
}

• --auto-grid-min-size: 16rem: نحدد متغير CSS يحتوي على الحد الأدنى لعرض العمود (16rem)
• display: grid: نحول العنصر إلى حاوية شبكة
• grid-template-columns: نحدد كيفية توزيع الأعمدة:
  • repeat(auto-fill, ...): تملأ الصفوف تلقائياً بعدد الأعمدة المناسب
  • minmax(var(--auto-grid-min-size), 1fr): كل عمود سيكون عرضه على الأقل 16rem، وإذا توفر مساحة أكبر سيتم توزيعها بالتساوي (1fr)
• grid-gap: 1rem: مسافة 1rem بين الخلايا

تنسيقات التقديم/العرض:

body {
  background: #efefef;
  padding: 1rem;
  line-height: 1.4;
  font-family: sans-serif;
}

تنسيقات عامة للصفحة: لون خلفية رمادي، حواف داخلية، نوع خط، إلخ.

تنسيقات عناصر الشبكة:

li {
  padding: 4rem 1.4rem;
  text-align: center;
  font-size: 1.2rem;
  background: #af302e;
  color: #efe8e8;
}

كل عنصر <li> (خلية الشبكة) له:

• حواف داخلية: 4rem أعلى/أسفل و1.4rem يمين/يسار
• نص في المنتصف
• حجم خط 1.2rem
• لون خلفية أحمر داكن (#af302)
• لون نص فاتح (#efe8e8)

كيف تعمل هذه الشبكة؟

1. عند عرض الصفحة على شاشة كبيرة:
   • ستعرض أكبر عدد ممكن من الأعمدة بعرض 16rem أو أكثر
   • المساحة الزائدة يتم توزيعها بالتساوي بين الأعمدة
2. عند تصغير الشاشة:
   • عندما لا يتسع صف كامل لأعمدة بعرض 16rem، سينتقل العمود الأخير لصف جديد
   • تستمر هذه العملية حتى يصبح عمود واحد في كل صف على الشاشات الصغيرة جداً
3. المسافات (grid-gap) تبقى ثابتة (1rem) بين جميع الخلايا

مميزات هذا النهج:

• تجاوبي تلقائي: لا حاجة لكتابة media queries متعددة
• مرن: يمكن تغيير الحد الأدنى للعرض بسهولة بتعديل المتغير
• متوافق: يعمل في جميع المتصفحات الحديثة
• نظيف: لا حاجة لاستخدام float أو inline-block

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

الكود كاملا

<ul class="avtosetka">
  <li>Блок 1</li>
  <li>Блок 2</li>
  <li>Блок 3</li>
  <li>Блок 4</li>
  <li>Блок 5</li>
  <li>Блок 6</li>
  <li>Блок 7</li>
  <li>Блок 8</li>
  <li>Блок 9</li>
  <li>Блок 10</li>
  <li>Блок 11</li>
  <li>Блок 12</li>
</ul>
<ul class="avtosetka">
  <li>Блок 1</li>
  <li>Блок 2</li>
  <li>Блок 3</li>
  <li>Блок 4</li>
  <li>Блок 5</li>
  <li>Блок 6</li>
  <li>Блок 7</li>
  <li>Блок 8</li>
  <li>Блок 9</li>
  <li>Блок 10</li>
  <li>Блок 11</li>
  <li>Блок 12</li>
</ul>
    

.avtosetka {
  --auto-grid-min-size: 16rem;
   
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1rem;
}

/* Презентационные стили*/
body {
  background: #efefef;
  padding: 1rem;
  line-height: 1.4;
  font-family: sans-serif;
}
li {
  padding: 4rem 1.4rem;
  text-align: center;
  font-size: 1.2rem;
  background: #af302e;
  color: #efe8e8;
}
    

معاينة

كيف كان المقال؟