التحجيم: العرض والارتفاع والحد الأدنى/الأقصى

إتقان أدوات التحجيم في Tailwind CSS

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

أدوات العرض (Width)

يوفر Tailwind طرقاً متعددة للتحكم في عرض العنصر، من القيم الثابتة إلى النسب المئوية السائلة:

<!-- عروض ثابتة باستخدام مقياس المسافات -->
<div class="w-0">عرض 0</div>
<div class="w-1">عرض 0.25rem (4px)</div>
<div class="w-4">عرض 1rem (16px)</div>
<div class="w-8">عرض 2rem (32px)</div>
<div class="w-12">عرض 3rem (48px)</div>
<div class="w-16">عرض 4rem (64px)</div>
<div class="w-24">عرض 6rem (96px)</div>
<div class="w-32">عرض 8rem (128px)</div>
<div class="w-48">عرض 12rem (192px)</div>
<div class="w-64">عرض 16rem (256px)</div>
<div class="w-96">عرض 24rem (384px)</div>

<!-- عرض بيكسل واحد -->
<div class="w-px">عرض 1px</div>

العروض القائمة على النسب المئوية

يوفر Tailwind أدوات عرض قائمة على الكسور تترجم إلى نسب مئوية:

<!-- عرض كامل -->
<div class="w-full">عرض 100%</div>

<!-- نصف العرض -->
<div class="w-1/2">عرض 50%</div>

<!-- عروض الثلث -->
<div class="w-1/3">عرض 33.333%</div>
<div class="w-2/3">عرض 66.666%</div>

<!-- عروض الربع -->
<div class="w-1/4">عرض 25%</div>
<div class="w-2/4">عرض 50% (نفس w-1/2)</div>
<div class="w-3/4">عرض 75%</div>

<!-- عروض الخمس -->
<div class="w-1/5">عرض 20%</div>
<div class="w-2/5">عرض 40%</div>
<div class="w-3/5">عرض 60%</div>
<div class="w-4/5">عرض 80%</div>

<!-- عروض السدس -->
<div class="w-1/6">عرض 16.666%</div>
<div class="w-5/6">عرض 83.333%</div>

<!-- عروض الاثني عشر (شبكة 12 عمود) -->
<div class="w-1/12">عرض 8.333%</div>
<div class="w-2/12">عرض 16.666%</div>
<div class="w-3/12">عرض 25%</div>
<div class="w-4/12">عرض 33.333%</div>
<div class="w-6/12">عرض 50%</div>
<div class="w-8/12">عرض 66.666%</div>
<div class="w-9/12">عرض 75%</div>
<div class="w-11/12">عرض 91.666%</div>

<!-- تخطيط من عمودين -->
<div class="flex gap-4">
  <div class="w-2/3 bg-blue-100 p-4">
    المحتوى الرئيسي (66.666%)
  </div>
  <div class="w-1/3 bg-gray-100 p-4">
    الشريط الجانبي (33.333%)
  </div>
</div>

<!-- شبكة من ثلاثة أعمدة -->
<div class="flex gap-4">
  <div class="w-1/3 bg-blue-100 p-4">عمود 1</div>
  <div class="w-1/3 bg-blue-100 p-4">عمود 2</div>
  <div class="w-1/3 bg-blue-100 p-4">عمود 3</div>
</div>

<!-- تخطيط لوحة تحكم مع شريط جانبي -->
<div class="flex">
  <aside class="w-64 bg-gray-800 text-white p-4">
    شريط جانبي بعرض ثابت (256px)
  </aside>
  <main class="w-full bg-white p-8">
    محتوى رئيسي سائل
  </main>
</div>

العروض القائمة على إطار العرض والشاشة

<!-- عرض الشاشة (100vw) -->
<div class="w-screen">عرض إطار العرض الكامل</div>

<!-- الحد الأدنى والأقصى للمحتوى -->
<div class="w-min">عرض على أساس الحد الأدنى للمحتوى</div>
<div class="w-max">عرض على أساس الحد الأقصى للمحتوى</div>
<div class="w-fit">عرض يناسب المحتوى</div>

<!-- عرض تلقائي -->
<div class="w-auto">عرض تلقائي</div>

<!-- مثال عملي: قسم رئيسي -->
<section class="w-screen bg-gradient-to-r from-blue-500 to-purple-600">
  <div class="max-w-7xl mx-auto px-4 py-16">
    <h1 class="text-4xl font-bold text-white">قسم رئيسي بعرض كامل</h1>
  </div>
</section>

أدوات العرض الأقصى (Maximum Width)

أدوات العرض الأقصى ضرورية لإنشاء مناطق محتوى قابلة للقراءة ومركزية:

<!-- عروض أقصى محددة مسبقاً لحاويات المحتوى -->
<div class="max-w-xs">عرض أقصى 20rem (320px)</div>
<div class="max-w-sm">عرض أقصى 24rem (384px)</div>
<div class="max-w-md">عرض أقصى 28rem (448px)</div>
<div class="max-w-lg">عرض أقصى 32rem (512px)</div>
<div class="max-w-xl">عرض أقصى 36rem (576px)</div>
<div class="max-w-2xl">عرض أقصى 42rem (672px)</div>
<div class="max-w-3xl">عرض أقصى 48rem (768px)</div>
<div class="max-w-4xl">عرض أقصى 56rem (896px)</div>
<div class="max-w-5xl">عرض أقصى 64rem (1024px)</div>
<div class="max-w-6xl">عرض أقصى 72rem (1152px)</div>
<div class="max-w-7xl">عرض أقصى 80rem (1280px)</div>

<!-- قيم عرض أقصى خاصة -->
<div class="max-w-none">بدون قيد عرض أقصى</div>
<div class="max-w-full">عرض أقصى 100%</div>
<div class="max-w-min">عرض أقصى للحد الأدنى للمحتوى</div>
<div class="max-w-max">عرض أقصى للحد الأقصى للمحتوى</div>
<div class="max-w-fit">عرض أقصى يناسب المحتوى</div>
<div class="max-w-prose">عرض أقصى 65ch (عرض القراءة الأمثل)</div>
<div class="max-w-screen-sm">عرض أقصى 640px</div>
<div class="max-w-screen-md">عرض أقصى 768px</div>
<div class="max-w-screen-lg">عرض أقصى 1024px</div>
<div class="max-w-screen-xl">عرض أقصى 1280px</div>
<div class="max-w-screen-2xl">عرض أقصى 1536px</div>

<!-- تخطيط مقالة مدونة -->
<article class="max-w-prose mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-4">عنوان المقال</h1>
  <p class="mb-4">
    طول السطر الأمثل للقراءة حوالي 65 حرفاً.
    تحقق أداة max-w-prose هذا تلقائياً.
  </p>
</article>

<!-- تخطيط تطبيق -->
<div class="max-w-7xl mx-auto px-4">
  <header class="py-6">التنقل</header>
  <main class="py-12">المحتوى الرئيسي</main>
  <footer class="py-8">التذييل</footer>
</div>

<!-- بطاقة في حاوية مركزية -->
<div class="max-w-md mx-auto">
  <div class="bg-white rounded-lg shadow-lg p-6">
    <h3 class="text-xl font-bold mb-2">عنوان البطاقة</h3>
    <p>محتوى البطاقة مع عرض محدود</p>
  </div>
</div>

أدوات العرض الأدنى (Minimum Width)

<!-- قيود العرض الأدنى -->
<div class="min-w-0">عرض أدنى 0</div>
<div class="min-w-full">عرض أدنى 100%</div>
<div class="min-w-min">عرض أدنى للحد الأدنى للمحتوى</div>
<div class="min-w-max">عرض أدنى للحد الأقصى للمحتوى</div>
<div class="min-w-fit">عرض أدنى يناسب المحتوى</div>

<!-- مثال عملي: زر بعرض أدنى -->
<button class="min-w-32 px-4 py-2 bg-blue-500 text-white rounded">
  موافق
</button>

<!-- خلية جدول بعرض أدنى -->
<table>
  <tr>
    <td class="min-w-48">الاسم</td>
    <td>محمد أحمد</td>
  </tr>
</table>

<!-- إدخال نموذج بعرض أدنى -->
<input type="text" class="min-w-64 px-3 py-2 border rounded" placeholder="أدخل النص">

أدوات الارتفاع (Height)

تعمل أدوات الارتفاع بشكل مطابق لأدوات العرض:

<!-- ارتفاعات ثابتة باستخدام مقياس المسافات -->
<div class="h-0">ارتفاع 0</div>
<div class="h-1">ارتفاع 0.25rem (4px)</div>
<div class="h-4">ارتفاع 1rem (16px)</div>
<div class="h-8">ارتفاع 2rem (32px)</div>
<div class="h-12">ارتفاع 3rem (48px)</div>
<div class="h-16">ارتفاع 4rem (64px)</div>
<div class="h-24">ارتفاع 6rem (96px)</div>
<div class="h-32">ارتفاع 8rem (128px)</div>
<div class="h-48">ارتفاع 12rem (192px)</div>
<div class="h-64">ارتفاع 16rem (256px)</div>
<div class="h-96">ارتفاع 24rem (384px)</div>

<!-- ارتفاع بيكسل واحد -->
<div class="h-px">ارتفاع 1px</div>

<!-- ارتفاعات النسبة المئوية -->
<div class="h-full">ارتفاع 100%</div>
<div class="h-1/2">ارتفاع 50%</div>
<div class="h-1/3">ارتفاع 33.333%</div>
<div class="h-2/3">ارتفاع 66.666%</div>
<div class="h-1/4">ارتفاع 25%</div>
<div class="h-3/4">ارتفاع 75%</div>

<!-- ارتفاع إطار العرض -->
<div class="h-screen">ارتفاع إطار العرض الكامل (100vh)</div>

<!-- تلقائي وقيم خاصة -->
<div class="h-auto">ارتفاع تلقائي</div>
<div class="h-min">ارتفاع الحد الأدنى للمحتوى</div>
<div class="h-max">ارتفاع الحد الأقصى للمحتوى</div>
<div class="h-fit">ارتفاع يناسب المحتوى</div>

<!-- أمثلة عملية -->
<!-- قسم رئيسي بارتفاع كامل -->
<section class="h-screen flex items-center justify-center bg-gradient-to-b from-blue-500 to-blue-700">
  <div class="text-center text-white">
    <h1 class="text-5xl font-bold mb-4">مرحباً</h1>
    <p class="text-xl">قسم رئيسي بارتفاع إطار العرض الكامل</p>
  </div>
</section>

<!-- شريط جانبي بارتفاع كامل -->
<div class="flex">
  <aside class="w-64 h-screen bg-gray-800 text-white">
    شريط جانبي بارتفاع ثابت
  </aside>
  <main class="flex-1">المحتوى الرئيسي</main>
</div>

<!-- صورة بنسبة أبعاد ثابتة -->
<div class="w-full h-64 bg-gray-200">
  <img src="image.jpg" class="w-full h-full object-cover" alt="صورة الغلاف">
</div>

الارتفاع الأقصى والأدنى

<!-- قيود الارتفاع الأقصى -->
<div class="max-h-0">ارتفاع أقصى 0</div>
<div class="max-h-1">ارتفاع أقصى 0.25rem</div>
<div class="max-h-full">ارتفاع أقصى 100%</div>
<div class="max-h-screen">ارتفاع أقصى 100vh</div>
<div class="max-h-min">ارتفاع أقصى للحد الأدنى للمحتوى</div>
<div class="max-h-max">ارتفاع أقصى للحد الأقصى للمحتوى</div>
<div class="max-h-fit">ارتفاع أقصى يناسب المحتوى</div>

<!-- حاوية قابلة للتمرير مع ارتفاع أقصى -->
<div class="max-h-96 overflow-y-auto bg-gray-100 p-4">
  <p>محتوى طويل يتم التمرير خلاله...</p>
  <p>المزيد من المحتوى...</p>
  <p>المزيد والمزيد من المحتوى...</p>
</div>

<!-- قائمة منسدلة بارتفاع أقصى -->
<div class="max-h-64 overflow-y-auto bg-white shadow-lg rounded">
  <a href="#" class="block px-4 py-2 hover:bg-gray-100">خيار 1</a>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100">خيار 2</a>
  <!-- المزيد من الخيارات... -->
</div>

<!-- قيود الارتفاع الأدنى -->
<div class="min-h-0">ارتفاع أدنى 0</div>
<div class="min-h-full">ارتفاع أدنى 100%</div>
<div class="min-h-screen">ارتفاع أدنى 100vh</div>
<div class="min-h-min">ارتفاع أدنى للحد الأدنى للمحتوى</div>
<div class="min-h-max">ارتفاع أدنى للحد الأقصى للمحتوى</div>
<div class="min-h-fit">ارتفاع أدنى يناسب المحتوى</div>

<!-- تخطيط صفحة بارتفاع كامل -->
<div class="min-h-screen flex flex-col">
  <header class="bg-white shadow py-4">الرأس</header>
  <main class="flex-1 bg-gray-50 py-8">
    المحتوى الرئيسي ينمو لملء المساحة
  </main>
  <footer class="bg-gray-800 text-white py-4">التذييل</footer>
</div>

<!-- بطاقة بارتفاع أدنى -->
<div class="min-h-64 bg-white rounded-lg shadow p-6">
  محتوى يجب أن يكون على الأقل 256px طولاً
</div>

أدوات الحجم (العرض والارتفاع معاً)

يوفر Tailwind أدوات مختصرة لتعيين العرض والارتفاع معاً:

<!-- عناصر مربعة بأداة size -->
<div class="size-4">مربع 16x16px</div>
<div class="size-8">مربع 32x32px</div>
<div class="size-12">مربع 48x48px</div>
<div class="size-16">مربع 64x64px</div>
<div class="size-24">مربع 96x96px</div>
<div class="size-32">مربع 128x128px</div>

<!-- حاويات أيقونات -->
<div class="size-10 bg-blue-500 rounded flex items-center justify-center">
  <svg class="size-6 text-white" fill="currentColor">
    <!-- مسار الأيقونة -->
  </svg>
</div>

<!-- صورة رمزية -->
<img src="avatar.jpg" class="size-12 rounded-full" alt="صورة المستخدم الرمزية">

<!-- أزرار مربعة -->
<button class="size-10 bg-gray-200 rounded hover:bg-gray-300">
  X
</button>

أدوات نسبة الأبعاد (Aspect Ratio)

التحكم في نسبة أبعاد العناصر للحفاظ على النسب:

<!-- نسبة أبعاد مربعة (1:1) -->
<div class="aspect-square bg-blue-100">
  دائماً مربع
</div>

<!-- نسبة أبعاد الفيديو (16:9) -->
<div class="aspect-video bg-black">
  <iframe src="video.mp4" class="w-full h-full"></iframe>
</div>

<!-- نسبة أبعاد تلقائية -->
<div class="aspect-auto">نسبة أبعاد طبيعية</div>

<!-- أمثلة عملية -->
<!-- تضمين فيديو مستجيب -->
<div class="aspect-video w-full">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    class="w-full h-full"
    allowfullscreen
  ></iframe>
</div>

<!-- شبكة صور منتجات بنسب أبعاد متسقة -->
<div class="grid grid-cols-3 gap-4">
  <div class="aspect-square bg-gray-200 rounded overflow-hidden">
    <img src="product1.jpg" class="w-full h-full object-cover" alt="منتج 1">
  </div>
  <div class="aspect-square bg-gray-200 rounded overflow-hidden">
    <img src="product2.jpg" class="w-full h-full object-cover" alt="منتج 2">
  </div>
  <div class="aspect-square bg-gray-200 rounded overflow-hidden">
    <img src="product3.jpg" class="w-full h-full object-cover" alt="منتج 3">
  </div>
</div>

<!-- صورة ملف شخصي بنسبة أبعاد مربعة -->
<div class="aspect-square w-32 rounded-full overflow-hidden">
  <img src="profile.jpg" class="w-full h-full object-cover" alt="الملف الشخصي">
</div>

الملخص

في هذا الدرس، أتقنت:

• أدوات العرض: ثابتة (w-4، w-8)، نسبة مئوية (w-1/2، w-full)، إطار عرض (w-screen)
• أدوات الارتفاع: ثابتة (h-4، h-8)، نسبة مئوية (h-1/2، h-full)، إطار عرض (h-screen)
• العرض الأقصى: max-w-xs إلى max-w-7xl، max-w-prose، max-w-screen-*
• الارتفاع الأقصى: قيم max-h-* لتقييد الارتفاع
• الأبعاد الدنيا: min-w-* و min-h-* لتحديد الحدود السفلى
• اختصار الحجم: size-* للعناصر المربعة
• أدوات نسبة الأبعاد: aspect-square، aspect-video، aspect-auto
• أنماط عملية للتخطيطات الشائعة

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