Tailwind CSS: تصميم الشبكة في Tailwind CSS

Q: ما الفرق بين grid-cols-12 و grid-cols-3؟

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

Q: كيف يمكنني إنشاء شبكة متجاوبة؟

استخدم البادئات المتجاوبة مثل grid-cols-1 md:grid-cols-2 lg:grid-cols-3 لتغيير عدد الأعمدة عند نقاط التوقف المختلفة. يمكنك أيضًا استخدام auto-fill و minmax() لتحقيق التجاوب التلقائي.

Q: ما الفرق بين «gap» و«padding»؟

يتحكم gap في التباعد بين عناصر الشبكة ولا يشمل الهوامش الخارجية. أما padding فيتحكم في التباعد الداخلي للحاوية، حيث يحيط بجميع العناصر. وعادةً ما يُستخدمان معًا: gap لتباعد العناصر و padding لهوامش الحاوية.

1. تعريفات حاوية الشبكة والأعمدة

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Container and Column Definitions Demo</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>

    <!-- Responsive columns -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive: 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>

57 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

مرجع فئة أعمدة الشبكة:

الفئة	قيمة 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-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-*، يمكنك تصميم تخطيطات بأحجام مختلفة بمرونة.

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

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Row Definitions Demo</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>

    <!-- Custom row heights -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">grid-rows-[auto_1fr_auto] (Header-Content-Footer)</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">Header (auto)</div>
        <div class="bg-green-600 text-white p-4 rounded text-center">Content (1fr)</div>
        <div class="bg-green-700 text-white p-4 rounded text-center">Footer (auto)</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

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

3. امتداد العمود (col-span)

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Column Spanning Demo</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">
    <!-- Classic layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Classic Three-Column Layout (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">Header (col-span-12)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">Sidebar (col-span-3)</div>
        <div class="col-span-6 bg-blue-700 text-white p-4 rounded text-center">Main Content (col-span-6)</div>
        <div class="col-span-3 bg-blue-500 text-white p-4 rounded text-center">Sidebar (col-span-3)</div>
        <div class="col-span-12 bg-blue-600 text-white p-4 rounded text-center">Footer (col-span-12)</div>
      </div>
    </div>

    <!-- Mixed spans -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Mixed Spans</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 (Span All Columns)</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>

42 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Row Spanning Demo</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 Example</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>

    <!-- Practical application: Dashboard layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dashboard Layout</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">Navbar (col-span-4)</div>
        <div class="row-span-2 bg-green-500 text-white p-4 rounded text-center flex items-center justify-center">Sidebar (row-span-2)</div>
        <div class="col-span-3 bg-green-700 text-white p-4 rounded text-center flex items-center justify-center">Main Content (col-span-3)</div>
        <div class="col-span-3 bg-green-800 text-white p-4 rounded text-center flex items-center justify-center">Footer (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-* إنشاء تخطيطات شبكية معقدة مثل لوحات المعلومات، والصفحات على غرار المجلات، وغير ذلك.

5. تحديد موضع خطوط الشبكة (col-start/row-start)

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Line Positioning Demo</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 Positioning</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 Positioning</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>

    <!-- Precise placement -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Precise Grid Item Placement</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) span 2x2</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">Bottom Full Width</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

مرجع فئة تحديد موضع خطوط الشبكة:

الفئة	قيمة CSS	الوصف
`col-start-1`	`grid-column-start: 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.

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

6. التحكم في الفجوة

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Gap Control Demo</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 (Uniform Spacing)</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 (Independent Control)</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>

    <!-- Different gap sizes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Different Gap Sizes</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-1 (4px)</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 (32px)</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>

58 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

7. اتجاه تدفق الشبكة (grid-flow)

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Flow Direction Demo</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 (Default)</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 (Fill Gaps)</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>

44 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

💡 نصيحة: يحاول grid-flow-dense سد الفراغات في الشبكة، مما يجعله مناسبًا للتصميمات ذات نمط «الطوب» (masonry) والحالات المماثلة.

8. ضبط الحجم تلقائيًا (أعمدة تلقائية/صفوف تلقائية)

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto-Sizing Demo</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">Short</div>
        <div class="bg-blue-600 text-white px-4 py-4 rounded text-center">Medium</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded text-center">Longer content</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">Short</div>
        <div class="bg-green-600 text-white px-4 py-4 rounded text-center">Medium</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded text-center">Longer content</div>
      </div>
    </div>

    <!-- auto-cols-fr -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">auto-cols-fr (Equal Space)</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.

9. التحكم في المحاذاة

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Alignment Control Demo</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 (Horizontal 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 (Vertical 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">Short</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded text-center">Tall</div>
        <div class="bg-green-700 text-white px-4 py-4 rounded text-center">Medium</div>
      </div>
    </div>

    <!-- place-items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">place-items-center (Horizontal & Vertical 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 (Default)</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>

45 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

الفئة	قيمة 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.

10. مثال شامل

بالجمع بين جميع المفاهيم المذكورة أعلاه، دعونا ننشئ تخطيطًا شبكيًّا كاملاً.

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Comprehensive Example</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">
    <!-- Dashboard layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Dashboard Layout</h3>
      <div class="grid grid-cols-4 grid-rows-4 gap-4 bg-gray-100 p-4 rounded h-96">
        <!-- Top navigation -->
        <div class="col-span-4 bg-blue-600 text-white p-4 rounded flex items-center justify-between">
          <span class="font-bold">Dashboard</span>
          <span>User Avatar</span>
        </div>
        <!-- Sidebar -->
        <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">Overview</div>
            <div class="p-2 hover:bg-blue-400 rounded">Analytics</div>
            <div class="p-2 hover:bg-blue-400 rounded">Settings</div>
          </nav>
        </div>
        <!-- Stat cards -->
        <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">Total Users</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">Active Users</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">Growth Rate</div>
        </div>
        <!-- Main content -->
        <div class="col-span-3 row-span-2 bg-white p-4 rounded border">
          <h4 class="font-semibold mb-2">Data Chart</h4>
          <div class="h-full bg-gray-50 rounded flex items-center justify-center text-gray-400">
            Chart Area
          </div>
        </div>
      </div>
    </div>

    <!-- Magazine-style layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Magazine-Style Layout</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">Headline Story</h3>
          <p class="text-sm opacity-90">This is the most important news content</p>
        </div>
        <div class="bg-orange-500 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 2</h4>
          <p class="text-sm">Brief description...</p>
        </div>
        <div class="bg-orange-600 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 3</h4>
          <p class="text-sm">Brief description...</p>
        </div>
        <div class="bg-orange-700 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 4</h4>
          <p class="text-sm">Brief description...</p>
        </div>
        <div class="bg-orange-800 text-white p-4 rounded">
          <h4 class="font-semibold mb-2">News 5</h4>
          <p class="text-sm">Brief description...</p>
        </div>
      </div>
    </div>

    <!-- Responsive grid -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive 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>

85 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة كود CSS مكثف لتصميمات معقدة مثل لوحات التحكم والصفحات المصممة على غرار المجلات، في حين أن Tailwind يحقق ذلك مباشرةً في HTML باستخدام فئات أدوات الشبكة، التي يتم دمجها بمرونة مع 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 في التباعد بين عناصر الشبكة ولا يشمل الهوامش الخارجية. أما padding فيتحكم في التباعد الداخلي للحاوية، حيث يحيط بجميع العناصر. وعادةً ما يُستخدمان معًا: gap لتباعد العناصر وpadding لهوامش الحاوية.

📖 ملخص

grid ينشئ حاوية شبكية، grid-cols-* يحدد عدد الأعمدة
grid-rows-* يحدد عدد الصفوف، بينما يتحكم col-span-*/row-span-* في امتداد العناصر
col-start-*/row-start-* وضع العناصر بدقة على خطوط الشبكة
gap-*/gap-x-*/gap-y-* للتحكم في تباعد الصفوف والأعمدة
grid-flow-row/grid-flow-col/grid-flow-dense التحكم في اتجاه التوزيع التلقائي
auto-cols-*/auto-rows-* يتحكمان في أحجام مسارات الشبكة الضمنية
justify-items/items/place-items: ضبط محاذاة العناصر داخل خلايا الشبكة

📝 تمارين

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

فريق Web-Tutorial التقني

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

من نحن