تُعد تقنيات CSS Grid و Flexbox من أبرز أدوات التنسيق في CSS، حيث تسهل تصميم وترتيب العناصر بطريقة منظمة واستجابة. ورغم أن كلاهما يُستخدم لإنشاء تخطيطات متجاوبة، إلا أن هناك فروقاً جوهرية بينهما تجعل كلاً منهما مناسباً لاستخدامات معينة. في هذا الدرس، سنتعرف على الفرق بين CSS Grid و Flexbox، ونستعرض حالات الاستخدام المثالية لكل منهما.
ما هو CSS Grid؟
CSS Grid هو نظام تنسيق ثنائي الأبعاد (صفوف وأعمدة) يسمح لك بترتيب العناصر في شبكة Grid. يُعتبر Grid مثاليًا عندما تحتاج إلى إنشاء تخطيطات معقدة تحتوي على عدة صفوف وأعمدة، حيث يمكن تنظيم العناصر بسهولة عبر الشبكة وفقًا للهيكل المحدد.
أساسيات CSS Grid
تتألف Grid من صفوف وأعمدة، ويُمكن التحكم بحجم وتوزيع هذه الشبكة باستخدام خاصيات مثل:
grid-template-columns: لتحديد عدد الأعمدة وأحجامها.grid-template-rows: لتحديد عدد الصفوف وأحجامها.grid-gapأوgap: لتحديد المسافات بين العناصر.
مثال على Grid
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}في هذا المثال، يحتوي الحاوي .container على ثلاث أعمدة متساوية العرض مع مسافة 10px بين العناصر.
ما هو Flexbox؟
Flexbox هو نظام تنسيق أحادي الأبعاد يُستخدم لترتيب العناصر إما في صف أو عمود واحد، ويُعتبر مثالياً لعمليات المحاذاة البسيطة التي لا تتطلب تقسيم التخطيط إلى صفوف وأعمدة متعددة. يُستخدم Flexbox بكثرة في محاذاة العناصر الأفقية أو العمودية داخل الحاويات.
أساسيات Flexbox
من بين الخصائص الرئيسية التي تُستخدم في Flexbox:
justify-content: للتحكم بمحاذاة العناصر أفقياً.align-items: للتحكم بمحاذاة العناصر عموديًا.flex-direction: لتحديد اتجاه العناصر (أفقي أو عمودي).
مثال على Flexbox
.container {
display: flex;
justify-content: center;
align-items: center;
}في هذا المثال، يتم عرض العناصر داخل الحاوي .container أفقيًا في المنتصف.
مقارنة بين CSS Grid و Flexbox
| الخاصية | CSS Grid | Flexbox |
|---|---|---|
| النوع | ثنائي الأبعاد (صفوف وأعمدة) | أحادي الأبعاد (إما صف أو عمود) |
| التخطيطات المعقدة | مناسب للتخطيطات الشبكية المعقدة | مناسب للتخطيطات البسيطة والمحاذاة |
| التوزيع والمسافات | يوفر مرونة عالية في توزيع العناصر | جيد لتوزيع العناصر في مساحة محدودة |
| التحكم بالاتجاه | يعمل في كلا الاتجاهين بنفس الكفاءة | يعتمد على flex-direction للتحكم بالاتجاه |
| سهولة الاستخدام | يحتاج إلى إعدادات أكثر للتخطيطات الكبيرة | مناسب لعمليات المحاذاة المباشرة والبسيطة |
متى نستخدم CSS Grid؟
CSS Grid يُستخدم عندما:
- تحتاج إلى إنشاء تخطيطات معقدة تحتوي على صفوف وأعمدة متعددة.
- تريد إنشاء هيكل شبكي مخصص يمكن توزيع العناصر فيه بشكل متساوٍ أو غير متساوٍ.
- تحتاج إلى توزيع المسافات بين العناصر بطريقة مرنة في كلا الاتجاهين.
أمثلة لاستخدام Grid:
- تخطيط صفحات المدونات حيث يحتوي كل صف على عدة مقالات.
- صفحات المنتجات في المتاجر الإلكترونية، حيث تعرض المنتجات في صفوف وأعمدة.
- بناء تذييلات (footers) تحتوي على عدة أقسام مصفوفة في شبكة.
متى نستخدم Flexbox؟
Flexbox يُستخدم عندما:
- تحتاج إلى محاذاة العناصر في صف أو عمود واحد فقط.
- تريد توزيع المسافات بين العناصر بشكل متساوٍ في مساحة محدودة.
- تحتاج إلى إنشاء تخطيطات بسيطة تعتمد على المحاذاة السريعة.
أمثلة لاستخدام Flexbox:
- محاذاة القوائم الأفقية مثل شريط التنقل (navbar).
- ترتيب العناصر داخل بطاقة أو صندوق بحيث تكون العناصر في اتجاه واحد.
- ترتيب أزرار التحكم أو الأيقونات في صف أو عمود.
مثال عملي يجمع بين CSS Grid و Flexbox
في بعض الأحيان، قد تحتاج إلى استخدام Flexbox و Grid معاً للاستفادة من مزايا كليهما. لنفترض أننا نريد إنشاء صفحة تحتوي على تخطيط شبكي للمنتجات، وعناصر داخل كل بطاقة منتج مرتبة باستخدام Flexbox.
<div class="product-grid">
<div class="product-card">
<img src="product.jpg" alt="Product">
<div class="product-info">
<h3>اسم المنتج</h3>
<p>الوصف</p>
<button>أضف إلى السلة</button>
</div>
</div>
</div>CSS
/* استخدام Grid لتوزيع البطاقات */
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* استخدام Flexbox لمحاذاة محتوى البطاقة */
.product-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 1px solid #ccc;
}
.product-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}تفسير المثال
- التخطيط الشبكي باستخدام Grid: قمنا باستخدام
grid-template-columns: repeat(3, 1fr)لإنشاء شبكة من ثلاث أعمدة متساوية العرض، مما يسمح لنا بعرض المنتجات بترتيب شبكي. - محاذاة العناصر باستخدام Flexbox: في داخل كل بطاقة منتج، استخدمنا Flexbox لمحاذاة محتوى البطاقة عموديًا بحيث تكون العناصر متراصة في المنتصف، مما يجعل التصميم متناسقًا.
خاتمة
سواء كنت بحاجة إلى تخطيط ثنائي الأبعاد معقد باستخدام CSS Grid أو ترتيب عناصر بسيطة في صف أو عمود باستخدام Flexbox، فإن معرفة الفرق بين التقنيتين تساعدك على اختيار الأنسب لتصميمك. استخدام التقنيتين معًا في نفس المشروع يمنحك المرونة اللازمة لبناء تصاميم تفاعلية وجذابة تلبي احتياجات المستخدم وتجعل التصميم متجاوبًا مع مختلف الأجهزة.
