সিএসএস গ্রিডের সাহায্যে দ্বি-মাত্রিক ওয়েবসাইটগুলি কীভাবে তৈরি করবেন তা শিখুন

সিএসএস গ্রিডের সাহায্যে আপনি সাধারণত যে সময়টি করেন তার চেয়ে দ্বিমাত্রিক ওয়েবসাইটের বিন্যাস তৈরি করতে পারেন।

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

এটি কোনও আশ্চর্য নয় কারণ সিএসএস গ্রিড আপনার অস্ত্রাগারে রাখার একটি শক্তিশালী সরঞ্জাম। এই গাইড আপনাকে কীভাবে আপনার সমস্ত ওয়েব বিকাশ প্রকল্পগুলিতে সিএসএস গ্রিড ব্যবহার করবেন তা শিখিয়ে দেবে।

সিএসএস গ্রিড সিস্টেম কীভাবে কাজ করে

সিএসএস গ্রিড (বা কেবল গ্রিড) মূলত একটি দ্বি-মাত্রিক ওয়েবসাইট লেআউট সিস্টেম যা কোনও ওয়েব পৃষ্ঠায় উপাদানগুলির কাঠামো তৈরি করতে ব্যবহৃত হয়। সিএসএস গ্রিড লেআউট সিস্টেমটি একটি পিতামাতা-শিশু ধারণার উপর নির্মিত হয়েছে, যেখানে আপনার ধারকটির মধ্যে একটি প্রধান ধারক (পিতা-মাতা) এবং বিভিন্ন গ্রিড-আইটেম (শিশুরা) থাকবে।

যে কোনও ওয়েবসাইটে সিএসএস গ্রিড ব্যবহার করতে আপনাকে প্রথমে গ্রিড ধারকটি শুরু করতে হবে। এটি গ্রিডের মান হিসাবে অভিভাবক উপাদানটির প্রদর্শন সম্পত্তি সেট করেই করা হয়।

সিএসএস গ্রিড ধারক উদাহরণ

 
selector{
display: grid;
}

নির্বাচক কোনও এইচটিএমএল উপাদান, শ্রেণি বা একটি আইডি হতে পারে; গুরুত্বপূর্ণ বিষয়টি এটি হ'ল এইচটিএমএল উপাদানটি সনাক্ত করে যা ওয়েব পৃষ্ঠায় থাকা সমস্ত অন্যান্য এইচটিএমএল উপাদানকে আবদ্ধ করে।

গ্রিড লেআউট স্ট্রাকচারে, ধারকটির মধ্যে থাকা সমস্ত উপাদানগুলিকে গ্রিড-আইটেম হিসাবে উল্লেখ করা হয়। ডিফল্টরূপে, সিএসএস গ্রিড লেআউটটি উল্লম্ব হয় (এটি এইচটিএমএল-এও ডিফল্ট লেআউট কাঠামো), সুতরাং যখন গ্রিড-আইটেমগুলির বিন্যাসের উপরের ডিসপ্লে সম্পত্তি ব্যবহার করে কোনও সিএসএস গ্রিড শুরু করা হয় তখন একই (উল্লম্ব) থাকবে।

ওয়েবপৃষ্ঠায় গ্রিড-আইটেমগুলি পুনরায় সাজানোর জন্য আপনাকে গ্রিড-টেম্পলেট-কলামগুলির সম্পত্তি, গ্রিড-টেম্পলেট-সারিগুলির সম্পত্তি বা উভয়ের সংমিশ্রণ ব্যবহার করতে হবে।

এই কারণেই সিএসএস গ্রিডকে দ্বি-মাত্রিক লেআউট সিস্টেম হিসাবে চিহ্নিত করা হয়েছে; এটি আপনাকে একই সাথে আপনার গ্রিড-আইটেমগুলি আনুভূমিকভাবে (সারি) এবং উল্লম্বভাবে (কলাম) উভয় কাঠামোগত করতে দেয়।

গ্রিড-টেম্পলেট-কলামগুলি সম্পত্তি ব্যবহার করে

গ্রিড-টেম্পলেট-কলামগুলির বৈশিষ্ট্য সর্বদা প্রদর্শন সম্পত্তির পাশাপাশি ধারক উপাদানটির মধ্যে উচিত। গ্রিড-টেম্পলেট-কলামগুলির বৈশিষ্ট্য সহ, আপনি আপনার সিএসএস গ্রিড লেআউটে বিভিন্ন স্তরের যে কোনও কলামের সংখ্যাটি নির্দিষ্ট করতে পারেন।

পিক্সেল (পিক্সেল) ব্যবহার করে আপনি আপনার গ্রিড আইটেমগুলিকে কাঠামোগত করতে পারেন way

পিক্সেল উদাহরণ সহ গ্রিড-আইটেমগুলি গঠন করা

 
.gridContainer{
display: grid;
grid-template-columns: 400px 400px 400px;
}

উপরের উদাহরণে দুটি জিনিস নোট করা দরকার। প্রথমটি হ'ল উপরের কোডটি আপনার ওয়েব পৃষ্ঠায় প্রতিটি 400px প্রস্থ সহ তিনটি কলাম তৈরি করবে। যদি আপনার ধারকটিতে তিনটিরও কম গ্রিড-আইটেম থাকে তবে আপনার স্ক্রিনে কেবল একটি বা দুটি কলাম প্রদর্শিত হবে।

তবে, আপনার ধারক গ্রিড-আইটেমের সংখ্যা যদি তিনটি অতিক্রম করে, তিনটি গ্রিড-আইটেমের প্রতিটি গ্রুপ শেষ না হওয়া পর্যন্ত একটি নতুন লাইনে স্থাপন করা হবে।

দ্বিতীয় বিষয়টি লক্ষণীয়: আপনার গ্রিড-আইটেমগুলিকে কাঠামোগত করার জন্য px মানগুলি খুব ব্যবহারিক পদ্ধতির নয়। এটি মূলত কারণ পিক্সেল ইউনিট প্রতিক্রিয়াশীল নকশা সমর্থন করে না।

উপরের উদাহরণে ফিরে যান; যদি আমাদের ধারকটিতে ছয়টি গ্রিড-আইটেম থাকে তবে বাঁদিকে দুটি গ্রিড-আইটেমগুলি কোনও ট্যাবলেটে তাৎক্ষণিকভাবে দৃশ্যমান হবে না।

আপনার গ্রিড-আইটেমগুলি বিন্যাস করতে px (বা অন্য কোনও স্থির মান) র প্রস্তাবিত বিকল্প হ'ল ভগ্নাংশ (ফ্রি ইউনিট) ।

ভগ্নাংশের মান উদাহরণ ব্যবহার করে

 
.gridContainer{
display: grid;
grid-template-columns: 1fr 2fr;
}

উপরের কোডটি উদ্দিষ্ট ওয়েব পৃষ্ঠায় দুটি কলাম তৈরি করবে। ডানদিকে কলামটি বাম দিকের চেয়ে দ্বিগুণ প্রশস্ত হবে। ফ্র ব্যবহারের সুপারিশ করার প্রধান কারণ হ'ল ফ্রি প্রতিক্রিয়াশীলতা সমর্থন করে।

সুতরাং, কোনও ডিভাইসে স্ক্রিনের আকার যাই হোক না কেন, ডানদিকে কলামটি সর্বদা বাম দিকের চেয়ে দ্বিগুণ হয়ে থাকবে।

এই লেআউটটি এমন উদাহরণগুলিতে জনপ্রিয় যেখানে ওয়েবপৃষ্ঠায় একটি আলাদা বিভাগ রয়েছে। ছোট আকারের কলামটি একপাশে বিভাগের জন্য সংরক্ষিত থাকবে, এতে মূল প্রবাহের অংশ নয় (যেমন সামগ্রীর সারণী) এর সাথে সম্পর্কিত এমন সামগ্রী থাকতে পারে।

গ্রিড-টেম্পলেট-সারি সম্পত্তি ব্যবহার করে

গ্রিড-টেম্পলেট-সারিগুলির সম্পত্তি ব্যবহারের মানদণ্ড গ্রিড-টেম্পলেট-কলামগুলির সম্পত্তি থেকে কিছুটা মিল ident

একটি স্পষ্ট পার্থক্য হ'ল যেখানে গ্রিড-টেম্পলেট-সারিগুলির সম্পত্তি সারি তৈরি করে, গ্রিড-টেম্পলেট-কলামগুলির সম্পত্তি কলাম তৈরি করে। তবে দুটি বৈশিষ্ট্যের মধ্যে আরও সূক্ষ্ম পার্থক্য রয়েছে (যেমন অন্তর্ভুক্ত সারি এবং সামগ্রিক সারি কাঠামো)।

সারি কাঠামো

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

গ্রিড-টেম্পলেট-সারিগুলির সম্পত্তি নিয়ে এটি হয় না। নিম্নলিখিত উদাহরণ বিবেচনা করুন।

গ্রিড-টেম্পলেট-সারি উদাহরণ

 
.gridContainer{
display: grid;
grid-template-rows: 1fr 3fr;
}

যদি উপরের সিএসএস কোডটি এমন কোনও এইচটিএমএল নথিকে লক্ষ্য করতে তৈরি করা হয় যাতে গ্রিডকন্টেইনার শ্রেণীর উপাদানগুলির প্রতিটি প্রত্যক্ষ শিশু হ'ল পাঁচটি < ডিআইভি > ট্যাগ রয়েছে, তবে প্রথম উপাদানটির ডিফল্ট উচ্চতা থাকবে এবং দ্বিতীয় উপাদানটির উচ্চতা হবে প্রথম আকারের তিনগুণ।

আপনি তৃতীয় ডিভ উপাদান পৌঁছে যখন সমস্যা স্পষ্ট হয়; আপনি দেখতে পাবেন যে চারপাশে মোড়ানো এবং দ্বিতীয় কলাম তৈরি করার পরিবর্তে সারিগুলি স্ক্রিনের নিরবচ্ছিন্ন অবিরত থাকবে। এই সারিগুলিকে অন্তর্নিহিত সারি হিসাবে উল্লেখ করা হয় কারণ তারা উপরের কোড দ্বারা প্রভাবিত থাকবে না এবং তাদের ডিফল্ট উচ্চতা ধরে রাখতে থাকবে।

এই অন্তর্নিহিত সারিগুলিকে গ্রিড-অটো-সারি বৈশিষ্ট্য ব্যবহার করে লক্ষ্যবস্তু করা যেতে পারে।

গ্রিড-অটো-সারি সম্পত্তি ব্যবহার করে

গ্রিড-অটো-সারিগুলির বৈশিষ্ট্য প্রায়শই গ্রিডে সারিগুলিতে উচ্চতা নির্ধারণের জন্য ব্যবহৃত হয় যা গ্রিড-টেম্পলেট-সারিগুলির সম্পত্তির বাইরে চলে যায়।

গ্রিড-অটো-সারি উদাহরণ

 
.gridContainer{
display: grid;
grid-template-rows: 1fr 3fr;
grid-auto-rows: 3fr;
}

উপরের সিএসএস কোডটি এমন একটি ধারককে টার্গেট করতে হয়েছে যা সরাসরি পাঁচটি গ্রিড-আইটেমগুলি গ্রিড-টেম্পলেট-সারিগুলির সংযুক্তিযুক্ত সম্পত্তিটি প্রথম দুটি গ্রিড-আইটেমের জন্য প্রযোজ্য হবে, অন্যদিকে গ্রিড-অটো-সারির সম্পত্তি অন্য তিনটিতে প্রযোজ্য হবে উপাদানগুলি – কার্যকরভাবে সন্নিবেশিত সারিগুলির সমস্যা সমাধান করে।

যদিও প্রয়োজনের সময় আপনি গ্রিড-টেম্পলেট-সারি এবং গ্রিড-টেম্পলেট-কলামগুলি পৃথকভাবে ব্যবহার করতে পারেন, তবুও আপনি সিএসএস গ্রিড র পরামর্শ দিচ্ছেন যখন দ্বি-মাত্রিক বিন্যাস (সারি এবং কলাম) প্রয়োজন হবে। যদি প্রয়োজনটি কেবলমাত্র এক-মাত্রিক বিন্যাসের (সারি বা কলাম) হয় তবে একটি ভাসমান বিন্যাস কাঠামো আরও ভাল বিকল্প হতে পারে।

আপনার ওয়েবসাইটের বিন্যাস কাঠামো কখনও সহজতর হয় নি

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

  • ধারক উপাদানের প্রদর্শন বৈশিষ্ট্যে গ্রিড মান নির্ধারণ করা।
  • ধারক উপাদানটির মধ্যে গ্রিড-টেম্পলেট-সারি এবং গ্রিড-টেম্পলেট-কলামগুলি ব্যবহার করে।
  • গ্রিড-অটো-সারি বৈশিষ্ট্যটি যখন পাত্রে উপাদানগুলির উপাদানগুলির পরিমাণ গ্রিড-টেম্পলেট-সারিগুলির বৈশিষ্ট্যগুলির চেয়ে বেশি ছাড়িয়ে যায়।

চূড়ান্ত অবলম্বন হ'ল আপনি দ্বি-মাত্রিক বিন্যাস কাঠামোর উপর কার্যকরভাবে সিএসএস গ্রিড ব্যবহার করছেন তা নিশ্চিত করা। যখন এক-মাত্রিক লেআউট কাঠামো প্রয়োজন হয় তখন ভাসমান বিন্যাস কাঠামো আরও ভাল বিকল্প হিসাবে প্রমাণিত হতে পারে।