EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

تخطيط Grid في Tailwind CSS: حاويات Grid والتحكم بالصفوف والأعمدة

حاوية Grid وتعريفات الأعمدة

Grid هو نموذج تخطيط ثنائي الأبعاد. استخدم grid لإنشاء حاوية grid و grid-cols-* لتحديد عدد الأعمدة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض حاوية Grid وتعريفات الأعمدة</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-cols-2 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-2</h3>
      <div class="grid grid-cols-2 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
      </div>
    </div>

    <!-- grid-cols-3 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-3</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-green-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- grid-cols-4 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-cols-4</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-purple-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-purple-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-purple-950 text-white p-4 rounded text-center">6</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">7</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">8</div>
      </div>
    </div>

    <!-- أعمدة متجاوبة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">متجاوب: grid-cols-1 md:grid-cols-2 lg:grid-cols-3</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-orange-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-orange-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-orange-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات أعمدة Grid:

الفئة قيمة CSS الوصف
grid-cols-1 grid-template-columns: repeat(1, minmax(0, 1fr)) عمود واحد
grid-cols-2 grid-template-columns: repeat(2, minmax(0, 1fr)) عمودان
grid-cols-3 grid-template-columns: repeat(3, minmax(0, 1fr)) 3 أعمدة
grid-cols-4 grid-template-columns: repeat(4, minmax(0, 1fr)) 4 أعمدة
grid-cols-12 grid-template-columns: repeat(12, minmax(0, 1fr)) 12 عمود (grid كلاسيكي)
grid-cols-none grid-template-columns: none بدون أعمدة ثابتة

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين display: grid و grid-template-columns في CSS، بينما Tailwind يستخدم فئات الأدوات مثل grid و grid-cols-3 مباشرة في HTML.

💡 نصيحة: grid-cols-12 هو نظام الشبكة الكلاسيكي المكون من 12 عمودًا. بالاقتران مع col-span-*، يمكنك تكوين تخطيطات بمرونة بعروض مختلفة.

تعريفات الصفوف (grid-rows)

grid-rows-* يحدد عدد وارتفاع صفوف الشبكة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض تعريفات صفوف Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-rows-3 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-3</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="bg-blue-500 text-white p-2 rounded text-center text-sm">1,1</div>
        <div class="bg-blue-600 text-white p-2 rounded text-center text-sm">1,2</div>
        <div class="bg-blue-700 text-white p-2 rounded text-center text-sm">1,3</div>
        <div class="bg-blue-800 text-white p-2 rounded text-center text-sm">2,1</div>
        <div class="bg-blue-900 text-white p-2 rounded text-center text-sm">2,2</div>
        <div class="bg-blue-950 text-white p-2 rounded text-center text-sm">2,3</div>
        <div class="bg-blue-500 text-white p-2 rounded text-center text-sm">3,1</div>
        <div class="bg-blue-600 text-white p-2 rounded text-center text-sm">3,2</div>
        <div class="bg-blue-700 text-white p-2 rounded text-center text-sm">3,3</div>
      </div>
    </div>

    <!-- ارتفاعات صفوف مخصصة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-[auto_1fr_auto] (رأس-محتوى-تذييل)</h3>
      <div class="grid grid-rows-[auto_1fr_auto] gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="bg-green-500 text-white p-4 rounded text-center">الرأس (auto)</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">المحتوى (1fr)</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">التذييل (auto)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين grid-template-rows في CSS، بينما Tailwind يستخدم فئات الأدوات مثل grid-rows-3 مباشرة في HTML. لارتفاعات الصفوف المخصصة، استخدم بنية القيمة التعسفية grid-rows-[auto_1fr_auto].

امتداد الأعمدة (col-span)

col-span-* يجعل عناصر Grid تمتد عبر أعمدة متعددة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض امتداد الأعمدة</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- تخطيط كلاسيكي -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تخطيط ثلاثة أعمدة كلاسيكي (col-span)</h3>
      <div class="grid grid-cols-12 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">الرأس (col-span-12)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">الشريط الجانبي (col-span-3)</div>
        <div class="col-span-6 bg-blue-700 text-white p-4 rounded text-center">المحتوى الرئيسي (col-span-6)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">الشريط الجانبي (col-span-3)</div>
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">التذييل (col-span-12)</div>
      </div>
    </div>

    <!-- امتدادات مختلطة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">امتدادات مختلطة</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 bg-green-500 text-white p-4 rounded text-center">col-span-2</div>
        <div class="col-span-1 bg-green-600 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-1 bg-green-700 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-1 bg-green-800 text-white p-4 rounded text-center">col-span-1</div>
        <div class="col-span-3 bg-green-900 text-white p-4 rounded text-center">col-span-3</div>
      </div>
    </div>

    <!-- col-span-full -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">col-span-full (امتداد جميع الأعمدة)</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-full bg-purple-600 text-white p-4 rounded text-center">col-span-full</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين grid-column: span 2 / span 2 في CSS، بينما Tailwind يستخدم col-span-2 مباشرة في HTML. col-span-full يعادل امتداد جميع الأعمدة.

امتداد الصفوف (row-span)

row-span-* يجعل عناصر Grid تمتد عبر صفوف متعددة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض امتداد الصفوف</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- row-span -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مثال row-span</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="row-span-3 bg-blue-500 text-white p-4 rounded text-center flex items-center justify-center">row-span-3</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">1,2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">1,3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">2,2</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">2,3</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">3,2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3,3</div>
      </div>
    </div>

    <!-- تطبيق عملي: تخطيط لوحة التحكم -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تخطيط لوحة التحكم</h3>
      <div class="grid grid-cols-4 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-80">
        <div class="col-span-4 bg-green-600 text-white p-4 rounded text-center flex items-center justify-center">شريط التنقل (col-span-4)</div>
        <div class="row-span-2 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">الشريط الجانبي (row-span-2)</div>
        <div class="col-span-3 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">المحتوى الرئيسي (col-span-3)</div>
        <div class="col-span-3 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">التذييل (col-span-3)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين grid-row: span 3 / span 3 في CSS، بينما Tailwind يستخدم row-span-3 مباشرة في HTML.

💡 نصيحة: الجمع بين col-span-* و row-span-* يتيح لك إنشاء تخطيطات Grid معقدة مثل لوحات التحكم وصفحات المجلات والمزيد.

محاورات خطوط Grid (col-start/row-start)

col-start-* و row-start-* يسمحان بوضع العناصر بدقة في مواضع خطوط Grid المحددة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض محاورات خطوط Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- col-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">محاورة col-start</h3>
      <div class="grid grid-cols-6 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-start-1 col-end-3 bg-blue-500 text-white p-4 rounded text-center">col-start-1 col-end-3</div>
        <div class="col-start-4 col-end-7 bg-blue-700 text-white p-4 rounded text-center">col-start-4 col-end-7</div>
        <div class="col-start-2 col-span-4 bg-blue-600 text-white p-4 rounded text-center">col-start-2 col-span-4</div>
      </div>
    </div>

    <!-- row-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">محاورة row-start</h3>
      <div class="grid grid-cols-3 grid-rows-3 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="row-start-1 row-end-3 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">row-start-1 row-end-3</div>
        <div class="row-start-2 col-start-2 col-span-2 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">row-start-2 col-start-2</div>
        <div class="row-start-3 col-start-2 col-span-2 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">row-start-3 col-start-2</div>
      </div>
    </div>

    <!-- وضع دقيق -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">وضع دقيق لعناصر Grid</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-64">
        <div class="col-start-1 row-start-1 bg-purple-500 text-white p-2 rounded text-center text-sm">(1,1)</div>
        <div class="col-start-3 row-start-1 bg-purple-600 text-white p-2 rounded text-center text-sm">(3,1)</div>
        <div class="col-start-2 row-start-2 col-span-2 row-span-2 bg-purple-700 text-white p-2 rounded text-center text-sm flex items-center justify-center">(2,2) امتداد 2×2</div>
        <div class="col-start-4 row-start-3 bg-purple-800 text-white p-2 rounded text-center text-sm">(4,3)</div>
        <div class="col-start-1 row-start-4 col-span-4 bg-purple-900 text-white p-2 rounded text-center text-sm">العرض الكامل السفلي</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات محاورات خطوط Grid:

الفئة قيمة CSS الوصف
col-start-1 grid-column-start: 1 البدء عند خط العمود 1
col-end-3 grid-column-end: 3 الانتهاء عند خط العمود 3
col-span-2 grid-column: span 2 / span 2 امتداد عمودين
row-start-1 grid-row-start: 1 البدء عند خط الصف 1
row-end-3 grid-row-end: 3 الانتهاء عند خط الصف 3
row-span-2 grid-row: span 2 / span 2 امتداد صفّين

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين grid-column-start، grid-column-end، إلخ. في CSS، بينما Tailwind يستخدم فئات الأدوات مثل col-start-1 و col-end-3 مباشرة في HTML.

⚠️ ملاحظة: خطوط Grid مرقمة بدءًا من 1. col-start-1 يعني البدء عند خط العمود الأول، و col-end-3 يعني الانتهاء عند خط العمود الثالث (امتداد عمودين).

التحكم بالفجوات

تخطيط Grid يستخدم أيضًا gap-* للتحكم في المسافات بين الصفوف والأعمدة.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض التحكم بفجوات Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- gap -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4 (مسافات متساوية)</h3>
      <div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-blue-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- gap-x gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-2 (تحكم مستقل)</h3>
      <div class="grid grid-cols-3 gap-x-8 gap-y-2 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
        <div class="bg-green-950 text-white p-4 rounded text-center">6</div>
      </div>
    </div>

    <!-- أحجام فجوات مختلفة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أحجام فجوات مختلفة</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-1 (4 بكسل)</p>
          <div class="grid grid-cols-4 gap-1 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
            <div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
            <div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
            <div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-8 (32 بكسل)</p>
          <div class="grid grid-cols-4 gap-8 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white p-2 rounded text-center text-sm">1</div>
            <div class="bg-purple-600 text-white p-2 rounded text-center text-sm">2</div>
            <div class="bg-purple-700 text-white p-2 rounded text-center text-sm">3</div>
            <div class="bg-purple-800 text-white p-2 rounded text-center text-sm">4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين column-gap و row-gap في CSS، بينما Tailwind يستخدم gap-x-8 و gap-y-2 مباشرة في HTML. gap-4 يضع المسافات لكلا الاتجاهين دفعة واحدة.

اتجاه تدفق Grid (grid-flow)

grid-flow-* يتحكم في اتجاه خوارزمية الوضع التلقائي.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض اتجاه تدفق Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- grid-flow-row -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-row (الافتراضي)</h3>
      <div class="grid grid-cols-3 grid-flow-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-4 rounded text-center">5</div>
      </div>
    </div>

    <!-- grid-flow-col -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-col</h3>
      <div class="grid grid-rows-3 grid-flow-col gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">3</div>
        <div class="bg-green-800 text-white p-4 rounded text-center">4</div>
        <div class="bg-green-900 text-white p-4 rounded text-center">5</div>
      </div>
    </div>

    <!-- grid-flow-dense -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-flow-dense (ملء الفجوات)</h3>
      <div class="grid grid-cols-4 grid-flow-dense gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 bg-purple-500 text-white p-4 rounded text-center">col-span-2</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">2</div>
        <div class="col-span-2 bg-purple-800 text-white p-4 rounded text-center">col-span-2</div>
        <div class="bg-purple-900 text-white p-4 rounded text-center">3</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين grid-auto-flow في CSS، بينما Tailwind يستخدم فئات الأدوات مثل grid-flow-row، grid-flow-col، و grid-flow-dense مباشرة في HTML.

💡 نصيحة: grid-flow-dense يحاول ملء الفجوات في الشبكة، مما يجعله مناسبًا لتخطيطات Masonry والسيناريوهات المماثلة.

الحجم التلقائي (auto-cols/auto-rows)

auto-cols-* و auto-rows-* يتحكمان في حجم مسارات Grid الضمنية.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الحجم التلقائي</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- auto-cols-min -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-min</h3>
      <div class="grid grid-flow-col auto-cols-min gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-2 py-4 rounded text-center">قصير</div>
        <div class="bg-blue-600 text-white px-4 py-4 rounded text-center">متوسط</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded text-center">محتوى أطول</div>
      </div>
    </div>

    <!-- auto-cols-max -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-max</h3>
      <div class="grid grid-flow-col auto-cols-max gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-2 py-4 rounded text-center">قصير</div>
        <div class="bg-green-600 text-white px-4 py-4 rounded text-center">متوسط</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded text-center">محتوى أطول</div>
      </div>
    </div>

    <!-- auto-cols-fr -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-fr (مساحة متساوية)</h3>
      <div class="grid grid-flow-col auto-cols-fr gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-purple-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-purple-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات الحجم التلقائي:

الفئة قيمة CSS الوصف
auto-cols-min grid-auto-columns: min-content أقل عرض للمحتوى
auto-cols-max grid-auto-columns: max-content أقصى عرض للمحتوى
auto-cols-fr grid-auto-columns: minmax(0, 1fr) مساحة متساوية
auto-cols-auto grid-auto-columns: auto تلقائي (افتراضي)
auto-rows-min grid-auto-rows: min-content أقل ارتفاع للمحتوى
auto-rows-max grid-auto-rows: max-content أقصى ارتفاع للمحتوى
auto-rows-fr grid-auto-rows: minmax(0, 1fr) ارتفاع متساوٍ
auto-rows-auto grid-auto-rows: auto تلقائي (افتراضي)

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين grid-auto-columns و grid-auto-rows في CSS، بينما Tailwind يستخدم فئات الأدوات مثل auto-cols-min و auto-rows-fr مباشرة في HTML.

التحكم بالمحاذاة

تخطيط Grid يوفر تحكمًا متعدد المستويات في المحاذاة: justify-items/items/place-items تتحكم في كيفية محاذاة العناصر داخل خلايا Grid.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض التحكم بمحاذاة Grid</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- justify-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-items-center (توسيط أفقي)</h3>
      <div class="grid grid-cols-3 justify-items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-2 py-4 rounded w-20 text-center">1</div>
        <div class="bg-blue-600 text-white px-2 py-4 rounded w-20 text-center">2</div>
        <div class="bg-blue-700 text-white px-2 py-4 rounded w-20 text-center">3</div>
      </div>
    </div>

    <!-- items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center (توسيط عمودي)</h3>
      <div class="grid grid-cols-3 items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">قصير</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded text-center">طويل</div>
        <div class="bg-green-700 text-white px-4 py-4 rounded text-center">متوسط</div>
      </div>
    </div>

    <!-- place-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">place-items-center (توسيط أفقي وعمودي)</h3>
      <div class="grid grid-cols-3 place-items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-items-stretch (الافتراضي)</h3>
      <div class="grid grid-cols-3 justify-items-stretch gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white p-4 rounded text-center">1</div>
        <div class="bg-orange-600 text-white p-4 rounded text-center">2</div>
        <div class="bg-orange-700 text-white p-4 rounded text-center">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع فئات المحاذاة:

الفئة قيمة CSS الوصف
justify-items-start justify-items: start محاذاة إلى بداية الأفق
justify-items-center justify-items: center توسيط أفقي
justify-items-end justify-items: end محاذاة إلى نهاية الأفق
justify-items-stretch justify-items: stretch تمديد لملء الأفق
items-start align-items: start محاذاة إلى بداية العمود
items-center align-items: center توسيط عمودي
items-end align-items: end محاذاة إلى نهاية العمود
items-stretch align-items: stretch تمديد لملء العمود
place-items-center place-items: center توسيط أفقي وعمودي
place-items-stretch place-items: stretch تمديد لملء كلا المحورين

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب تعيين justify-items و align-items بشكل منفصل في CSS، بينما Tailwind يحقق التوسيط الأفقي والعمودي بفئة واحدة place-items-center.

💡 نصيحة: place-items-center هو الحل الأكثر استخدامًا للتوسيط، وهو أكثر اختصارًا من items-center justify-center في Flexbox.

مثال شامل

بجمع جميع المفاهيم أعلاه، سنقوم بإنشاء تخطيط Grid متكامل.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مثال Grid شامل</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- تخطيط لوحة التحكم -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تخطيط لوحة التحكم</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-96">
        <!-- التنقل العلوي -->
        <div class="col-span-4 bg-blue-600 text-white p-4 rounded flex items-center justify-between">
          <span class="font-bold">لوحة التحكم</span>
          <span>صورة المستخدم</span>
        </div>
        <!-- الشريط الجانبي -->
        <div class="row-span-3 bg-blue-500 text-white p-4 rounded">
          <nav class="space-y-2">
            <div class="p-2 bg-blue-400 rounded">نظرة عامة</div>
            <div class="p-2 hover:bg-blue-400 rounded">التحليلات</div>
            <div class="p-2 hover:bg-blue-400 rounded">الإعدادات</div>
          </nav>
        </div>
        <!-- بطاقات الإحصائيات -->
        <div class="bg-green-500 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">1,234</div>
          <div class="text-sm">إجمالي المستخدمين</div>
        </div>
        <div class="bg-green-600 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">567</div>
          <div class="text-sm">المستخدمون النشطون</div>
        </div>
        <div class="bg-green-700 text-white p-4 rounded flex flex-col justify-center">
          <div class="text-2xl font-bold">89%</div>
          <div class="text-sm">معدل النمو</div>
        </div>
        <!-- المحتوى الرئيسي -->
        <div class="col-span-3 row-span-2 bg-white p-4 rounded border">
          <h4 class="font-semibold mb-2">مخطط البيانات</h4>
          <div class="h-full bg-gray-50 rounded flex items-center justify-center text-gray-400">
            منطقة المخطط
          </div>
        </div>
      </div>
    </div>

    <!-- تخطيط بأسلوب المجلة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تخطيط بأسلوب المجلة</h3>
      <div class="grid grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="col-span-2 row-span-2 bg-gradient-to-br from-purple-500 to-purple-700 text-white p-6 rounded flex flex-col justify-end">
          <h3 class="text-2xl font-bold mb-2">الخبر الرئيسي</h3>
          <p class="text-sm opacity-90">هذا هو أهم محتوى إخباري</p>
        </div>
        <div class="bg-orange-500 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">خبر 2</h4>
          <p class="text-sm">وصف مختصر...</p>
        </div>
        <div class="bg-orange-600 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">خبر 3</h4>
          <p class="text-sm">وصف مختصر...</p>
        </div>
        <div class="bg-orange-700 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">خبر 4</h4>
          <p class="text-sm">وصف مختصر...</p>
        </div>
        <div class="bg-orange-800 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">خبر 5</h4>
          <p class="text-sm">وصف مختصر...</p>
        </div>
      </div>
    </div>

    <!-- Grid متجاوب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Grid متجاوب</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white p-6 rounded text-center">1</div>
        <div class="bg-blue-600 text-white p-6 rounded text-center">2</div>
        <div class="bg-blue-700 text-white p-6 rounded text-center">3</div>
        <div class="bg-blue-800 text-white p-6 rounded text-center">4</div>
        <div class="bg-blue-900 text-white p-6 rounded text-center">5</div>
        <div class="bg-blue-950 text-white p-6 rounded text-center">6</div>
        <div class="bg-blue-500 text-white p-6 rounded text-center">7</div>
        <div class="bg-blue-600 text-white p-6 rounded text-center">8</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind النهج التقليدي يتطلب كتابة CSS مكثف للتخطيطات المعقدة مثل لوحات التحكم وصفحات المجلات، بينما Tailwind ينجز ذلك مباشرة في HTML باستخدام فئات أدوات Grid، مع الجمع المرن بين col-span-* و row-span-*.

❓ أسئلة شائعة

س متى يجب استخدام Grid مقابل Flexbox؟
ج استخدم Flexbox للتخطيطات أحادية البعد (صف أو عمود واحد)، و Grid للتخطيطات ثنائية البعد (صفوف وأعمدة). أشرطة التنقل وقوائم البطاقات تعمل بشكل جيد مع Flexbox؛ لوحات التحكم وشبكات الصور تعمل بشكل جيد مع Grid. يمكن دمجهما معًا.
س ما الفرق بين grid-cols-12 و grid-cols-3؟
ج grid-cols-12 ينشئ شبكة من 12 عمودًا تتطلب col-span-* لتحديد عرض العناصر. grid-cols-3 ينشئ شبكة بسيطة من 3 أعمدة متساوية العرض.الأولى أكثر مرونة، والأخيرة أبسط.
س كيف أنشئ شبكة متجاوبة؟
ج استخدم بادئات الاستجابة مثل grid-cols-1 md:grid-cols-2 lg:grid-cols-3 لتبديل عدد الأعمدة عند نقاط توقف مختلفة. يمكنك أيضًا استخدام auto-fill و minmax() للاستجابة التلقائية.
س ما الفرق بين gap و padding؟
ج gap يتحكم في المسافات بين عناصر Grid ولا يشمل الهوامش الخارجية. padding يتحكم في الحشو الداخلي للحاوي، ملتفًا حول جميع العناصر. عادةً ما يُستخدمان معًا: gap لمسافات العناصر و padding لهوامش الحاوي.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ تخطيط شبكة من 3 أعمدة متساوية العرض باستخدام grid grid-cols-3 gap-4 لعرض 6 بطاقات

  2. ⭐⭐ أنشئ تخطيط شبكة كلاسيكي من 12 عمودًا مع رأس (col-span-12)، شريط جانبي (col-span-3)، محتوى رئيسي (col-span-6)، وتذييل (col-span-12)

  3. ⭐⭐⭐ أنشئ تخطيط لوحة تحكم باستخدام grid-cols-4 grid-rows-4 مع شريط تنقل علوي (col-span-4)، شريط جانبي (row-span-3)، بطاقات إحصائيات، ومنطقة محتوى رئيسي

100%