ستوضح هذه المقالة طريقة تطبيق نقاط التوقف واستعلامات الوسائط على شبكة الصف في Tailwind CSS.
كيفية تطبيق نقاط الفصل واستعلامات الوسائط على شبكة الصفوف في Tailwind؟
لتطبيق نقاط التوقف واستعلامات الوسائط على شبكة الصفوف في Tailwind ، أنشئ برنامج HTML. بعد ذلك ، حدد عدد الصفوف لمختلف أحجام الشاشات باستخدام ' سم '،' م ' أو ' إل جي 'مع' صفوف الشبكة- <القيمة> ' خدمات. بعد ذلك ، تأكد من إجراء التغييرات على صفحة الويب عن طريق ضبط حجم الشاشة.
دعونا نستكشف التنفيذ العملي:
الخطوة 1: استخدم Breakpoints و Media Queries مع شبكة الصفوف في برنامج HTML
أنشئ برنامج HTML وحدد عدد الصفوف لأحجام الشاشات المختلفة باستخدام ' صفوف الشبكة- <القيمة> ' جدوى. على سبيل المثال ، استخدمنا ' م 'فاصل مع' صفوف الشبكة 3 'فائدة و' إل جي 'مع' صفوف الشبكة 5 'لتغيير عدد الصفوف على أحجام الشاشات المختلفة:
< جسم >
< شعبة فصل = 'grid-rows-2 md: grid-rows-3 lg: grid-rows-5 network-flow-col gap-3 m-3 text-center' >
< شعبة فصل = 'bg-teal-500 p-5' > 1 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 2 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 3 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 4 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 5 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 6 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 7 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 8 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 9 < / شعبة >
< شعبة فصل = 'bg-teal-500 p-5' > 10 < / شعبة >
< / شعبة >
< / جسم >
هنا:
- ' شبكة 'يتم استخدام فئة لإنشاء تخطيط شبكي.
- ' صفوف الشبكة 2 'فئة تحدد أن الشبكة يجب أن تحتوي على صفين متساويين الحجم.
- ' md: شبكة الصفوف 3 'فئة تغير الشبكة إلى 3 صفوف متساوية الحجم على شاشة متوسطة الحجم.
- ' lg: شبكة صفوف 5 'فئة تغير الشبكة إلى 5 صفوف متساوية الحجم على حجم الشاشة الكبير.
- ' شبكة تدفق العمود 'فئة تضع عناصر الشبكة أفقيًا في أعمدة.
- ' فجوة 3 'فئة تحدد مسافة 3 وحدات بين كل عنصر في الشبكة.
- ' م -3 تطبق فئة هامش من 3 وحدات حول حاوية الشبكة.
- ' مركز النص 'فئة نص كل عنصر شبكة إلى المركز.
- ' bg-teal-500 'فئة تحدد لون البط البري لخلفية عناصر الشبكة.
- ' ص -5 'فئة تضيف مساحة متروكة من 5 وحدات إلى المحتوى الموجود داخل الطفل
أغراض.
الخطوة 2: تحقق من الإخراج
للتأكد من تطبيق نقاط التوقف واستعلامات الوسائط على شبكة الصفوف ، قم بعرض صفحة ويب HTML عن طريق تغيير حجم الشاشة:
في الإخراج أعلاه ، يمكن ملاحظة أن عدد الصفوف يتغير مع حجم الشاشة. يشير هذا إلى أنه تم تطبيق استعلامات نقاط التوقف والوسائط على شبكة الصف بنجاح.
خاتمة
لتطبيق نقاط الفصل واستعلامات الوسائط على شبكة الصفوف في Tailwind ، حدد عدد الصفوف لأحجام الشاشات المختلفة باستخدام ' سم '،' م ' أو ' إل جي 'مع' صفوف الشبكة- <القيمة> ' خدمات. بعد ذلك ، تأكد من إجراء التغييرات على صفحة الويب عن طريق تغيير حجم الشاشة. توضح هذه المقالة طريقة تطبيق نقاط التوقف واستعلامات الوسائط على شبكة الصفوف في Tailwind CSS.