M

MLOG

العربية

أطلق العنان لقوة CSS Grid و Flexbox! تعلم متى تستخدم كل طريقة تخطيط لتحقيق أفضل تصميم وتطوير للويب.

CSS Grid مقابل Flexbox: اختيار أداة التخطيط المناسبة للمهمة

في عالم تطوير الويب المتطور باستمرار، يعد إتقان تقنيات التخطيط أمرًا بالغ الأهمية. تبرز أداتان قويتان لتخطيط CSS هما: CSS Grid و Flexbox. بينما تتفوق كلتاهما في إنشاء تصميمات متجاوبة وديناميكية، إلا أن لكل منهما نقاط قوة مميزة وتناسب سيناريوهات مختلفة. يتعمق هذا الدليل في المفاهيم الأساسية لكل طريقة، ويقدم أمثلة عملية ورؤى لمساعدتك في اختيار الأداة المناسبة للمهمة.

فهم الأساسيات

ما هو Flexbox؟

Flexbox، وهو اختصار لـ Flexible Box Layout، هو نموذج تخطيط أحادي البعد. يتفوق في توزيع المساحة بين العناصر في صف أو عمود واحد. تخيل محاذاة العناصر في شريط تنقل أو توزيع العناصر داخل مكون بطاقة - يتألق Flexbox في هذه السيناريوهات.

المفاهيم الأساسية:

ما هو CSS Grid؟

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

المفاهيم الأساسية:

Flexbox في التطبيق العملي: التخطيطات أحادية البعد

يتألق Flexbox حقًا عند التعامل مع التخطيطات أحادية البعد. إليك بعض حالات الاستخدام الشائعة:

أشرطة التنقل

يعد إنشاء شريط تنقل متجاوب تطبيقًا كلاسيكيًا لـ Flexbox. يمكنك بسهولة محاذاة عناصر التنقل أفقيًا، وتوزيع المسافات بينها بالتساوي، والتعامل مع التجاوز (overflow) برشاقة على الشاشات الأصغر.


<nav class="navbar">
  <a href="#" class="logo">العلامة التجارية</a>
  <ul class="nav-links">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">حول</a></li>
    <li><a href="#">الخدمات</a></li>
    <li><a href="#">اتصل بنا</a></li>
  </ul>
</nav>


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f0f0f0;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 1rem;
}

يوضح هذا المثال كيف يمكن لـ Flexbox توزيع المساحة بسهولة بين الشعار وروابط التنقل، مع محاذاتها عموديًا أيضًا.

مكونات البطاقات

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


<div class="card">
  <img src="image.jpg" alt="صورة البطاقة">
  <div class="card-content">
    <h2>عنوان البطاقة</h2>
    <p>هذا وصف قصير لمحتوى البطاقة.</p>
    <button>اعرف المزيد</button>
  </div>
</div>


.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1rem;
}

هنا، يقوم Flexbox بترتيب الصورة والعنوان والوصف والزر عموديًا داخل البطاقة. يضمن استخدام flex-direction: column; تكديس المحتوى بشكل مناسب.

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

يعد تحقيق أعمدة متساوية الارتفاع، وهو متطلب تصميم شائع، أمرًا مباشرًا مع Flexbox. من خلال تطبيق display: flex; على الحاوية الأصل و flex: 1; على كل عمود، ستمتد تلقائيًا إلى ارتفاع أطول عمود.


<div class="container">
  <div class="column">العمود 1 - بعض المحتوى الأقصر.</div>
  <div class="column">العمود 2 - هذا العمود يحتوي على محتوى أكثر. هذا العمود يحتوي على محتوى أكثر. هذا العمود يحتوي على محتوى أكثر. هذا العمود يحتوي على محتوى أكثر.</div>
  <div class="column">العمود 3</div>
</div>


.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 1rem;
  border: 1px solid #eee;
}

تخبر خاصية flex: 1; كل عمود بالنمو بالتساوي، مما يؤدي إلى أعمدة متساوية الارتفاع بغض النظر عن طول محتواها.

مجال CSS Grid: التخطيطات ثنائية الأبعاد

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

تخطيطات المواقع (الترويسات، التذييلات، الأشرطة الجانبية)

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


<div class="grid-container">
  <header class="header">الترويسة</header>
  <nav class="nav">التنقل</nav>
  <main class="main">المحتوى الرئيسي</main>
  <aside class="sidebar">الشريط الجانبي</aside>
  <footer class="footer">التذييل</footer>
</div>


.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav nav nav"
    "sidebar main main"
    "footer footer footer";
  gap: 10px;
  height: 100vh; /* Ensure the grid covers the viewport height */
}

.header { grid-area: header; background-color: #eee; padding: 1em; }
.nav { grid-area: nav; background-color: #ddd; padding: 1em;}
.main { grid-area: main; background-color: #ccc; padding: 1em; }
.sidebar { grid-area: sidebar; background-color: #bbb; padding: 1em; }
.footer { grid-area: footer; background-color: #aaa; padding: 1em; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Single column layout */
    grid-template-rows: auto auto 1fr auto auto; /* Add a row for the sidebar */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
  }
}

يستخدم هذا المثال grid-template-areas لتحديد التخطيط، مما يجعل الكود قابلاً للقراءة والصيانة بدرجة عالية. يمكن للاستعلامات الإعلامية (Media queries) إعادة ترتيب التخطيط بسهولة لأحجام الشاشات المختلفة.

النماذج المعقدة

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


<form class="grid-form">
  <label for="name">الاسم:</label>
  <input type="text" id="name" name="name">
  <label for="email">البريد الإلكتروني:</label>
  <input type="email" id="email" name="email">
  <label for="message">الرسالة:</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">إرسال</button>
</form>


.grid-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 1rem;
}

.grid-form label {
  text-align: right;
}

.grid-form button {
  grid-column: span 2; /* Span across both columns */
  text-align: center;
}

يضع هذا المثال التسميات على اليسار وحقول الإدخال على اليمين، مما يخلق نموذجًا جذابًا بصريًا ومنظمًا. يمتد زر الإرسال على كلا العمودين للتأكيد.

تخطيطات المعارض

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


<div class="gallery">
  <img src="image1.jpg" alt="صورة 1">
  <img src="image2.jpg" alt="صورة 2">
  <img src="image3.jpg" alt="صورة 3">
  <img src="image4.jpg" alt="صورة 4">
  <img src="image5.jpg" alt="صورة 5">
  <img src="image6.jpg" alt="صورة 6">
</div>


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}

تنشئ خاصية grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); معرضًا متجاوبًا يضبط عدد الأعمدة تلقائيًا بناءً على حجم الشاشة.

متى تستخدم Flexbox: دليل سريع

متى تستخدم CSS Grid: دليل سريع

الجمع بين Flexbox و Grid: مزيج قوي

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

على سبيل المثال، قد تستخدم Grid لإنشاء التخطيط الأساسي لموقع ويب (ترويسة، تنقل، محتوى رئيسي، شريط جانبي، تذييل). بعد ذلك، داخل منطقة المحتوى الرئيسية، يمكنك استخدام Flexbox لترتيب سلسلة من البطاقات أو محاذاة العناصر داخل نموذج.

اعتبارات إمكانية الوصول

عند استخدام Flexbox و Grid، من الضروري مراعاة إمكانية الوصول. تأكد من أن تخطيطاتك دلالية وأن ترتيب العناصر في كود مصدر HTML منطقي حتى لو كان الترتيب المرئي مختلفًا. استخدم سمات ARIA لتوفير سياق ومعلومات إضافية للتقنيات المساعدة.

اعتبارات الأداء

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

توافق المتصفحات

يتمتع Flexbox و Grid بدعم ممتاز عبر المتصفحات الحديثة. ومع ذلك، من الجيد دائمًا التحقق من جداول التوافق (على سبيل المثال، على موقع Can I use...) وتوفير حلول بديلة للمتصفحات القديمة إذا لزم الأمر. ضع في اعتبارك استخدام Autoprefixer لإضافة بادئات الموردين تلقائيًا لتوافق أوسع.

أمثلة عملية من جميع أنحاء العالم

فيما يلي بعض الأمثلة على كيفية استخدام Flexbox و Grid في مواقع الويب والتطبيقات الواقعية، مستمدة من مناطق مختلفة:

الخلاصة: اختيار الأداة المناسبة

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

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

مصادر إضافية للتعلم