সিএসএস ফ্লেক্সবক্স এবং সিএসএস গ্রিডের মধ্যে পার্থক্য

বিকাশকারী হিসাবে আমাদের যা করতে হবে তা হল একটি নতুন প্রকল্প করার জন্য দেওয়া হলে কীভাবে একটি সমস্যার কাছে যেতে হবে তা নির্ধারণ করা। প্রতিক্রিয়াশীল ওয়েবসাইটগুলির সাথে কাজ করার সময়, আমরা প্রায়শই আমাদের ওয়েবসাইট লেআউট করতে CSS গ্রিড এবং CSS ফ্লেক্সবক্সের মধ্যে বেছে নেব। এই নিবন্ধটি গ্রিড এবং ফ্লেক্সবক্সের মধ্যে পার্থক্যগুলি বোঝার চেষ্টা করবে এবং কখন একটির উপর অন্যটিকে বেছে নেওয়া ভাল হবে৷

ফ্লেক্সবক্স - একটি সংক্ষিপ্ত বিবরণ

CSS Flexbox মূলত একটি প্রতিক্রিয়াশীল বক্স মডেল। এটি একটি পাত্রের মধ্যে আরও ভাল অবস্থানের জন্য অনুমতি দেয় এবং যতক্ষণ পর্যন্ত আপনি এর ক্ষমতা সম্পর্কে সচেতন থাকেন ততক্ষণ এটি বাস্তবায়ন করা মোটামুটি সহজ।

নমনীয় বক্স মডেল এখনও মার্জিন, প্যাডিং, সীমানা এবং বিষয়বস্তু নিয়ন্ত্রণ করতে বক্স মডেলের সমস্ত বৈশিষ্ট্য ব্যবহার করে। যখন আমরা display: flex সেট করি একটি অভিভাবক কন্টেইনারে, এটি সমস্ত ফ্লেক্স বৈশিষ্ট্যগুলিকে খুলে দেয় যা সেই পিতামাতার সন্তানদের জন্য ব্যবহার করা হবে৷

ফ্লেক্সবক্স বৈশিষ্ট্য নির্বাচন:

• ফ্লেক্স-ডিরেকশন :কলাম | সারি * | কলাম-বিপরীত | সারি-বিপরীত
• ফ্লেক্স-র্যাপ :মোড়ানো | nowrap * | wrap-reverse
• ফ্লেক্স-ফ্লো :তালিকাভুক্ত প্রথম দুটি বৈশিষ্ট্যের জন্য শর্টকাট - এটি বিন্যাস অনুসরণ করবে flex-flow: <flex-direction> <flex-wrap>;
• ন্যায্যতা-সামগ্রী: প্রধান অক্ষ বরাবর আইটেম ফাঁকা. যখন ফ্লেক্স-দিক সারিতে সেট করা হয়, তখন প্রধান অক্ষ হল অনুভূমিক অক্ষ। কলামে সেট করা হলে, প্রধান অ্যাক্সেস হল উল্লম্ব অক্ষ৷ ৷
  • জাস্টিফাই-কন্টেন্ট:ফ্লেক্স-স্টার্ট* | flex-end | কেন্দ্র | স্থান-সমভাবে | স্থান-আশেপাশে | স্পেস-এর মধ্যে
• সারিবদ্ধ আইটেমগুলি:৷ প্রধান অ্যাক্সেসের বিপরীতে অক্ষ বরাবর আইটেমগুলিকে ফাঁকা করে। যখন ফ্লেক্স-নির্দেশ কলামে সেট করা হয়, তখন এটি উল্লম্ব অক্ষ হবে। সারিতে সেট করা হলে, সেটি হবে অনুভূমিক অক্ষ।
  • সারিবদ্ধ-আইটেম:প্রসারিত * |center |flex-start |flex-end |বেসলাইন
• align-self: এটি ফ্লেক্স আইটেমগুলিতে ব্যবহার করার অনুমতি দেওয়া হয়েছে যাদের পিতামাতা তাদের প্রদর্শন সম্পত্তি 'ফ্লেক্স' হিসাবে ঘোষণা করেছেন। এটি ফ্লেক্স পাত্রে প্রান্তিককরণ নিয়ন্ত্রণ করে।
  • align-self:auto* | প্রসারিত | কেন্দ্র | flex-start | flex-end | বেসলাইন

* - সম্পত্তির ডিফল্ট সেটিং

সিএসএস গ্রিড - একটি সংক্ষিপ্ত বিবরণ

CSS গ্রিড হল আরেকটি লেআউট মডেল যা ব্যবহারের জন্য উপলব্ধ। এটি CSS ফ্লেক্সবক্স মডেলের চেয়ে একটু নতুন, তাই ব্রাউজার সমর্থন CSS গ্রিডের জন্য ফ্লেক্সবক্সের মতো ব্যাপকভাবে উপলব্ধ নয়। আমাদের কাছে কলাম এবং সারিতে একটি 2D লেআউট তৈরি করার ক্ষমতা রয়েছে যা সতর্কতার সাথে স্থাপন করা অবস্থানের সাথে। যখন আমরা display: grid সেট করি আমাদের মূল উপাদানে, এটি আমাদের জন্য উপলব্ধ সাধারণ গ্রিড বৈশিষ্ট্যগুলি ব্যবহার করার অনুমতি দেয়।

সিএসএস গ্রিড বৈশিষ্ট্য নির্বাচন

• গ্রিড-গ্যাপ, গ্রিড-কলাম-গ্যাপ, গ্রিড-সারি-ব্যবধান: এটি মূলত ব্যবধান নির্ধারণ করতে ব্যবহৃত হয়। গ্রিড গ্যাপ হল একটি শর্টকাট যা কলাম এবং সারি ব্যবধান নিয়ন্ত্রণ করার জন্য।
• গ্রিড-টেমপ্লেট-কলাম, গ্রিড-টেমপ্লেট-সারি: এটি আপনার গ্রিডের কন্টেইনারগুলির প্রাথমিক বিন্যাস করার অনুমতি দেয় – কলামগুলি কত চওড়া হবে, সারির উচ্চতা কত হবে, প্রতিটি সারিতে কতগুলি কন্টেইনার থাকবে ইত্যাদি।
• ন্যায্যতা-সামগ্রী :পুরো গ্রিডকে অনুভূমিকভাবে সারিবদ্ধ করে।
• সারিবদ্ধ বিষয়বস্তু :পুরো গ্রিডকে উল্লম্বভাবে সারিবদ্ধ করে।
• গ্রিড-কলাম, গ্রিড-সারি: আমরা আমাদের গ্রিড আইটেমগুলি কতটা চওড়া বা কতটা উঁচুতে চাই তা ঘোষণা করার অনুমতি দেয়।

আমি কোনটি বেছে নেব?

সিএসএস ফ্লেক্সবক্সের বৈশিষ্ট্যগুলি এমন একটি ডিজাইনের জন্য অনুমতি দেয় যা এক-মাত্রিক বিন্যাস:আপনি হয় সারি বা কলাম ব্যবহার করে আপনার লেআউট তৈরি করতে সেট আপ করতে পারেন। এটি এমন ওয়েব পৃষ্ঠাগুলির জন্য দুর্দান্ত যা কন্টেন্ট প্লেসমেন্টে কম ফোকাস করে এবং প্রতিক্রিয়াশীল ডিজাইনের নমনীয়তার উপর বেশি।

বিপরীতে, CSS গ্রিড আপনাকে দ্বিমাত্রিক স্থানে লেআউট তৈরি করতে দেয়:সারি এবং কলাম সহ। এমন বৈশিষ্ট্য রয়েছে যা গ্রিডে প্রতিটি পাত্রের বিন্যাস এবং প্রস্থ এবং উচ্চতা নিয়ন্ত্রণ করে। তাই আপনি গ্রিডের সাথে শেষ করতে পারেন যা এই ব্লগের শীর্ষে পোস্ট করা দাগযুক্ত কাচের উইন্ডোটির মতো দেখতে।

আপনি যদি কন্টেন্ট প্লেসমেন্টে মনোনিবেশ করেন এবং স্পেসে আপনার চাইল্ড কন্টেইনার নিয়ন্ত্রণ করতে চান, তাহলে গ্রিড হল আপনার জন্য লেআউট ফর্ম্যাট। ফ্লেক্সবক্স স্থান নির্ধারণের পরিবর্তে বিষয়বস্তুর প্রবাহের উপর বেশি ফোকাস করে।

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।

গ্রিডের জন্য ব্রাউজার সমর্থন ফ্লেক্সবক্সের মতো বিস্তৃত নয় - কেবল কারণ আমি মনে করি ফ্লেক্সবক্স গ্রিডের চেয়ে একটু পুরানো। আপনার প্রকল্পে কোন লেআউট মডেল ব্যবহার করতে হবে তা বেছে নেওয়ার সময় এটি একটি বিবেচ্য হতে পারে।

উপসংহার

আপনি যে লেআউট মডেলটি বেছে নিন, সমস্যা সমাধানের জন্য উভয়ই বৈধ বিকল্প। আপনি সিএসএস ফ্লেক্স লেআউট বা সিএসএস গ্রিড লেআউট বেছে নিচ্ছেন কিনা তা নির্ধারণ করে প্রজেক্টের উদ্দেশ্য কি তা শুধুমাত্র একটি বিষয়।