أدوات CSS Grid

إتقان CSS Grid مع Tailwind CSS

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

إنشاء حاويات Grid

حوِّل عنصراً إلى حاوية grid باستخدام أداة grid:

<!-- إنشاء حاوية grid -->
<div class="grid">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- حاوية inline grid -->
<div class="inline-grid">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
</div>

<!-- شبكة بسيطة من 3 أعمدة -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">عمود 1</div>
  <div class="bg-blue-100 p-4">عمود 2</div>
  <div class="bg-blue-100 p-4">عمود 3</div>
  <div class="bg-blue-100 p-4">عمود 4</div>
  <div class="bg-blue-100 p-4">عمود 5</div>
  <div class="bg-blue-100 p-4">عمود 6</div>
</div>

قالب أعمدة Grid

حدد عدد وحجم الأعمدة في شبكتك:

<!-- عمود واحد -->
<div class="grid grid-cols-1">
  <div>عرض كامل</div>
</div>

<!-- عمودان -->
<div class="grid grid-cols-2 gap-4">
  <div>عمود 1</div>
  <div>عمود 2</div>
</div>

<!-- ثلاثة أعمدة -->
<div class="grid grid-cols-3 gap-4">
  <div>عمود 1</div>
  <div>عمود 2</div>
  <div>عمود 3</div>
</div>

<!-- أربعة أعمدة -->
<div class="grid grid-cols-4 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<!-- حتى 12 عمود -->
<div class="grid grid-cols-12 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <!-- ... حتى 12 -->
</div>

<!-- بدون (تعطيل أعمدة grid) -->
<div class="grid-cols-none">بدون قالب أعمدة</div>

<!-- Subgrid (يستخدم تعريف grid الوالد) -->
<div class="grid-cols-subgrid">يرث أعمدة grid الوالد</div>

<div class="grid grid-cols-4 gap-6 p-6">
  <div class="bg-white rounded-lg shadow p-4">
    <img src="product1.jpg" class="w-full h-48 object-cover rounded mb-4" alt="منتج 1">
    <h3 class="font-bold mb-2">اسم المنتج</h3>
    <p class="text-gray-600 mb-2">$29.99</p>
    <button class="w-full py-2 bg-blue-500 text-white rounded">إضافة للسلة</button>
  </div>
  <!-- كرر للمزيد من المنتجات -->
</div>

قالب صفوف Grid

تحكم في عدد وحجم الصفوف في شبكتك:

<!-- صف واحد (افتراضي) -->
<div class="grid grid-rows-1">
  <div>صف واحد</div>
</div>

<!-- صفان -->
<div class="grid grid-rows-2 grid-cols-2 gap-4 h-64">
  <div>صف 1، عمود 1</div>
  <div>صف 1، عمود 2</div>
  <div>صف 2، عمود 1</div>
  <div>صف 2، عمود 2</div>
</div>

<!-- ثلاثة صفوف -->
<div class="grid grid-rows-3 gap-4">
  <div class="bg-blue-100">صف 1</div>
  <div class="bg-blue-200">صف 2</div>
  <div class="bg-blue-300">صف 3</div>
</div>

<!-- حتى 6 صفوف -->
<div class="grid grid-rows-6 gap-2">
  <!-- عناصر... -->
</div>

<!-- تخطيط لوحة تحكم بصفوف محددة -->
<div class="grid grid-rows-[auto_1fr_auto] h-screen">
  <header class="bg-white shadow p-4">الرأس</header>
  <main class="overflow-y-auto p-4">المحتوى الرئيسي</main>
  <footer class="bg-gray-800 text-white p-4">التذييل</footer>
</div>

امتداد الأعمدة

اجعل عناصر الشبكة تمتد على أعمدة متعددة:

<div class="grid grid-cols-6 gap-4">
  <!-- امتداد عمود واحد (افتراضي) -->
  <div class="col-span-1 bg-blue-100 p-4">امتداد 1</div>

  <!-- امتداد عمودين -->
  <div class="col-span-2 bg-blue-200 p-4">امتداد 2</div>

  <!-- امتداد 3 أعمدة -->
  <div class="col-span-3 bg-blue-300 p-4">امتداد 3</div>

  <!-- امتداد 4 أعمدة -->
  <div class="col-span-4 bg-blue-400 p-4">امتداد 4</div>

  <!-- امتداد العرض الكامل -->
  <div class="col-span-full bg-blue-500 p-4 text-white">عرض كامل</div>

  <!-- امتداد تلقائي (يناسب المحتوى) -->
  <div class="col-auto bg-blue-100 p-4">تلقائي</div>
</div>

<div class="grid grid-cols-12 gap-6 p-6">
  <!-- مقال مميز يمتد على 8 أعمدة -->
  <article class="col-span-8 bg-white rounded-lg shadow p-6">
    <img src="featured.jpg" class="w-full h-64 object-cover rounded mb-4" alt="مميز">
    <h2 class="text-3xl font-bold mb-4">مقال مميز</h2>
    <p class="text-gray-600">محتوى المقال...</p>
  </article>

  <!-- شريط جانبي يمتد على 4 أعمدة -->
  <aside class="col-span-4 space-y-4">
    <div class="bg-white rounded-lg shadow p-4">
      <h3 class="font-bold mb-2">المنشورات الشائعة</h3>
      <!-- قائمة المنشورات -->
    </div>
    <div class="bg-white rounded-lg shadow p-4">
      <h3 class="font-bold mb-2">الفئات</h3>
      <!-- قائمة الفئات -->
    </div>
  </aside>

  <!-- مقالات ذات صلة، كل منها يمتد على 4 أعمدة -->
  <article class="col-span-4 bg-white rounded-lg shadow p-4">
    <h3 class="font-bold">مقال ذو صلة 1</h3>
  </article>
  <article class="col-span-4 bg-white rounded-lg shadow p-4">
    <h3 class="font-bold">مقال ذو صلة 2</h3>
  </article>
  <article class="col-span-4 bg-white rounded-lg shadow p-4">
    <h3 class="font-bold">مقال ذو صلة 3</h3>
  </article>
</div>

بداية ونهاية الأعمدة

ضع العناصر بدقة من خلال تحديد بداية ونهاية الأعمدة:

<div class="grid grid-cols-6 gap-4">
  <!-- يبدأ من العمود 1، نهاية تلقائية -->
  <div class="col-start-1 bg-blue-100 p-4">بداية 1</div>

  <!-- يبدأ من العمود 2، ينتهي عند العمود 4 -->
  <div class="col-start-2 col-end-4 bg-blue-200 p-4">بداية 2، نهاية 4</div>

  <!-- يبدأ من العمود 4، ينتهي عند العمود الأخير -->
  <div class="col-start-4 col-end-7 bg-blue-300 p-4">بداية 4، نهاية 7</div>

  <!-- تحديد موضع تلقائي -->
  <div class="col-auto bg-blue-100 p-4">تلقائي</div>
</div>

<!-- تخطيط معقد مع تداخل -->
<div class="grid grid-cols-4 grid-rows-3 gap-4">
  <div class="col-start-1 col-end-3 row-start-1 row-end-3 bg-blue-500 text-white p-4">
    صندوق كبير
  </div>
  <div class="col-start-3 col-end-5 bg-blue-200 p-4">صندوق 2</div>
  <div class="col-start-3 bg-blue-300 p-4">صندوق 3</div>
  <div class="col-start-4 bg-blue-400 p-4">صندوق 4</div>
</div>

امتداد الصفوف

اجعل عناصر الشبكة تمتد على صفوف متعددة:

<div class="grid grid-cols-3 grid-rows-4 gap-4 h-96">
  <!-- امتداد صف واحد (افتراضي) -->
  <div class="row-span-1 bg-green-100 p-4">امتداد صف واحد</div>

  <!-- امتداد صفين -->
  <div class="row-span-2 bg-green-200 p-4">امتداد صفين</div>

  <!-- امتداد 3 صفوف -->
  <div class="row-span-3 bg-green-300 p-4">امتداد 3 صفوف</div>

  <!-- امتداد الارتفاع الكامل -->
  <div class="row-span-full bg-green-400 p-4">ارتفاع كامل</div>

  <!-- امتداد تلقائي -->
  <div class="row-auto bg-green-100 p-4">تلقائي</div>
</div>

<div class="grid grid-cols-4 grid-rows-3 gap-4 h-screen p-4">
  <!-- شريط جانبي يمتد على جميع الصفوف -->
  <aside class="row-span-full bg-gray-800 text-white rounded-lg p-4">
    <h2 class="text-xl font-bold mb-4">التنقل</h2>
    <nav class="space-y-2">
      <a href="#" class="block p-2 rounded hover:bg-gray-700">لوحة التحكم</a>
      <a href="#" class="block p-2 rounded hover:bg-gray-700">التحليلات</a>
      <a href="#" class="block p-2 rounded hover:bg-gray-700">الإعدادات</a>
    </nav>
  </aside>

  <!-- بطاقات الإحصائيات تمتد على صف واحد لكل منها -->
  <div class="col-span-3 bg-white rounded-lg shadow p-6">
    <h3 class="text-sm text-gray-600 mb-2">إجمالي الإيرادات</h3>
    <p class="text-3xl font-bold">$45,231</p>
  </div>

  <!-- مخطط يمتد على صفين -->
  <div class="col-span-3 row-span-2 bg-white rounded-lg shadow p-6">
    <h3 class="text-xl font-bold mb-4">مخطط المبيعات</h3>
    <div class="h-full bg-gray-100 rounded flex items-center justify-center">
      مكان للمخطط
    </div>
  </div>
</div>

فجوة Grid

أضف مسافات بين عناصر الشبكة:

<!-- فجوة موحدة (جميع الجوانب) -->
<div class="grid grid-cols-3 gap-4">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- فجوة أفقية فقط -->
<div class="grid grid-cols-3 gap-x-4">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- فجوة عمودية فقط -->
<div class="grid grid-cols-3 gap-y-6">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- فجوات أفقية وعمودية مختلفة -->
<div class="grid grid-cols-3 gap-x-4 gap-y-8">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
  <div>عنصر 4</div>
  <div>عنصر 5</div>
  <div>عنصر 6</div>
</div>

<!-- أحجام فجوة مختلفة -->
<div class="grid grid-cols-3 gap-0">بدون فجوة</div>
<div class="grid grid-cols-3 gap-2">فجوة صغيرة</div>
<div class="grid grid-cols-3 gap-4">فجوة متوسطة</div>
<div class="grid grid-cols-3 gap-8">فجوة كبيرة</div>

تدفق Grid التلقائي

تحكم في كيفية تدفق العناصر الموضوعة تلقائياً في الشبكة:

<!-- تدفق الصف (افتراضي) -->
<div class="grid grid-cols-3 grid-flow-row gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<!-- تدفق العمود -->
<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<!-- تعبئة كثيفة (تملأ الفجوات) -->
<div class="grid grid-cols-4 grid-flow-dense gap-4">
  <div class="col-span-2">1 (يمتد على 2)</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="col-span-2">5 (يمتد على 2)</div>
</div>

<!-- صف كثيف -->
<div class="grid-flow-row-dense">تدفق صف كثيف</div>

<!-- عمود كثيف -->
<div class="grid-flow-col-dense">تدفق عمود كثيف</div>

وضع العناصر ووضع المحتوى

تحكم في محاذاة جميع العناصر داخل الشبكة:

<!-- توسيط جميع العناصر -->
<div class="grid grid-cols-3 gap-4 h-64 place-items-center">
  <div class="bg-blue-100 p-4">مركزي</div>
  <div class="bg-blue-100 p-4">مركزي</div>
  <div class="bg-blue-100 p-4">مركزي</div>
</div>

<!-- البداية (أعلى-يسار) -->
<div class="grid place-items-start">عناصر في البداية</div>

<!-- النهاية (أسفل-يمين) -->
<div class="grid place-items-end">عناصر في النهاية</div>

<!-- تمدد (ملء الخلية) -->
<div class="grid place-items-stretch">عناصر ممتدة</div>

<!-- justify self (محاذاة أفقية للعنصر الواحد) -->
<div class="grid grid-cols-3 gap-4">
  <div class="justify-self-start bg-blue-100 p-4">البداية</div>
  <div class="justify-self-center bg-blue-100 p-4">الوسط</div>
  <div class="justify-self-end bg-blue-100 p-4">النهاية</div>
</div>

<!-- align self (محاذاة عمودية للعنصر الواحد) -->
<div class="grid grid-cols-3 gap-4 h-32">
  <div class="self-start bg-blue-100 p-4">أعلى</div>
  <div class="self-center bg-blue-100 p-4">وسط</div>
  <div class="self-end bg-blue-100 p-4">أسفل</div>
</div>

<!-- place self (أفقي وعمودي معاً) -->
<div class="grid grid-cols-2 gap-4 h-64">
  <div class="place-self-start bg-blue-100 p-4">أعلى-يسار</div>
  <div class="place-self-center bg-blue-100 p-4">وسط</div>
  <div class="place-self-end bg-blue-100 p-4">أسفل-يمين</div>
  <div class="place-self-stretch bg-blue-100 p-4">ممتد</div>
</div>

تخطيطات Grid المستجيبة

<!-- عمود واحد على الموبايل، 2 على التابلت، 4 على سطح المكتب -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 p-6">
  <div class="bg-white rounded-lg shadow p-4">بطاقة 1</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 2</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 3</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 4</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 5</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 6</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 7</div>
  <div class="bg-white rounded-lg shadow p-4">بطاقة 8</div>
</div>

<!-- امتدادات أعمدة مستجيبة -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
  <main class="lg:col-span-8 bg-white rounded-lg shadow p-6">
    المحتوى الرئيسي (عرض كامل على الموبايل، 8 أعمدة على سطح المكتب)
  </main>
  <aside class="lg:col-span-4 bg-white rounded-lg shadow p-6">
    الشريط الجانبي (عرض كامل على الموبايل، 4 أعمدة على سطح المكتب)
  </aside>
</div>

<!-- فجوة مستجيبة -->
<div class="grid grid-cols-2 gap-2 md:gap-4 lg:gap-6">
  <div>عنصر</div>
  <div>عنصر</div>
</div>

الملخص

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

• إنشاء الشبكات: grid، inline-grid
• الأعمدة: grid-cols-1 إلى grid-cols-12
• الصفوف: grid-rows-1 إلى grid-rows-6
• امتداد الأعمدة: col-span-1 إلى col-span-12، col-span-full
• امتداد الصفوف: row-span-1 إلى row-span-6، row-span-full
• تحديد الموضع: col-start-*، col-end-*، row-start-*، row-end-*
• الفجوة: gap-*، gap-x-*، gap-y-*
• التدفق التلقائي: grid-flow-row/col/dense
• المحاذاة: place-items-*، justify-self-*، self-*

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