التخطيط: الحاوية، الأعمدة ونسبة العرض للارتفاع

التخطيط: الحاوية، الأعمدة ونسبة العرض للارتفاع في Tailwind CSS

يوفر Tailwind أدوات تخطيط قوية تتجاوز Flexbox وGrid. فئة الحاوية تمركز وتقيد عرض المحتوى، والأعمدة تنشئ تخطيطات بأسلوب المجلات، وأدوات نسبة العرض للارتفاع تحافظ على نسب مثالية للصور ومقاطع الفيديو.

أداة الحاوية

تمركز فئة الحاوية المحتوى وتطبق عروض قصوى مستجيبة بناءً على نقاط التوقف. إنها ضرورية لإنشاء تخطيطات متسقة ومركزة.

<!-- حاوية أساسية -->
<div class="container">
  محتوى مركزي بعرض أقصى مستجيب
</div>

<!-- حاوية مع حشوة أفقية -->
<div class="container mx-auto px-4">
  مركزي مع حشوة
</div>

<!-- حاوية مع حشوة مخصصة لكل نقطة توقف -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  حشوة مستجيبة
</div>

<!-- حاوية بعرض كامل (بدون عرض أقصى) -->
<div class="container max-w-full px-4">
  عرض كامل مع حشوة
</div>

<!-- نقاط توقف الحاوية الافتراضية في Tailwind:
  بدون (100%)     - بدون عرض أقصى
  sm: 640px       - الحاوية بحد أقصى 640px
  md: 768px       - الحاوية بحد أقصى 768px
  lg: 1024px      - الحاوية بحد أقصى 1024px
  xl: 1280px      - الحاوية بحد أقصى 1280px
  2xl: 1536px     - الحاوية بحد أقصى 1536px
-->

<!-- الحاوية تتمركز تلقائياً في كل نقطة توقف -->
<div class="container mx-auto">
  عرض مستجيب تلقائياً
</div>

<!-- تجاوز الحاوية في نقطة توقف محددة -->
<div class="container lg:max-w-4xl">
  عرض أقصى مخصص على الشاشات الكبيرة
</div>

<!-- تخصيص الحاوية في tailwind.config.js -->
<!--
module.exports = {
  theme: {
    container: {
      center: true,           // دائماً مركز الحاويات
      padding: '2rem',         // الحشوة الافتراضية
      screens: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1400px',      // نقطة توقف 2xl مخصصة
      },
    },
  },
}
-->

<!-- تكوين الحشوة المستجيبة -->
<!--
module.exports = {
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
}
-->

<!-- رأس الصفحة مع حاوية -->
<header class="bg-white shadow">
  <div class="container mx-auto px-4 py-6">
    <nav class="flex items-center justify-between">
      <div class="text-2xl font-bold">شعار</div>
      <div class="space-x-6">
        <a href="#">الرئيسية</a>
        <a href="#">حول</a>
        <a href="#">اتصل</a>
      </div>
    </nav>
  </div>
</header>

<!-- المحتوى الرئيسي مع حاوية -->
<main class="container mx-auto px-4 py-8">
  <h1 class="text-4xl font-bold mb-6">عنوان الصفحة</h1>
  <p class="text-lg">المحتوى هنا...</p>
</main>

<!-- قسم بعرض كامل مع محتوى محاط -->
<section class="bg-gray-100 py-16">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold mb-8">عنوان القسم</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- البطاقات -->
    </div>
  </div>
</section>

<!-- حاوية ضيقة للمقالات -->
<article class="container mx-auto px-4 max-w-3xl py-12">
  <h1 class="text-5xl font-bold mb-4">عنوان المقالة</h1>
  <p class="text-lg leading-relaxed">
    المحتوى الطويل أكثر قابلية للقراءة في الحاويات الضيقة...
  </p>
</article>

تخطيطات متعددة الأعمدة

تنشئ أداة الأعمدة تخطيطات متعددة الأعمدة مستجيبة ومتدفقة مشابهة لتصاميم الصحف والمجلات. يتدفق المحتوى تلقائياً من عمود إلى آخر.

<!-- عدد أعمدة ثابت -->
<div class="columns-1">عمود واحد</div>
<div class="columns-2">عمودان</div>
<div class="columns-3">ثلاثة أعمدة</div>
<div class="columns-4">أربعة أعمدة</div>
<div class="columns-5">خمسة أعمدة</div>
<div class="columns-6">ستة أعمدة</div>
<div class="columns-7">سبعة أعمدة</div>
<div class="columns-8">ثمانية أعمدة</div>
<div class="columns-9">تسعة أعمدة</div>
<div class="columns-10">عشرة أعمدة</div>
<div class="columns-11">أحد عشر عموداً</div>
<div class="columns-12">اثنا عشر عموداً</div>

<!-- أعمدة تلقائية (المتصفح يقرر بناءً على عرض العمود) -->
<div class="columns-auto">عدد أعمدة تلقائي</div>

<!-- عدد أعمدة مستجيب -->
<div class="columns-1 md:columns-2 lg:columns-3">
  أعمدة مستجيبة
</div>

<!-- تعيين عرض العمود (المتصفح يقرر العدد) -->
<div class="columns-3xs">أعمدة بحد أدنى 16rem</div>
<div class="columns-2xs">أعمدة بحد أدنى 18rem</div>
<div class="columns-xs">أعمدة بحد أدنى 20rem</div>
<div class="columns-sm">أعمدة بحد أدنى 24rem</div>
<div class="columns-md">أعمدة بحد أدنى 28rem</div>
<div class="columns-lg">أعمدة بحد أدنى 32rem</div>
<div class="columns-xl">أعمدة بحد أدنى 36rem</div>
<div class="columns-2xl">أعمدة بحد أدنى 42rem</div>
<div class="columns-3xl">أعمدة بحد أدنى 48rem</div>
<div class="columns-4xl">أعمدة بحد أدنى 56rem</div>
<div class="columns-5xl">أعمدة بحد أدنى 64rem</div>
<div class="columns-6xl">أعمدة بحد أدنى 72rem</div>
<div class="columns-7xl">أعمدة بحد أدنى 80rem</div>

<!-- التحكم في المسافة بين الأعمدة -->
<div class="columns-2 gap-0">بدون فجوة</div>
<div class="columns-2 gap-1">فجوة 0.25rem</div>
<div class="columns-2 gap-2">فجوة 0.5rem</div>
<div class="columns-2 gap-4">فجوة 1rem</div>
<div class="columns-2 gap-6">فجوة 1.5rem</div>
<div class="columns-2 gap-8">فجوة 2rem</div>
<div class="columns-2 gap-10">فجوة 2.5rem</div>
<div class="columns-2 gap-12">فجوة 3rem</div>

<!-- فجوات مستجيبة -->
<div class="columns-2 gap-4 lg:gap-8">
  فجوة عمود مستجيبة
</div>

<!-- التحكم في مكان كسر المحتوى بين الأعمدة -->

<!-- كسر قبل العنصر -->
<div class="columns-2">
  <p>الفقرة الأولى...</p>
  <p class="break-before-column">
    تبدأ هذه الفقرة في عمود جديد
  </p>
</div>

<!-- كسر بعد العنصر -->
<div class="columns-2">
  <p class="break-after-column">
    تجبر هذه الفقرة الكسر بعدها
  </p>
  <p>يبدأ هذا في عمود جديد</p>
</div>

<!-- تجنب الكسر داخل العنصر -->
<div class="columns-2">
  <div class="break-inside-avoid">
    <img src="image.jpg" alt="صورة">
    <p>التسمية التوضيحية تبقى مع الصورة</p>
  </div>
</div>

<!-- السماح بالكسر داخل (افتراضي) -->
<div class="columns-2">
  <p class="break-inside-auto">
    يمكن كسر الفقرة الطويلة عبر الأعمدة
  </p>
</div>

<!-- تخطيط مقالة بأسلوب المجلة -->
<article class="container mx-auto px-4 py-12">
  <h1 class="text-4xl font-bold mb-8">عنوان المقالة</h1>

  <div class="columns-1 md:columns-2 lg:columns-3 gap-8 text-justify">
    <p class="mb-4">
      الفقرة الأولى من محتوى المقالة...
    </p>

    <div class="break-inside-avoid mb-4">
      <img src="photo.jpg" class="w-full rounded-lg mb-2" alt="صورة">
      <p class="text-sm text-gray-600 italic">تسمية توضيحية للصورة</p>
    </div>

    <p class="mb-4">
      المزيد من محتوى المقالة يستمر في التدفق...
    </p>

    <blockquote class="break-inside-avoid border-l-4 border-blue-500 pl-4 italic my-4">
      "اقتباس مهم يبقى معاً"
    </blockquote>

    <p>الفقرات النهائية...</p>
  </div>
</article>

<!-- معرض صور بأسلوب البناء -->
<div class="columns-2 md:columns-3 lg:columns-4 gap-4">
  <img src="1.jpg" class="w-full mb-4 rounded-lg break-inside-avoid" alt="1">
  <img src="2.jpg" class="w-full mb-4 rounded-lg break-inside-avoid" alt="2">
  <img src="3.jpg" class="w-full mb-4 rounded-lg break-inside-avoid" alt="3">
  <img src="4.jpg" class="w-full mb-4 rounded-lg break-inside-avoid" alt="4">
  <img src="5.jpg" class="w-full mb-4 rounded-lg break-inside-avoid" alt="5">
  <img src="6.jpg" class="w-full mb-4 rounded-lg break-inside-avoid" alt="6">
</div>

<!-- قائمة ميزات في أعمدة -->
<div class="columns-2 lg:columns-3 gap-6">
  <div class="break-inside-avoid mb-6">
    <h3 class="font-bold text-lg mb-2">الميزة 1</h3>
    <p class="text-gray-600">الوصف...</p>
  </div>
  <div class="break-inside-avoid mb-6">
    <h3 class="font-bold text-lg mb-2">الميزة 2</h3>
    <p class="text-gray-600">الوصف...</p>
  </div>
  <!-- المزيد من الميزات -->
</div>

أدوات نسبة العرض للارتفاع

تحافظ أدوات نسبة العرض للارتفاع على نسب مثالية من العرض للارتفاع مع تغيير حجم العناصر. ضرورية للصور ومقاطع الفيديو والمحتوى المضمن المستجيب.

<!-- نسب عرض للارتفاع شائعة -->
<div class="aspect-auto">نسبة عرض للارتفاع طبيعية</div>
<div class="aspect-square">نسبة 1:1 (مربع)</div>
<div class="aspect-video">نسبة 16:9 (فيديو)</div>

<!-- نسب عرض للارتفاع مخصصة بقيم تعسفية -->
<div class="aspect-[4/3]">نسبة 4:3</div>
<div class="aspect-[21/9]">نسبة 21:9 (سينما)</div>
<div class="aspect-[3/2]">نسبة 3:2 (تصوير)</div>
<div class="aspect-[2/3]">نسبة 2:3 (عمودي)</div>

<!-- الحفاظ على نسبة العرض للارتفاع للصور -->
<div class="aspect-square w-64">
  <img src="photo.jpg"
       class="w-full h-full object-cover rounded-lg"
       alt="صورة مربعة">
</div>

<!-- نسبة عرض للارتفاع الفيديو -->
<div class="aspect-video w-full">
  <img src="thumbnail.jpg"
       class="w-full h-full object-cover"
       alt="صورة مصغرة للفيديو">
</div>

<!-- نسبة عرض للارتفاع عمودية -->
<div class="aspect-[2/3] w-48">
  <img src="portrait.jpg"
       class="w-full h-full object-cover rounded-lg"
       alt="صورة شخصية">
</div>

<!-- تضمين فيديو مستجيب -->
<div class="aspect-video w-full">
  <iframe src="https://youtube.com/embed/..."
          class="w-full h-full rounded-lg"
          allowfullscreen>
  </iframe>
</div>

<!-- عنصر فيديو -->
<div class="aspect-video w-full max-w-4xl">
  <video class="w-full h-full object-cover rounded-lg" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>

<!-- تضمين خريطة -->
<div class="aspect-[4/3] w-full">
  <iframe src="https://maps.google.com/..."
          class="w-full h-full rounded-lg border-0">
  </iframe>
</div>

<!-- نسب مختلفة في نقاط توقف مختلفة -->
<div class="aspect-square md:aspect-video lg:aspect-[21/9] w-full">
  <img src="hero.jpg"
       class="w-full h-full object-cover"
       alt="نسبة عرض للارتفاع مستجيبة">
</div>

<!-- شبكة من بطاقات نسبة العرض للارتفاع -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="aspect-video">
    <img src="1.jpg" class="w-full h-full object-cover rounded-lg" alt="1">
  </div>
  <div class="aspect-video">
    <img src="2.jpg" class="w-full h-full object-cover rounded-lg" alt="2">
  </div>
  <div class="aspect-video">
    <img src="3.jpg" class="w-full h-full object-cover rounded-lg" alt="3">
  </div>
</div>

ملاءمة الكائن وموضع الكائن

تتحكم هذه الأدوات في كيفية ملاءمة الصور ومقاطع الفيديو داخل حاويات نسبة العرض للارتفاع وأين يتم وضعها.

<!-- ملاءمة الكائن تتحكم في كيفية ملء المحتوى للحاوية -->

<!-- Contain: الصورة بالكامل مرئية، قد يكون هناك مساحة فارغة -->
<div class="aspect-video w-64">
  <img src="tall.jpg" class="w-full h-full object-contain" alt="محتواة">
</div>

<!-- Cover: تملأ الحاوية، قد تقص الصورة (الأكثر شيوعاً) -->
<div class="aspect-video w-64">
  <img src="tall.jpg" class="w-full h-full object-cover" alt="مغطاة">
</div>

<!-- Fill: تتمدد للملء، قد تشوه -->
<div class="aspect-video w-64">
  <img src="tall.jpg" class="w-full h-full object-fill" alt="ممتلئة">
</div>

<!-- None: الحجم الأصلي، قد يتجاوز أو يكون هناك مساحة -->
<div class="aspect-video w-64 overflow-hidden">
  <img src="tall.jpg" class="w-full h-full object-none" alt="بدون">
</div>

<!-- Scale down: مثل contain، لكن لن يكبر -->
<div class="aspect-video w-64">
  <img src="small.jpg" class="w-full h-full object-scale-down" alt="تصغير">
</div>

<!-- التحكم في أي جزء من الصورة مرئي عند القص -->

<!-- مواضع الزوايا -->
<img src="landscape.jpg" class="object-cover object-top" alt="أعلى">
<img src="landscape.jpg" class="object-cover object-top-right" alt="أعلى اليمين">
<img src="landscape.jpg" class="object-cover object-right" alt="يمين">
<img src="landscape.jpg" class="object-cover object-bottom-right" alt="أسفل اليمين">
<img src="landscape.jpg" class="object-cover object-bottom" alt="أسفل">
<img src="landscape.jpg" class="object-cover object-bottom-left" alt="أسفل اليسار">
<img src="landscape.jpg" class="object-cover object-left" alt="يسار">
<img src="landscape.jpg" class="object-cover object-top-left" alt="أعلى اليسار">
<img src="landscape.jpg" class="object-cover object-center" alt="وسط (افتراضي)">

<!-- مثال عملي: الوجوه دائماً مرئية -->
<div class="aspect-square w-32">
  <img src="portrait-with-face-at-top.jpg"
       class="w-full h-full object-cover object-top"
       alt="الوجه مرئي">
</div>

<!-- بطاقة منتج مع نسب عرض للارتفاع مثالية -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden">
  <!-- صورة بنسبة عرض للارتفاع 4:3 -->
  <div class="aspect-[4/3]">
    <img src="product.jpg"
         class="w-full h-full object-cover hover:scale-110
                transition-transform duration-500"
         alt="منتج">
  </div>

  <div class="p-6">
    <h3 class="text-xl font-bold mb-2">اسم المنتج</h3>
    <p class="text-gray-600 mb-4">الوصف...</p>
    <div class="flex items-center justify-between">
      <span class="text-2xl font-bold">$99</span>
      <button class="bg-blue-600 text-white px-6 py-2 rounded-lg">
        اشتر الآن
      </button>
    </div>
  </div>
</div>

<!-- بطاقة ملف شخصي مع صورة رمزية مربعة -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
  <div class="aspect-square w-16 flex-shrink-0">
    <img src="avatar.jpg"
         class="w-full h-full object-cover rounded-full"
         alt="صورة رمزية">
  </div>
  <div>
    <h4 class="font-bold">أحمد محمد</h4>
    <p class="text-sm text-gray-600">مطور ويب</p>
  </div>
</div>

التحكم في التجاوز

<!-- سلوك التجاوز -->
<div class="overflow-auto">أشرطة التمرير عند الحاجة</div>
<div class="overflow-hidden">يقص محتوى التجاوز</div>
<div class="overflow-visible">التجاوز مرئي (افتراضي)</div>
<div class="overflow-scroll">دائماً إظهار أشرطة التمرير</div>

<!-- تجاوز اتجاهي -->
<div class="overflow-x-auto">تمرير أفقي فقط</div>
<div class="overflow-y-auto">تمرير عمودي فقط</div>
<div class="overflow-x-hidden">إخفاء التجاوز الأفقي</div>
<div class="overflow-y-scroll">دائماً شريط تمرير عمودي</div>

<!-- سلوك التمرير الزائد (تأثير الارتداد) -->
<div class="overscroll-auto">سلوك التمرير الافتراضي</div>
<div class="overscroll-contain">منع تسلسل التمرير</div>
<div class="overscroll-none">بدون تأثيرات ارتداد/توهج</div>

<!-- تمرير زائد اتجاهي -->
<div class="overscroll-x-contain">التمرير الأفقي محاط</div>
<div class="overscroll-y-none">بدون تمرير زائد عمودي</div>

الخلاصة

توفر أدوات التخطيط المتقدمة في Tailwind حلولاً متخصصة لتحديات التصميم الشائعة:

• الحاوية: تمركز المحتوى مع عروض قصوى مستجيبة (container، mx-auto)
• الأعمدة: تنشئ تخطيطات متعددة الأعمدة متدفقة (columns-{n}، columns-{size})
• التحكم في الأعمدة: يدير الكسور والفجوات (break-inside-avoid، gap-{n})
• نسبة العرض للارتفاع: تحافظ على النسب (aspect-square، aspect-video، aspect-[w/h])
• ملاءمة الكائن: تتحكم في حجم المحتوى (object-cover، object-contain، إلخ)
• موضع الكائن: تتحكم في موضع المحتوى (object-{position})
• التجاوز: يدير المحتوى الذي يتجاوز الحدود (overflow-{type})

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