يوضح هذا المنشور الإجراء الكامل لإضافة الفجوة بين الأعمدة في Tailwind.
كيفية إضافة فجوة بين الأعمدة في Tailwind؟
لإضافة فجوة بين الأعمدة في Tailwind ، استخدم العنصر المدمج ' فجوة- {size} ' جدوى. يحدد قيمة عدد صحيح يمثل الفجوة بين الأعمدة أفقيًا وعموديًا. دعونا نقوم بهذه المهمة عمليا بمساعدة الأمثلة المذكورة.
هيكل ملف المشروع
ال ' فجوة- {size} 'يمكن تنفيذ الأداة المساعدة في أي من مشاريع Tailwind التي تتبع بنية الملف المحددة:
لنبدأ بالمثال الأول.
مثال 1: استخدم الأداة المساعدة 'gap- {size}' لإضافة نفس الفجوة بين الصفوف والأعمدة
يطبق هذا المثال الأداة المساعدة 'gap- {size}' لإضافة نفس الفجوة أفقيًا وعموديًا بين الأعمدة المحددة.
كود HTML
نظرة عامة على الكود التالي:
< رأس >
< وصلة href = '/dist/output.css' rel = 'ورقة الأنماط' >
< / رأس >
< جسم >
< h1 فصل = 'text-3xl font-bold-text-center تسطير النص-orange-600' > مرحبًا بك في Linuxhint! < / h1 > < ر >
< شعبة فصل = 'mx-2 grid-cols-3 gap-4' >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الأول < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الثاني < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الثالث < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الرابع < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الخامس < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي السادس < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي السابع < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الثامن < / شعبة >
< / شعبة >
<الجسم <
في سطور الكود أعلاه:
- أولاً ، اربط ملف CSS الرئيسي ' /dist/output.css 'بملف HTML الموجود' index.html ' باستخدام ' <ارتباط> 'في قسم' الرأس '.
- بعد ذلك ، يُنشئ قسم 'body' عنصر '
' يستخدم العنصر ' حجم الخط '،' وزن الخط '،' محاذاة النص '،' زخرفة النص '، و ال ' لون الخط 'فصول Tailwind ، على التوالي.
- بعد ذلك ، يضاف عنصر '' يطبق ' شبكة 'لتعيين محتواها في العدد المحدد لتخطيطات الشبكة ، هامِش 'فئة لتعيين الهامش الأفقي ، و' فجوة ”لإضافة الفجوة المحددة بين الأعمدة.
- في قسم جسم العنصر '
' ، يتم تضمين ثمانية عناصر أخرى '' التي تستخدم ' عرض الحدود ' و ال ' لون الحدود 'الطبقات ، على التوالي.انتاج |
قم بتشغيل كود HTML أعلاه في الخادم المباشر وتحليل الإخراج:
كما رأينا ، يضيف الإخراج الفجوة المحددة بين الأعمدة في كلا البعدين بشكل مناسب.
مثال 2: استخدم الأداة المساعدة 'gap- {size}' لإضافة فجوة بين الصفوف والأعمدة بشكل مستقل
ال ' فجوة- {size} 'يمكن أيضًا تنفيذ الأداة المساعدة بأبعاد' x (أفقي) 'و' y (عمودي) 'مثل' gap-x- {size} 'للصفوف ، و' gap-y- {size} 'للأعمدة لإضافة فجوة بينهما بشكل فردي.دعونا نرى تنفيذه العملي.
كود HTML
< رأس >
ألق نظرة على الكود المحدد:
< وصلة href = '/dist/output.css' rel = 'ورقة الأنماط' >
< / رأس >
< جسم >
< شعبة فصل = 'mx-2 grid-cols-4 gap-x-4 gap-y-6' >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الأول < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الثاني < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الثالث < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الرابع < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الخامس < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي السادس < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي السابع < / شعبة >
< شعبة فصل = 'border-2 border-orange-600' > البرنامج التعليمي الثامن < / شعبة >
< / شعبة >
< جسم >هنا ، ' فجوة- x- {size} 'تضيف الأداة المساعدة الفجوة بين الصفوف و' فجوة- ص- {size} 'يضيف الفجوة المحددة بين الأعمدة بشكل مستقل.
انتاج |
تتحقق النتيجة أعلاه من تطبيق الفجوة بين الصفوف والأعمدة وفقًا لذلك.
خاتمة
توفر 'Tailwind CSS' عنصرًا مدمجًا فجوة- {size} ”لإضافة الفجوة بين الأعمدة. يمكن استخدامه أيضًا لإضافة الفجوة بين الصفوف والأعمدة بشكل منفصل عبر ' فجوة- x- {size} ' و ال ' فجوة- ص- {size} ' خدمات. قدم هذا المنشور الإجراء الكامل لإضافة الفجوة بين الأعمدة في Tailwind.
- في قسم جسم العنصر '