DevTools টিপস: কিভাবে CSS গ্রিড পরিদর্শন করবেন

সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova

Chrome DevTools বিভিন্ন ভিজ্যুয়ালাইজেশন বিকল্পের সাথে ডিবাগিং CSS গ্রিড লেআউটগুলিকে স্বজ্ঞাত করে তোলে।

কীভাবে এলিমেন্টস প্যানেলে গ্রিড ওভারলে টগল করতে হয় এবং এটি ব্যবহার করতে হয় তা জানতে ভিডিওটি দেখুন:

গ্রিড ওভারলে।

  • গ্রিড লেআউটগুলি ভিজ্যুয়ালাইজ করুন এবং পরিদর্শন করুন।
  • গ্রিড আইটেম স্থাপন করার সময় উল্লেখ করার জন্য সারি এবং কলাম নম্বর দেখুন।
  • লাইন এবং এলাকার নাম ব্যবহার করুন এবং আপনার যদি প্রচুর গ্রিড আইটেম থাকে এবং সংখ্যাগুলি বিভ্রান্তিকর হয় তবে ওভারলেতে সেগুলি দেখুন।
  • ট্র্যাক মাপ পরীক্ষা করুন.

অতিরিক্তভাবে, এলিমেন্টস > স্টাইল প্যানে গ্রিড এডিটরের সাহায্যে, আপনি CSS নিয়ম টাইপ করার পরিবর্তে একটি বোতামে ক্লিক করে একটি গ্রিড লেআউটে আইটেম এবং তাদের বিষয়বস্তু সারিবদ্ধ করতে পারেন।

গ্রিড সম্পাদক।

আরও হাতে-কলমে শেখার অভিজ্ঞতার জন্য, CSS গ্রিড পরিদর্শন টিউটোরিয়াল অনুসরণ করুন।

,

সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova

Chrome DevTools বিভিন্ন ভিজ্যুয়ালাইজেশন বিকল্পের সাথে ডিবাগিং CSS গ্রিড লেআউটগুলিকে স্বজ্ঞাত করে তোলে।

কীভাবে এলিমেন্টস প্যানেলে গ্রিড ওভারলে টগল করতে হয় এবং এটি ব্যবহার করতে হয় তা জানতে ভিডিওটি দেখুন:

গ্রিড ওভারলে।

  • গ্রিড লেআউটগুলি ভিজ্যুয়ালাইজ করুন এবং পরিদর্শন করুন।
  • গ্রিড আইটেম স্থাপন করার সময় উল্লেখ করার জন্য সারি এবং কলাম নম্বর দেখুন।
  • লাইন এবং এলাকার নাম ব্যবহার করুন এবং আপনার যদি প্রচুর গ্রিড আইটেম থাকে এবং সংখ্যাগুলি বিভ্রান্তিকর হয় তবে ওভারলেতে সেগুলি দেখুন।
  • ট্র্যাক মাপ পরীক্ষা করুন.

অতিরিক্তভাবে, এলিমেন্টস > স্টাইল প্যানে গ্রিড এডিটরের সাহায্যে, আপনি CSS নিয়ম টাইপ করার পরিবর্তে একটি বোতামে ক্লিক করে একটি গ্রিড লেআউটে আইটেম এবং তাদের বিষয়বস্তু সারিবদ্ধ করতে পারেন।

গ্রিড সম্পাদক।

আরও হাতে-কলমে শেখার অভিজ্ঞতার জন্য, CSS গ্রিড পরিদর্শন টিউটোরিয়াল অনুসরণ করুন।