في Tailwind CSS ، يجعل امتداد الصف عنصرًا يشغل صفين أو أكثر داخل الشبكة. يتم استخدامه لتحديد عدد الصفوف التي يجب أن يشغلها العنصر / يمتد. يسمح للمستخدمين بضبط حجم عنصر الشبكة وموضعه عبر صفوف متعددة وإنشاء تخطيطات مختلفة. علاوة على ذلك ، يمكن استخدامه لإنشاء تخطيطات شبكة مرنة وسريعة الاستجابة لصفحات الويب.
ستجسد عملية الكتابة هذه طريقة عمل امتداد الصفوف في Tailwind CSS.
كيف تجعل الصفوف تمتد في Tailwind؟
لجعل الصفوف تمتد في Tailwind ، أنشئ برنامج HTML. ثم استخدم ' صف-سبان- <قيمة> 'وتحديد عدد الصفوف التي ستمتد. مطلوب تحديد عدد الصفوف التي يجب أن يمتد عليها كل عنصر محدد. أخيرًا ، اعرض التغييرات على صفحة ويب HTML للتحقق منها.
للتنفيذ العملي ، تحقق من الخطوات المتوفرة:
الخطوة 1: اجعل العمود يمتد في برنامج HTML
قم بإنشاء برنامج HTML واستخدم ' صف-سبان- <قيمة> 'مع عناصر الشبكة لعمل امتداد عمود. على سبيل المثال ، استخدمنا ' row-span-3 'و' row-span-2 'و' row-span-4 ' 'المرافق على النحو التالي:
< جسم >
< شعبة فصل = 'شبكة خطوط الشبكة - 4 شبكة - تدفق - عمود - 3 متر - 3 مركز نص' >
< شعبة فصل = 'row-span-3 bg-teal-500 p-5' > 1 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 2 < / شعبة >
< شعبة فصل = 'row-span-2 bg-teal-500 p-5' > 3 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 4 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 5 < / شعبة >
< شعبة فصل = 'row-span-4 bg-teal-500 p-5' > 6 < / شعبة >
< / شعبة >
< / جسم >
هنا ، في العنصر الأصل
- ' شبكة 'يتم استخدام فئة لإنشاء تخطيط شبكي.
- ' شبكة الصف 4 فئة 'تعيين عدد الصفوف في الشبكة إلى 4.
- ' شبكة تدفق العمود 'فئة تضع عناصر الشبكة أفقيًا في أعمدة.
- ' فجوة 3 'فئة تحدد مسافة 3 وحدات بين كل عنصر في الشبكة.
- ' م -3 تطبق فئة هامش من 3 وحدات حول حاوية الشبكة.
- ' مركز النص 'فئة نص كل عنصر شبكة إلى المركز.
في عناصر الطفل
- ' صف الامتداد 3 'فئة تحدد أن العنصر يجب أن يمتد عبر 3 صفوف في الشبكة.
- ' صف-سبان -2 تشير فئة 'إلى أن العنصر يجب أن يمتد عبر صفين في الشبكة.
- ' صف سبان 4 'فئة تحدد أن العنصر يجب أن يمتد عبر 4 صفوف في الشبكة.
- ' bg-teal-500 'فئة تحدد لون البط البري لخلفية عنصر الشبكة.
- ' ص -5 تضيف فئة 'مساحة متروكة من 5 وحدات إلى المحتوى الموجود داخل عناصر الفرعية.
الخطوة 2: تحقق من الإخراج
اعرض صفحة الويب بتنسيق HTML للتحقق مما إذا تم تطبيق امتداد الصف أم لا:
في الإخراج أعلاه ، يمكن ملاحظة أنه تم تطبيق امتداد الصف بنجاح وفقًا لما تم تحديده.
خاتمة
لتمديد الصفوف في Tailwind ، استخدم ' صف-سبان- <قيمة> ”في برنامج HTML وتحديد عدد الصفوف التي يجب أن يمتد عليها كل عنصر. للتحقق ، اعرض التغييرات على صفحة ويب HTML. لقد جسدت عملية الكتابة هذه طريقة إنشاء صفوف تمتد في Tailwind CSS.