CSS গ্রিডে যান

একটি ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, প্রথম জিনিসগুলির মধ্যে একটি হল আপনার অ্যাপের বিষয়বস্তু সাজানোর একটি উপায়৷

অনেক ডিজাইনার বিষয়বস্তু সাজানোর জন্য কাল্পনিক গ্রিড ব্যবহার করেন, তা কোনো সাইট বা অ্যাপের জন্যই হোক না কেন। সিএসএস গ্রুপটি লেআউটগুলিকে সহজ করার জন্য কঠোর পরিশ্রম করছে এবং এর অংশ হিসাবে সিএসএস গ্রিড লেআউট মডিউল তৈরি করেছে যা এখন ব্রাউজারগুলিতে উদ্ভূত হচ্ছে।

এই বৈশিষ্ট্যটি একটি পরীক্ষামূলক পতাকার পিছনে Chrome-এ চেষ্টা করার জন্য উপলব্ধ। এটি 10 ​​সংস্করণ থেকে IE-তেও প্রয়োগ করা হয়েছে এবং সম্ভবত শীঘ্রই বেশিরভাগ ব্রাউজারে এটি চালু হবে।

নির্বাহী সারসংক্ষেপ

• CSS গ্রিড লেআউট আপনাকে আপনার লেআউটের জন্য সারি এবং কলাম সংজ্ঞায়িত করতে দেয়
• গ্রিড উপলব্ধ স্থান ব্যবহার করতে মানিয়ে নিতে পারে
• বিষয়বস্তু অর্ডার গ্রিড ধারক প্রদর্শন আদেশ থেকে স্বাধীন হতে পারে
• মিডিয়া কোয়েরির উপর ভিত্তি করে লেআউট পরিবর্তন হতে পারে, প্রতিক্রিয়াশীল ডিজাইনকে সহজ করে তোলে
• বিষয়বস্তু ওভারল্যাপ করতে পারে (অন্যান্য পদ্ধতিতে অসম্ভব লেআউট সক্ষম করা)
• গ্রিড লেআউট দ্রুত

এখানে একটি ওভারভিউ ভিডিও রয়েছে যা CSS গ্রিড লেআউট কীভাবে কাজ করে সে সম্পর্কে অনেক কিছু ব্যাখ্যা করে ( স্লাইডগুলি এখানে রয়েছে :

চেষ্টা কর

ক্রোমে CSS গ্রিড লেআউট ব্যবহার করা এখন সহজ। বৈশিষ্ট্যটি সক্ষম করতে আপনাকে প্রথমে যা করতে হবে তা হল পরীক্ষামূলক পতাকা চালু করা।

প্রথমে chrome://flags URL লোড করুন এবং নীচে দেখানো হিসাবে পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করার বিকল্পটিতে স্ক্রোল করুন:

পতাকা চালু করতে সক্ষম করুন ক্লিক করুন, এবং আপনি ব্রাউজারটি পুনরায় চালু করার জন্য একটি প্রম্পট দেখতে পাবেন যা এইরকম দেখাচ্ছে:

এখন আপনার ব্রাউজার রিস্টার্ট করতে এখনই রিলঞ্চ করুন বোতামে ক্লিক করুন এবং আপনি সিএসএস গ্রিড লেআউট ব্যবহার করে দেখতে প্রস্তুত হয়ে যাবেন।

আপনি কি ভাবছেন আমাদের জানান

CSS গ্রিড লেআউট ওয়েব সামগ্রীর জন্য একটি দুর্দান্ত নতুন আদিম, কিন্তু যথারীতি আমরা সবাই এটি সম্পর্কে বিকাশকারীরা কী ভাবছে তা শুনতে আগ্রহী। প্রতিক্রিয়া দেওয়ার অনেক উপায় রয়েছে - এখানে একটি মন্তব্য করুন, বিষয় লাইনে "[css-গ্রিড]" সহ W3C CSS ওয়ার্কিং গ্রুপের তালিকায় মেল পাঠান, লগ বাগগুলি, বা ব্লগ এবং আপনি যা মনে করেন তা টুইট করুন৷ আমরা এই অতি দরকারী নতুন বৈশিষ্ট্যের সাথে আপনার তৈরি করা দুর্দান্ত লেআউটগুলি দেখার জন্য উন্মুখ।

একটি ওয়েব অ্যাপ্লিকেশন তৈরি করার সময়, প্রথম জিনিসগুলির মধ্যে একটি হল আপনার অ্যাপের বিষয়বস্তু সাজানোর একটি উপায়৷

অনেক ডিজাইনার বিষয়বস্তু সাজানোর জন্য কাল্পনিক গ্রিড ব্যবহার করেন, তা কোনো সাইট বা অ্যাপের জন্যই হোক না কেন। সিএসএস গ্রুপটি লেআউটগুলিকে সহজ করার জন্য কঠোর পরিশ্রম করছে এবং এর অংশ হিসাবে সিএসএস গ্রিড লেআউট মডিউল তৈরি করেছে যা এখন ব্রাউজারগুলিতে উদ্ভূত হচ্ছে।

এই বৈশিষ্ট্যটি একটি পরীক্ষামূলক পতাকার পিছনে Chrome-এ চেষ্টা করার জন্য উপলব্ধ। এটি 10 ​​সংস্করণ থেকে IE-তেও প্রয়োগ করা হয়েছে এবং সম্ভবত শীঘ্রই বেশিরভাগ ব্রাউজারে এটি চালু হবে।

নির্বাহী সারসংক্ষেপ

• CSS গ্রিড লেআউট আপনাকে আপনার লেআউটের জন্য সারি এবং কলাম সংজ্ঞায়িত করতে দেয়
• গ্রিড উপলব্ধ স্থান ব্যবহার করতে মানিয়ে নিতে পারে
• বিষয়বস্তু অর্ডার গ্রিড ধারক প্রদর্শন আদেশ থেকে স্বাধীন হতে পারে
• মিডিয়া কোয়েরির উপর ভিত্তি করে লেআউট পরিবর্তন হতে পারে, প্রতিক্রিয়াশীল ডিজাইনকে সহজ করে তোলে
• বিষয়বস্তু ওভারল্যাপ করতে পারে (অন্যান্য পদ্ধতিতে অসম্ভব লেআউট সক্ষম করা)
• গ্রিড লেআউট দ্রুত

এখানে একটি ওভারভিউ ভিডিও রয়েছে যা CSS গ্রিড লেআউট কীভাবে কাজ করে সে সম্পর্কে অনেক কিছু ব্যাখ্যা করে ( স্লাইডগুলি এখানে রয়েছে :

চেষ্টা কর

ক্রোমে CSS গ্রিড লেআউট ব্যবহার করা এখন সহজ। বৈশিষ্ট্যটি সক্ষম করতে আপনাকে প্রথমে যা করতে হবে তা হল পরীক্ষামূলক পতাকা চালু করা।

প্রথমে chrome://flags URL লোড করুন এবং নীচে দেখানো হিসাবে পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করার বিকল্পটিতে স্ক্রোল করুন:

পতাকা চালু করতে সক্ষম করুন ক্লিক করুন, এবং আপনি ব্রাউজারটি পুনরায় চালু করার জন্য একটি প্রম্পট দেখতে পাবেন যা এইরকম দেখাচ্ছে:

এখন আপনার ব্রাউজার রিস্টার্ট করতে এখনই রিলঞ্চ করুন বোতামে ক্লিক করুন এবং আপনি সিএসএস গ্রিড লেআউট ব্যবহার করে দেখতে প্রস্তুত হয়ে যাবেন।

আপনি কি ভাবছেন আমাদের জানান

CSS গ্রিড লেআউট ওয়েব সামগ্রীর জন্য একটি দুর্দান্ত নতুন আদিম, কিন্তু যথারীতি আমরা সবাই এটি সম্পর্কে বিকাশকারীরা কী ভাবছে তা শুনতে আগ্রহী। প্রতিক্রিয়া দেওয়ার অনেক উপায় রয়েছে - এখানে একটি মন্তব্য করুন, বিষয় লাইনে "[css-গ্রিড]" সহ W3C CSS ওয়ার্কিং গ্রুপের তালিকায় মেল পাঠান, লগ বাগগুলি, বা ব্লগ এবং আপনি যা মনে করেন তা টুইট করুন৷ আমরা এই অতি দরকারী নতুন বৈশিষ্ট্যের সাথে আপনার তৈরি করা দুর্দান্ত লেআউটগুলি দেখার জন্য উন্মুখ।