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