এই নিবন্ধটি Tailwind CSS-এ সারি গ্রিডে ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্ন প্রয়োগ করার পদ্ধতির উদাহরণ দেবে।
টেইলউইন্ডে সারি গ্রিডে ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি কীভাবে প্রয়োগ করবেন?
টেলউইন্ডের সারি গ্রিডে ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্ন প্রয়োগ করতে, একটি HTML প্রোগ্রাম তৈরি করুন। তারপর, ' ব্যবহার করে বিভিন্ন স্ক্রীন আকারের জন্য সারির সংখ্যা নির্ধারণ করুন sm ', ' মো 'বা' এলজি 'এর সাথে ব্রেকপয়েন্ট' গ্রিড-সারি-
আসুন ব্যবহারিক বাস্তবায়ন অন্বেষণ করা যাক:
ধাপ 1: HTML প্রোগ্রামে সারি গ্রিড সহ ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি ব্যবহার করুন
একটি এইচটিএমএল প্রোগ্রাম তৈরি করুন এবং বিভিন্ন স্ক্রীন আকারের জন্য সারির সংখ্যা নির্ধারণ করুন ' গ্রিড-সারি-
< শরীর >
< div ক্লাস = 'গ্রিড গ্রিড-সারি-2 এমডি:গ্রিড-সারি-3 এলজি:গ্রিড-সারি-5 গ্রিড-প্রবাহ-কল ফাঁক-3 m-3 পাঠ্য কেন্দ্র' >
< div ক্লাস = 'bg-teal-500 p-5' > 1 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 2 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 3 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 4 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 5 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 6 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 7 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 8 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 9 < / div >
< div ক্লাস = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / শরীর >
এখানে:
- ' গ্রিড ” ক্লাস একটি গ্রিড লেআউট তৈরি করতে ব্যবহার করা হয়।
- ' গ্রিড-সারি-2 ” ক্লাস নির্দিষ্ট করে যে গ্রিডে 2টি সমান আকারের সারি থাকা উচিত।
- ' md:গ্রিড-সারি-3 ” ক্লাস মাঝারি স্ক্রিনের আকারে গ্রিডটিকে 3টি সমান আকারের সারিতে পরিবর্তন করে।
- ' lg:গ্রিড-সারি-5 ” ক্লাস বড় পর্দার আকারে গ্রিডটিকে 5টি সমান আকারের সারিতে পরিবর্তন করে।
- ' গ্রিড-ফ্লো-কল ” ক্লাস গ্রিড আইটেমগুলিকে কলামে অনুভূমিকভাবে রাখে।
- ' ফাঁক-3 ” ক্লাস প্রতিটি গ্রিড আইটেমের মধ্যে 3 ইউনিটের ব্যবধান সেট করে।
- ' m-3 ” ক্লাস গ্রিড কন্টেইনারের চারপাশে 3 ইউনিটের মার্জিন প্রয়োগ করে।
- ' পাঠ্য কেন্দ্র ” ক্লাস প্রতিটি গ্রিড আইটেমের পাঠ্য কেন্দ্রে সেট করে।
- ' bg-teal-500 ” ক্লাস গ্রিড আইটেমগুলির পটভূমিতে টিল রঙ সেট করে।
- ' p-5 ” ক্লাস শিশুর ভিতরের বিষয়বস্তুতে 5 ইউনিটের একটি প্যাডিং যোগ করে
আইটেম
ধাপ 2: আউটপুট যাচাই করুন
ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্নগুলি সারি গ্রিডে প্রয়োগ করা হয়েছে তা নিশ্চিত করতে, পর্দার আকার পরিবর্তন করে HTML ওয়েব পৃষ্ঠাটি দেখুন:
উপরের আউটপুটে, এটি দেখা যায় যে পর্দার আকারের সাথে সারির সংখ্যা পরিবর্তিত হয়। এটি ইঙ্গিত করে যে ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্নগুলি সারি গ্রিডে সফলভাবে প্রয়োগ করা হয়েছে৷
উপসংহার
টেইলউইন্ডের সারি গ্রিডে ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করতে, 'ব্যবহার করে বিভিন্ন স্ক্রিনের আকারের জন্য সারির সংখ্যা নির্ধারণ করুন sm ', ' মো 'বা' এলজি 'এর সাথে ব্রেকপয়েন্ট' গ্রিড-সারি-
'ইউটিলিটিস। তারপর, পর্দার আকার পরিবর্তন করে ওয়েব পৃষ্ঠায় পরিবর্তন নিশ্চিত করুন। এই নিবন্ধটি Tailwind CSS-এ সারি গ্রিডে ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্ন প্রয়োগ করার পদ্ধতির উদাহরণ দিয়েছে।