সিএসএস দিয়ে পারফেক্ট রেসপন্সিভ গ্রিড তৈরি করুন

কিভাবে একটি প্রতিক্রিয়াশীল গ্রিড তৈরি করতে হয় তা জানা ওয়েব ডেভেলপমেন্টের একটি অপরিহার্য অংশ।

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

আপনি যদি জানেন কিভাবে একটি ভাল, প্রতিক্রিয়াশীল গ্রিড লেআউট তৈরি করতে হয়, তাহলে আপনি অবিলম্বে একজন ফ্রন্ট-এন্ড ওয়েব ডেভেলপার হিসেবে আলাদা হয়ে উঠবেন।

একটি গ্রিড কি তা সম্পর্কে একটি দ্রুত ওভারভিউ সহ সরাসরি এটিতে প্রবেশ করা যাক:

গ্রিড লেআউট কি?

মিডিয়াতে ভিজ্যুয়াল উপাদানগুলিকে সংগঠিত করার জন্য গ্রিড একটি চেষ্টা করা এবং সত্য পদ্ধতি৷

ডিজাইনাররা ছাপা সংবাদপত্র এবং বিজ্ঞাপনের প্রথম দিন থেকেই গ্রিডগুলি প্রয়োগ করেছে৷

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

একটি গ্রিড ডিজাইন এলাকাটিকে কলামে ভাগ করবে। কলামগুলির মধ্যে একটি স্থান, বা নর্দমা।

সাধারণত আপনি মোট বারোটি কলাম চান কারণ তারপর আপনি স্থানটিকে দুই বা তিনটি ফ্যাক্টরে ভাগ করতে পারেন।

আপনি স্টুডিওপ্রেস ওয়েবসাইটের থিমে এই অনুশীলনটি কার্যকর দেখতে পারেন:

কলামগুলি অবশ্যই একই প্রস্থ হতে হবে না। আপনি হয়ত কিছু কলাম দুই কলামে স্প্যান করতে চান এবং অন্যগুলো চার, ছয় বা তার বেশি স্প্যান করতে চান।

শুধু নিশ্চিত করুন যে পৃষ্ঠার সমস্ত উপাদান একটি কলামে শুরু হয় এবং শেষ হয়৷

এছাড়াও, আপনি আপনার উল্লম্ব এলাকাকে বিভিন্ন জোনে ভাগ করতে পারেন, প্রতিটি জোনে কলামের প্রস্থের আলাদা সমন্বয় রয়েছে।

এটি প্রাথমিকভাবে শোনার মতো জটিল নয়, তাই না? তাই এখন যেহেতু আমরা মৌলিক বিষয়গুলি জানি, আপনার ওয়েবসাইটে প্রতিক্রিয়াশীল গ্রিড তৈরি করার সেরা উপায় কী?

পড়ুন এবং খুঁজে বের করুন:

একটি প্রতিক্রিয়াশীল গ্রিড তৈরি করার পদ্ধতি

ইদানীং ফ্লেক্সবক্স এবং সিএসএস গ্রিড লেআউট নিয়ে অনেক আলোচনা হয়েছে।

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

(এবং ফ্লোট গ্রিডের আগে, এইচটিএমএল টেবিল ছিল একমাত্র বিকল্প। কিন্তু আমরা সেগুলি নিয়ে কথা বলি না 😉)

আমি যখন ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট শিখছিলাম, তখন আমি একটি প্রতিক্রিয়াশীল ফ্রেমওয়ার্ক, Zurb Foundation ব্যবহার শুরু করেছি। আপনারা অনেকেই বুটস্ট্র্যাপ ব্যবহার করতে পারেন।

রেসপনসিভ ফ্রেমওয়ার্ক ওয়েবসাইট তৈরি করা অনেক সহজ করে তোলে। তারা একটি বিশাল সময় বাঁচায়!

যাইহোক, যদিও তারা আপনার সময় বাঁচাতে পারে, তবে তাদের উপর খুব বেশি নির্ভর করা ভাল জিনিস নয়। বিশেষ করে যদি আপনি জানেন না তারা ঠিক কী করছে।

ফ্রেমওয়ার্কের হুডের অধীনে অন্তর্নিহিত ভারা কীভাবে কাজ করে তা বোঝার চেষ্টা করুন। কিছু কলাম ক্লাস আপনার ডিভ-এ ফেলার মতো সহজ নয়, তবে আপনি CSS নীতিগুলি আরও ভালভাবে বুঝতে পারবেন।

নীচের লাইন:এটি আপনাকে আরও ভাল ওয়েব ডেভেলপার করে তুলবে।

আমাদের মিনি-প্রকল্প

আমরা কীভাবে তিনটি ভিন্ন পদ্ধতি ব্যবহার করে একটি সাধারণ 2-কলামের গ্রিড তৈরি করতে হয় সে সম্পর্কে ডুব দিতে যাচ্ছি:

• ভাসা,
• ফ্লেক্সবক্স,
• এবং CSS গ্রিড লেআউট।

আমি কোড স্নিপেট এবং কিছু গ্রাফিক্স ব্যবহার করে প্রতিটি ধাপ ব্যাখ্যা করব।

গ্রিডের পরিকল্পনা করা

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

একটি লেআউট তৈরি করার সময়, আপনাকে প্রথমে যে জিনিসটি সিদ্ধান্ত নিতে হবে তা হল এটি কীভাবে প্রতিক্রিয়াশীল দেখাবে৷ এর অর্থ, ডেস্কটপে দেখার সময় লেআউটটি কীভাবে পরিবর্তন হবে, বনাম ট্যাবলেট বা মোবাইলে দেখার সময়।

একটি বিল্ড শুরু করার সময় আমি যে কৌশলটি ব্যবহার করি তা হল ডিভাইস জুড়ে ডিজাইন কীভাবে পরিবর্তিত হবে তা লিখতে হবে। এই অনুশীলনের জন্য এখানে আমার নোট রয়েছে:

মোবাইলে , আমরা কলামগুলি স্ট্যাক করতে চাই, প্রধান বিষয়বস্তু উপরে এবং এর নীচে সাইডবার সহ। উভয়ই 100% প্রস্থে হবে।

ট্যাবলেটে , আমরা চাই কলামগুলি পাশাপাশি থাকুক, প্রতিটির 50% প্রস্থ থাকবে৷

ডেস্কটপে , আমরা চাই মূল বিষয়বস্তুর কলামটি 2/3 প্রস্থ এবং সাইডবারটি 1/3 প্রস্থ গ্রহণ করুক।

এবং আমরা চাই যে গ্রিডটি সেই প্রতিটি ব্রেকপয়েন্টের মতো দেখতে থাকুক:

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

এখন আমাদের গ্রিড তৈরি শুরু করার জন্য আমাদের প্রয়োজনীয় প্রাথমিক তথ্য আছে!

ফ্লোট গ্রিড

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

CSS-এ ফ্লোট প্রপার্টিটি মূলত ব্যবহার করার জন্য তৈরি করা হয়েছিল যেমন টেক্সটকে ছবির চারপাশে প্রবাহিত করার অনুমতি দেওয়া। ছবিটিকে একটি ফ্লোট দেওয়া:বাম রুলসেটটি প্যারেন্ট এলিমেন্টের বাম দিকে ছবিটিকে সারিবদ্ধ করবে, বা "ফ্লোট" করবে।

ফ্লোট দিয়ে একটি গ্রিড তৈরি করা

একটি গ্রিড তৈরি করতে, আপনি একাধিক উপাদানকে একটি ফ্লোট প্রপার্টি দেবেন, যা তাদের সকলকে ডান বা বামে একপাশে সারিবদ্ধ করবে।

.column {
   display: block;
   float: left;
}

বেশ সোজা মনে হচ্ছে, তাই না?

যাইহোক, ফ্লোট সম্পর্কে একটি বিরক্তিকর দিক হল এটি উপাদানটিকে নথির স্বাভাবিক প্রবাহের বাইরে নিয়ে যায়।

নীচের এই চিত্রটি দেখায় যখন নীল ভাসমান কলামগুলি স্বাভাবিক প্রদর্শনের বাইরে নেওয়া হয় তখন কী ঘটে। ধূসর অভিভাবক ডিভটি তখন উচ্চতায় ভেঙে পড়বে যদি এটির কোন সন্তান না থাকে।

আপনি কয়েকটি উপায়ে এই সমস্যার সমাধান করতে পারেন।

আপনি একটি display: table যোগ করতে পারেন মূল উপাদানের নিয়ম সেট। অথবা আপনি একটি :after যোগ করে ফ্লোটগুলি সাফ করতে পারেন ফ্লোটগুলি সাফ করার জন্য নিম্নলিখিত শৈলী সহ পিতামাতার কাছে ছদ্ম-উপাদান।

.parent:after
{
   clear: both;
   content: "";
   display: block;
}

আরেকটি নোট হল যে আপনি যদি প্যাডিং এবং মার্জিন ব্যবহার করেন (যা মূলত সবসময় হয়) তাহলে আপনাকে বক্স-সাইজিং সেট করতে হবে:প্রতিটি উপাদানে বর্ডার-বক্স।

উপাদানগুলির চূড়ান্ত প্রস্থ এবং উচ্চতা গণনা করার সময় এই ঘোষণায় প্যাডিং এবং মার্জিন অন্তর্ভুক্ত থাকে। এটি নিশ্চিত করে যে উপাদানগুলি পৃষ্ঠার বাইরে যাবে না।

*, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

Chris Coyier এখানে এই সব একটি সত্যিই মহান ব্যাখ্যা আছে.

গ্রিডকে প্রতিক্রিয়াশীল করতে মিডিয়া প্রশ্ন ব্যবহার করা

গ্রিডকে প্রতিক্রিয়াশীল করতে, আমরা মিডিয়া প্রশ্নগুলি ব্যবহার করব। সেগুলি ব্যবহার করে, আমরা গ্রিডকে নির্দিষ্ট ডিভাইসের প্রস্থে একটি নির্দিষ্ট বিন্যাস থাকতে বলতে সক্ষম হব৷

আমাদের নোট থেকে, আমরা মোবাইলের জন্য প্রধান এবং সাইডবার উভয় উপাদানই 100% প্রস্থ, তারপর ট্যাবলেটে 50% পাশাপাশি, এবং তারপর ডেস্কটপে 2/3 এবং 1/3 প্রস্থ পাশাপাশি হতে চাই৷

HTML-এ আমরা প্যারেন্ট ডিভ তৈরি করব, যেখানে দুটি চাইল্ড কলাম ডিভ সহ ক্লাস নির্দেশ করবে যদি সেগুলি প্রধান বা সাইডবার বিভাগ হয়।

<div class="parent">
   <div class="column main"></div>
   <div class="column sidebar"></div>
</div>

মোবাইলে:

CSS-এ, মোবাইল-প্রথম পদ্ধতি ব্যবহার করে, আমরা ডিফল্টরূপে উভয় কলামকে 100% এ সেট করব।

.column {
   display: block;
   width: 100%;
}

ট্যাবলেটে:

তারপর ট্যাবলেট এবং তার চেয়ে বেশি প্রস্থের জন্য, আমরা কলামগুলিকে বাম দিকে ভাসিয়ে দেব এবং সেগুলিকে 50% প্রস্থ করব৷

@media only screen and (min-width: 641px){
   .column {
     width: 50%;
     float: left;
   }
}

ডেস্কটপে:

ডেস্কটপের জন্য আমরা প্রধান এবং সাইডবার বিষয়বস্তুর প্রস্থ 2/3 এবং 1/3 পরিবর্তন করে আরেকটি মিডিয়া ক্যোয়ারী যোগ করব।

@media only screen and (min-width: 1025px){
   .main {
      width: 66.66%;
   }
   .sidebar {
      width: 33.33%;
   }
}

আপনি এখানে আমার কোডপেনে কার্যকরী কোডটি দেখতে পারেন:

কোডপেনে জেসিকার (@thecodercoder) পেন ফ্লোট গ্রিড দেখুন।

এটা তুলনামূলকভাবে সহজ বলে মনে হচ্ছে, তাই না? ফ্লোটগুলি ভয়ানক নয়- এগুলিই আমাদের বেশ কিছুদিন ধরে ছিল৷

কিন্তু আমরা যখন ফ্লেক্সবক্সে এগিয়ে যাচ্ছি, আমি মনে করি আপনি দেখতে পাবেন যে কীভাবে ফ্লোট গ্রিডগুলি কিছুটা হ্যাকি, এবং ফ্লেক্সবক্স আরও স্বজ্ঞাত৷

ফ্লেক্সবক্স গ্রিড

ফ্লেক্সবক্স ব্যবহার করে একটি প্রতিক্রিয়াশীল গ্রিড তৈরি করতে, আমরা উপরের মতো একই HTML ব্যবহার করব, একটি প্যারেন্ট ডিভ সহ যার দুটি চাইল্ড কলাম ডিভ রয়েছে৷

আপনাকে প্রথমে যা করতে হবে তা হল ঘোষণা করা যে অভিভাবকের flexbox ব্যবহার করা উচিত:

.parent {
   display: flex;
}

তারপর কলাম ডিভ-এ ফ্লেক্স প্রপার্টি সেট করুন:

.column {
   flex: 1;
}

flex: 1 ঘোষণার অর্থ হল প্রতিটি কলাম ডিভের অন্যান্য কলামের মতো একই প্রস্থ থাকবে। এটা অনেকটা অনুপাতের মত।

আপনি যদি প্রথম কলামটি অন্য কলামের প্রস্থের দ্বিগুণ করতে চান, তাহলে আপনি প্রথম কলামের ফ্লেক্সকে 2 এ সেট করবেন। এবং দ্বিতীয় কলামের ফ্লেক্সের মানটি হবে তার অর্ধেক, 1।

শুরু করার জন্য আপনার এতটুকুই দরকার!

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

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

ফ্লেক্স গ্রিড তৈরি করা

এখন, আমাদের দুই-কলামের প্রতিক্রিয়াশীল গ্রিড তৈরি করতে, আমরা ফ্লোট গ্রিডের জন্য যা করেছি তা করব এবং প্রথমে মোবাইলের জন্য আমাদের ডিফল্ট শৈলী সেট করব।

মোবাইলের জন্য:

আমাদের মোবাইলে ফ্লেক্সবক্সের প্রয়োজন নেই, শুধুমাত্র ট্যাবলেট এবং ডেস্কটপে, তাই প্যারেন্ট ডিভের প্রয়োজন নেই display: flex ঘোষণা এখনো।

আমরা চাই কলাম ডিভগুলি প্রস্থের 100% হোক। আপনি স্পষ্টভাবে একটি প্রস্থ সেট করতে পারেন:কলামগুলিতে 100% ঘোষণা, আপনি যদি চান।

অথবা আপনি শুধু একটি প্রস্থ শৈলী ঘোষণা করতে পারবেন না। div সাধারণত display: block-এ ডিফল্ট হবে এবং স্বয়ংক্রিয়ভাবে 100% প্রস্থ হবে।

ট্যাবলেটের জন্য:

ট্যাবলেট থেকে শুরু করে আমরা ফ্লেক্সবক্সে যোগ করব, এবং ট্যাবলেট প্রস্থ এবং তার বেশি স্টাইলগুলির জন্য মিডিয়া প্রশ্নগুলি ব্যবহার করব৷

প্রথমে, আমরা flexbox তৈরি করব এবং অভিভাবককে display: flex ব্যবহার করতে সেট করব .

আমরা চাই কলামগুলি এই প্রস্থে সমানভাবে ব্যবধানে থাকুক, তাই আমরা flex: 1 ব্যবহার করব সমস্ত কলাম ডিভের জন্য ঘোষণা। 1 এর মানে হল যে কলামগুলি একে অপরের সাথে একই প্রস্থের হবে।

@media only screen and (min-width: 641px){
   .parent {
   display: flex;
}
.column {
   flex: 1;
   }
}

ডেস্কটপের জন্য:

ডেস্কটপে, আমরা চাই মূল বিষয়বস্তু উপলব্ধ প্রস্থের 2/3 অংশ গ্রহণ করুক। সাইডবার অবশিষ্ট 1/3 গ্রহণ করবে।

এটি সম্পন্ন করার জন্য, আমরা মূল কলামের ফ্লেক্স মান বাড়িয়ে 2 করব . সাইডবার ফ্লেক্স 1 এ থাকবে ট্যাবলেটে সেট করুন, তাই ডেস্কটপের জন্য অন্য ঘোষণার প্রয়োজন নেই।

@media only screen and (min-width: 1025px){
   .main {
      flex: 2;
   }
}

এর মানে হল মূল বিষয়বস্তু সাইডবারের প্রস্থের দ্বিগুণ হবে।

যেহেতু দুটি কলাম আছে, মূল বিষয়বস্তু হবে 2/3 প্রস্থের, এবং সাইডবার হবে অর্ধেক, 1/3 প্রস্থ।

ফ্লেক্সবক্স শক্তিশালী এবং স্বজ্ঞাত

আপনি অবিলম্বে দেখতে পারেন যে সিএসএস ফ্লেক্সবক্সের প্রয়োজন কত কম। এবং এটি যে গ্রিড তৈরি করে তা ফ্লোট গ্রিডের মতোই।

ফ্লেক্সবক্স সম্পর্কে আমি যা পছন্দ করি তা হল এটি কেবল কাজ করে . এটা স্বজ্ঞাত।

বছরের পর বছর CSS ফ্লোটের সাথে কুস্তি করার পরে, আমি বিশ্বাস করতে পারিনি যে গ্রিড তৈরি করা কতটা সহজ ছিল।

ফ্লেক্সবক্সে আরও উন্নত বৈশিষ্ট্য রয়েছে যা আপনি সুবিধা নিতে পারেন:

• কলাম আইটেমগুলি অনুভূমিকভাবে বা উল্লম্বভাবে সারিবদ্ধ করুন (হ্যাঁ, উল্লম্বভাবে!!)।
• আইটেমগুলিকে কেন্দ্রে রাখুন বা গ্রিড প্যারেন্টের বাম এবং ডান প্রান্তে প্রসারিত করুন৷
• বিভিন্ন ব্রেকপয়েন্টে আইটেমের ক্রম পরিবর্তন করুন।

CSS Tricks এবং Mozilla-এ এই নিবন্ধগুলিতে flexbox কী করতে পারে সে সম্পর্কে আপনি আরও পড়তে পারেন।

এবং এখানে ফ্লেক্স গ্রিডের কোডপেন:

কোডপেনে জেসিকার (@thecodercoder) পেন ফ্লেক্স গ্রিড দেখুন।

আপনাকে আর কখনো ফ্লোট ব্যবহার করতে হবে না। যদি না আপনি একটি চিত্রের চারপাশে পাঠ্য মোড়ানো না করেন, অবশ্যই।

কিছু আরো মজা জন্য প্রস্তুত? চলুন শেষ গ্রিড পদ্ধতিতে যাওয়া যাক:

CSS গ্রিড লেআউট

সিএসএস গ্রিড হল গ্রিড তৈরির নতুন পদ্ধতি। এটি একই রকম, তবুও ফ্লেক্সবক্স থেকে খুব আলাদা।

CSS গ্রিডের বিশেষজ্ঞ রাচেল অ্যান্ড্রুর মতে, তাদের প্রত্যেকেরই শক্তি আছে:

• ফ্লেক্সবক্স একটি সারিতে বা একটি কলামে এক দিকে সাজানো উপাদানগুলির জন্য দরকারী৷
• CSS গ্রিড সারি এবং কলাম জড়িত ব্যবস্থার জন্য দরকারী।

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

বর্তমানে, CSS গ্রিডের প্রধান অসুবিধা হল যে এটি সর্বজনীনভাবে সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়৷

ক্রোম, আইওএস সাফারি এবং অ্যান্ড্রয়েডের পুরানো সংস্করণগুলি এটিকে সমর্থন করে না। এবং IE এবং এজ সমর্থন দাগযুক্ত।

আপনি যদি CSS গ্রিড ব্যবহার করতে চান, আপনার কাছে কয়েকটি বিকল্প রয়েছে:

• আপনি এটি ব্যবহার করতে পারেন এবং এটি সমর্থন করে না এমন ব্রাউজারগুলির জন্য কিছু CSS ফলব্যাক অন্তর্ভুক্ত করতে পারেন৷
• অথবা আপনি flexbox ব্যবহার করতে পারেন এবং ব্রাউজার সমর্থন আরও সর্বব্যাপী না হওয়া পর্যন্ত অপেক্ষা করতে পারেন।

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

ফ্লেক্সবক্সের মতো, CSS গ্রিডের জন্য আপনাকে প্যারেন্ট এলিমেন্টে একটি প্রদর্শন বৈশিষ্ট্য সেট করতে হবে। এই ক্ষেত্রে আমরা display: grid ঘোষণা করব .

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

গ্রিড টেমপ্লেট সেট করতে, আমরা কলাম এবং/অথবা সারিগুলির সংখ্যা এবং প্রতিটির আকার ঘোষণা করব৷

এটি সম্পন্ন করতে, grid-template-columns ব্যবহার করুন আপনার যদি একাধিক কলাম থাকে এবং grid-template-rows থাকে একাধিক সারির জন্য।

সম্পত্তি তারপর প্রতিটি চাইল্ড উপাদানের জন্য একটি দৈর্ঘ্য মান দ্বারা অনুসরণ করা হয়.

দুটি কলাম সহ একটি গ্রিডের জন্য, আমরা শুধু grid-template-columns ব্যবহার করব সম্পত্তি।

grid-template-columns সম্পত্তির তখন দুটি মান থাকবে, প্রতিটি কলামের জন্য একটি:

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

হেক একটি "fr" কি?!

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

এটি আসলে flex এর মত সংখ্যা- উভয়ই একটি শিশু উপাদানের আপেক্ষিক প্রস্থকে অন্যের সাথে উপস্থাপন করে।

সিএসএস গ্রিড তৈরি করা

এখানে আমরা কীভাবে গ্রিডকে স্টাইল করব, মোবাইল-ফার্স্ট অ্যাপ্রোচ থেকে আরও একবার।

মোবাইলে:

যথারীতি, চাইল্ড কলামগুলি মোবাইলে স্ট্যাক হবে, তাই আমরা কোনও CSS গ্রিড শৈলী সেট করব না।

ট্যাবলেটে:

আমরা ট্যাবলেটের জন্য একে অপরের সমান প্রস্থের দুটি শিশু উপাদান চাই।

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

ডেস্কটপে:

আমরা সাইডবার কলামের প্রস্থের দ্বিগুণ প্রধান কলামের অনুরূপ অনুপাত করব, যা আবার 2/3 এবং 1/3 গণনা করে৷

@media only screen and (min-width: 1025px){
   .parent {
      grid-template-columns: 2fr 1fr;
   }
}

খুব সুন্দর যে আমাদের প্রকৃত কলামগুলিতে কোনও গ্রিড শৈলী সেট করতে হবে না, শুধুমাত্র অভিভাবক!

সিএসএস গ্রিড অবিশ্বাস্যভাবে শক্তিশালী

ফ্লেক্সবক্সের মতো, সিএসএস গ্রিড অনেক কিছু করতে পারে, শুধু একটি দুই কলামের গ্রিড তৈরি করার চেয়ে অনেক বেশি।

আপনি বিভিন্ন প্রস্থ, উচ্চতা এবং বিন্যাসের আরও জটিল লেআউট তৈরি করতে CSS গ্রিড ব্যবহার করতে পারেন। CSS গ্রিড কি সক্ষম তা আমি সত্যিই স্ক্র্যাচ করেছি।

আপনি যদি CSS গ্রিড সম্বন্ধে আরও পড়তে আগ্রহী হন, তাহলে র‍্যাচেল অ্যান্ড্রু-এর ওয়েবসাইট গ্রিড বাই উদাহরণ বা একটি মোজিলা প্রবন্ধ দেখুন, "গ্রিড লেআউটের মৌলিক ধারণা।"

এবং এখানে আমি এটির জন্য কোডপেন তৈরি করেছি:

কোডপেনে জেসিকার (@thecodercoder) পেন সিএসএস গ্রিড দেখুন।

শেষে

আপনি যদি ভেবে থাকেন যে কোন পদ্ধতিটি আপনার জন্য সর্বোত্তম, আমি ব্যক্তিগতভাবে মনে করি ফ্লেক্সবক্স এই মুহূর্তে সেরা বিকল্প৷

এটি প্রায় যথেষ্ট দীর্ঘ হয়েছে যে এটিতে ভাল ব্রাউজার সমর্থন রয়েছে এবং এটি গ্রিড তৈরি করার একটি ভাল, কার্যকর উপায়। এছাড়াও, এটি সিএসএস গ্রিড দ্বারা সম্পূর্ণরূপে প্রতিস্থাপিত হবে না, কারণ এটির শক্তি রয়েছে যা সিএসএস গ্রিডের সাথে ভালভাবে কাজ করবে।

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

তোমার পছন্দের কিছু আছে? আপনি কি ফ্লেক্সবক্স বা সিএসএস গ্রিড শেখার চেষ্টা করে আটকে গেছেন? নীচে একটি মন্তব্য করতে নির্দ্বিধায়৷