لقد تعلمت في دليلنا الأساسي لـ HTML و CSS كيف تغير الألوان والخطوط والهوامش. لكن، كيف يمكنك ترتيب العناصر بجانب بعضها؟ كيف تنشئ شريط تنقل (Navbar) أو تقسم صفحتك إلى أعمدة؟
لسنوات، كان المطورون يعانون مع "الاختراقات" (Hacks) مثل float و clear لترتيب العناصر. كان الأمر معقداً ومحبطاً. لكن اليوم، لدينا أداتان ثوريتان في CSS جعلتا تصميم التنسيقات (Layouts) أمراً ممتعاً ومنطقياً: Flexbox و CSS Grid.
لكن السؤال الذي يطرحه كل مبتدئ: ما الفرق بينهما؟ ومتى أستخدم أياً منهما؟ دعنا نوضح الأمر ببساطة.
1. فهم Flexbox (الصندوق المرن)
الفكرة الأساسية: Flexbox مصمم لترتيب العناصر في بعد واحد (1D) – إما كصف أفقي أو كعمود رأسي.
إنه مثالي لمحاذاة مجموعة من العناصر في خط مستقيم وتوزيع المسافات بينها. بمجرد أن تخبر الحاوية (Container) أن تستخدم display: flex;، يصبح لديك قوى خارقة للتحكم في العناصر (Items) بداخلها.
متى تستخدم Flexbox؟
- عندما تريد محاذاة عناصر في صف واحد (مثل قائمة التنقل
<nav>). - عندما تريد محاذاة عناصر في عمود واحد (مثل قائمة بطاقات).
- عندما تريد توسيط عنصر (أفقياً وعمودياً) بسهولة تامة.
- لتغيير ترتيب العناصر: يمكنك استخدام خاصية
orderلتغيير الترتيب البصري للعناصر دون تغيير ترتيبها في كود HTML.
مثال بسيط: شريط تنقل (Navbar)
تخيل أن لديك قائمة روابط وتريد ترتيبها أفقياً:
/* HTML: <nav><a>...</a><a>...</a></nav> */
nav {
display: flex; /* تفعيل Flexbox */
justify-content: space-between; /* توزيع المسافات بين العناصر */
align-items: center; /* توسيط العناصر عمودياً */
background-color: #333;
padding: 1rem;
}
nav a {
color: white;
text-decoration: none;
padding: 0 10px;
}
بهذه البساطة، لديك شريط تنقل متجاوب ومصطف بشكل مثالي. الميزة الإضافية: Flexbox متجاوب بطبيعته. إذا لم يكن هناك مساحة كافية، فإنه يحاول ضغط العناصر للحفاظ على التنسيق قدر الإمكان.
2. فهم CSS Grid (الشبكة)
الفكرة الأساسية: Grid مصمم لترتيب العناصر في بعدين (2D) – أي في صفوف وأعمدة في نفس الوقت.
إنه الأداة المثالية لتخطيط الصفحة الرئيسية بالكامل. يمكنك تقسيم صفحتك إلى شبكة (مثل 12 عموداً) وتحديد مكان كل عنصر بدقة (مثل "هذا العنصر يمتد من العمود 1 إلى 4"، "وهذا يمتد من العمود 5 إلى 12").
متى تستخدم CSS Grid؟
- عندما تريد تصميم التخطيط الرئيسي لصفحتك (رأس، محتوى، شريط جانبي، تذييل).
- عندما تحتاج إلى محاذاة عناصر في صفوف وأعمدة معقدة (مثل معرض صور شبكي).
- عندما تريد التحكم الدقيق في مكان وحجم العناصر في بعدين.
- للتجاوبية المتقدمة: يمكنك استخدام دوال مثل
repeatوauto-fitلإنشاء تخطيطات تتكيف تلقائيًا مع حجم الشاشة دون الحاجة لاستعلامات وسائط (Media Queries) كثيرة.
مثال بسيط: تخطيط مدونة
تخيل أنك تريد تقسيم صفحة لعمود محتوى رئيسي وعمود شريط جانبي:
/* HTML: <div class="container"><main>...</main><aside>...</aside></div> */
.container {
display: grid; /* تفعيل Grid */
grid-template-columns: 3fr 1fr; /* عمود رئيسي (3 أجزاء) وعمود جانبي (جزء واحد) */
gap: 20px; /* مسافة بين الأعمدة */
}
ملاحظة تقنية (وحدة `fr`): الـ fr هي وحدة قياس جديدة في Grid تعني "الجزء الكسري" (Fractional Unit). 3fr 1fr تعني أن العمود الأول سيأخذ 3 أجزاء من المساحة المتاحة، والعمود الثاني سيأخذ جزءاً واحداً، مما يجعل العمود الرئيسي أكبر بثلاث مرات. هذه الوحدة تجعل التصميم المتجاوب أسهل بكثير.
القاعدة الذهبية: Flexbox أم Grid؟
- استخدم Flexbox للتحكم في العناصر داخل مكون واحد (مثل ترتيب الأزرار داخل
<div>أو الروابط داخل<nav>). إنه رائع للمحاذاة والتوزيع في خط واحد. - استخدم Grid للتحكم في التخطيط العام للصفحة (ترتيب المكونات الكبيرة مثل
<header>,<main>,<aside>). إنه رائع للتخطيط في بعدين.
الأفضل من ذلك: استخدمهما معاً! يمكنك استخدام Grid لتخطيط الصفحة، ثم استخدام Flexbox لمحاذاة العناصر (مثل توسيط النص والصورة) داخل كل جزء من أجزاء الشبكة.
الخلاصة: أدوات قوية لتصميمات حديثة
قد يبدو Flexbox و Grid مخيفين في البداية، لكنهما في الحقيقة يبسطان عملية تصميم التنسيقات بشكل لا يصدق. بمجرد أن تبدأ في استخدامهما، ستتساءل كيف كنت تصمم المواقع بدونهما. هذه الأدوات هي أساس أي تصميم حديث ومستجيب (Responsive Design).
أفضل طريقة لتعلمهما هي بالتجربة. افتح محرر الويب المباشر الخاص بنا، أنشئ بعض الصناديق <div>، وجرب تطبيق display: flex; و display: grid; لترى بنفسك القوة الهائلة في التحكم في التنسيق!
✍️ كتب بواسطة KamalZone
