تخطيط الصفحات باستخدام Flexbox وGrid

شريط تنقّل: الشعار إلى اليسار، والروابط في الوسط، وزر إلى اليمين. تكتب flex، وتضيف justify-between، فتكون النتيجة قريبة من المطلوب، لكن الروابط ليست متمركزة في الصفحة، بل تطفو في منتصف المساحة المتبقية، ويختل كل شيء بمجرد أن يكون اسم المستخدم أطول. فتضيف flex-1، ثم mx-auto، ثم w-1/3 الذي يعالج العَرَض لكنه يُفسد العرض على الجوال. بعد ساعة، تجد نفسك أمام ست classes ترقيعية وتخطيط هشّ.

المشكلة ليست في Tailwind تقريبًا أبدًا، بل في أن Flexbox وGrid لا يخدمان الغرض نفسه، وأن نصف صعوبات المحاذاة ناتج عن اختيار الأداة الخطأ من بينهما. يوزّع Flexbox العناصر على محور واحد ويترك أحجامها تتكيّف مع المحتوى: إنه أداة الأشرطة ومجموعات الأزرار وأسطر البيانات الوصفية. أما Grid فيضع بنية ثنائية الأبعاد تُحدَّد مسبقًا ولا تعتمد على المحتوى: إنه أداة شبكات البطاقات وقوالب الصفحات والنماذج المحاذاة. وشريط التنقّل ذو المناطق الثلاث الثابتة مشكلة تخص Grid لا Flexbox، ومن هنا ضاعت الساعة.

شريط تنقّل

لنبدأ بنسخة Flexbox، المناسبة حين لا تحتاج الروابط إلى التمركز في منتصف الصفحة:

<header class="border-b border-slate-200 bg-white">
  <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
    <a href="/" class="text-lg font-bold text-slate-900">Skillverse</a>

    <nav class="hidden items-center gap-6 md:flex">
      <a href="/cours" class="text-sm text-slate-600 hover:text-slate-900">Cours</a>
      <a href="/tarifs" class="text-sm text-slate-600 hover:text-slate-900">Tarifs</a>
    </nav>

    <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white">
      Se connecter
    </button>
  </div>
</header>