CSS-এর একটি লাইনে দশটি আধুনিক লেআউট

এই পোস্টে CSS-এর কিছু শক্তিশালী লাইন হাইলাইট করা হয়েছে যা কিছু গুরুতর ভারী কাজ করে এবং আপনাকে শক্তিশালী আধুনিক লেআউট তৈরি করতে সাহায্য করে।

Una Kravets

প্রকাশিত: ৭ জুলাই, ২০২০, শেষবার আপডেট করা হয়েছে: ১৫ ডিসেম্বর, ২০২৫

আধুনিক CSS লেআউট ডেভেলপারদের মাত্র কয়েকটি কীস্ট্রোকের মাধ্যমে সত্যিই অর্থপূর্ণ এবং শক্তিশালী স্টাইলিং নিয়ম লিখতে সক্ষম করে। উপরের আলোচনা এবং এই পরবর্তী পোস্টটি CSS-এর ১০টি শক্তিশালী লাইন পরীক্ষা করে যা কিছু গুরুতর ভারী উত্তোলন করে।

মনে রাখবেন: নিবন্ধে উল্লেখ করা দশটি ফিচারই বেসলাইন ব্যাপকভাবে উপলভ্য।

এইসব ডেমো অনুসরণ করতে বা নিজে থেকে চালাতে, উপরে এম্বেড করা সাইট চেক করুন অথবা 1linelayouts.com লিঙ্কে যান।

01. সুপার সেন্টারড: place-items: center

প্রথম 'সিঙ্গেল-লাইন' লেআউটের জন্য, আসুন CSS-এর সবচেয়ে বড় রহস্যের সমাধান করি: জিনিসপত্র সেন্টারে নিয়ে আসা। আমি আপনাকে জানাতে চাই যে place-items: center-এর মাধ্যমে এটি করা আপনার ধারণার চেয়েও সহজ।

প্রথমে display পদ্ধতি হিসেবে grid উল্লেখ করুন এবং তারপর একই এলিমেন্টে place-items: center লিখুন। place-items হল align-items এবং justify-items একসাথে সেট করার শর্টহ্যান্ড। এটি center-এ সেট করার মাধ্যমে, align-items এবং justify-items দুটিই center-এ সেট করা হয়।

.parent {
  display: grid;
  place-items: center;
}

এটি কন্টেন্টকে প্যারেন্টের মধ্যে নিখুঁতভাবে কেন্দ্র করে, অন্তর্নিহিত আকার নির্বিশেষে।

০২. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

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

এই এফেক্টের জন্য Flexbox ব্যবহার করলে, স্ক্রিনের সাইজ পরিবর্তন করার সময় এইসব এলিমেন্টের প্লেসমেন্ট অ্যাডজাস্ট করার জন্য আপনাকে মিডিয়া কোয়েরি ব্যবহার করতে হবে না।

flex শর্টহ্যান্ডের অর্থ হল: flex: <flex-grow> <flex-shrink> <flex-basis>।

এই কারণে, আপনি যদি চান যে আপনার বক্সগুলি তাদের <flex-basis> সাইজে পূরণ হোক, ছোট সাইজে সঙ্কুচিত হোক, কিন্তু কোনও অতিরিক্ত জায়গা পূরণ করার জন্য স্ট্রেচ না হোক, তাহলে লিখুন: flex: 0 1 <flex-basis>। এই ক্ষেত্রে, আপনার <flex-basis> হল 150px তাই এটি দেখতে এমন হবে:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

আপনি যদি চান যে বক্সগুলি প্রসারিত হোক এবং পরবর্তী লাইনে র‍্যাপ করার সাথে সাথে স্পেস পূরণ করুক, তাহলে <flex-grow>-কে 1-এ সেট করুন, যাতে এটি দেখতে এমন হয়:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

এখন, আপনি স্ক্রিনের সাইজ বাড়ালে বা কমালে, এই ফ্লেক্স আইটেমগুলি ছোট এবং বড় হয়।

03. সাইডবার বলছে: grid-template-columns: minmax(<min>, <max>) …)

এই ডেমো গ্রিড লেআউটের জন্য minmax ফাংশনের সুবিধা নেয়। আমরা এখানে যা করছি তা হল সাইডবারের ন্যূনতম সাইজ 150px-এ সেট করছি, তবে বড় স্ক্রিনে এটি 25% পর্যন্ত প্রসারিত হতে পারে। সাইডবার সবসময় তার পেরেন্টের অনুভূমিক স্পেসের 25% অংশ দখল করবে যতক্ষণ না সেই 25% অংশ 150px-এর থেকে ছোট হয়ে যায়।

নিম্নলিখিত ভ্যালু সহ grid-template-columns-এর ভ্যালু হিসেবে এটি যোগ করুন: minmax(150px, 25%) 1fr. প্রথম কলামের আইটেম (এই ক্ষেত্রে সাইডবার) 25%-এ 150px-এর minmax পায় এবং দ্বিতীয় আইটেম (এখানে main বিভাগ) একটি 1fr ট্র্যাক হিসেবে বাকি জায়গা নেয়।

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. প্যানকেক স্ট্যাক: grid-template-rows: auto 1fr auto

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

কম্পোনেন্টে display: grid যোগ করলে আপনি একটি সিঙ্গেল কলাম গ্রিড পাবেন, তবে মূল অংশটি শুধুমাত্র কন্টেন্টের মতো লম্বা হবে এবং এর নিচে ফুটার থাকবে।

ফুটারকে নিচের দিকে আটকে রাখতে, যোগ করুন:

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

এটি হেডার ও ফুটার কন্টেন্টকে অটোমেটিক তার চাইল্ডের সাইজ নিতে সেট করে এবং বাকি স্পেস (1fr) মূল অংশে প্রয়োগ করে, যেখানে auto সাইজের সারি তার চাইল্ডের ন্যূনতম কন্টেন্টের সাইজ নেবে, যাতে কন্টেন্টের সাইজ বাড়লে, সারিটি অ্যাডজাস্ট করার জন্য নিজে থেকেই বড় হবে।

05. ক্লাসিক হোলি গ্রেল লেআউট: grid-template: auto 1fr auto / auto 1fr auto

এই ক্লাসিক হলি গ্রেল লেআউটের জন্য, একটি হেডার, ফুটার, বাঁদিকের সাইডবার, ডানদিকের সাইডবার এবং মূল কন্টেন্ট রয়েছে। এটি আগের লেআউটের মতোই, তবে এখন সাইডবার সহ!

এক লাইনের কোড ব্যবহার করে এই সম্পূর্ণ গ্রিড লিখতে, grid-template প্রপার্টি ব্যবহার করুন। এটি আপনাকে একই সাথে সারি এবং কলাম উভয়ই সেট করতে দেয়।

প্রপার্টি ও ভ্যালুর পেয়ার হল: grid-template: auto 1fr auto / auto 1fr auto। স্পেস দিয়ে আলাদা করা প্রথম ও দ্বিতীয় তালিকার মধ্যে স্ল্যাশ হল সারি ও কলামের মধ্যে ব্রেক।

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

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

06. ১২-স্প্যান গ্রিড: grid-template-columns: repeat(12, 1fr)

এরপর আমাদের কাছে আরেকটি ক্লাসিক আছে: ১২-স্প্যান গ্রিড। আপনি repeat() ফাংশনের মাধ্যমে CSS-এ দ্রুত গ্রিড লিখতে পারবেন। গ্রিড টেমপ্লেট কলামের জন্য repeat(12, 1fr); ব্যবহার করলে, আপনি ১২টি কলাম পাবেন যার প্রত্যেকটির সাইজ হবে 1fr।

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

এখন আপনার কাছে ১২ কলামের ট্র্যাক গ্রিড আছে, আমরা গ্রিডে আমাদের চিলড্রেন প্লেস করতে পারি। এটি করার একটি উপায় হল গ্রিড লাইন ব্যবহার করে সেগুলি প্লেস করা। যেমন, grid-column: 1 / 13 প্রথম থেকে শেষ (১৩তম) লাইন পর্যন্ত এবং ১২টি কলাম জুড়ে থাকবে। grid-column: 1 / 5; প্রথম চারটিতে স্প্যান করবে।

এটি লেখার আরেকটি উপায় হল span কীওয়ার্ড ব্যবহার করা। span-এর মাধ্যমে, আপনি শুরুর লাইন সেট করেন এবং তারপর সেই শুরুর পয়েন্ট থেকে কতগুলি কলাম স্প্যান করতে হবে তা সেট করেন। এই ক্ষেত্রে, grid-column: 1 / span 12, grid-column: 1 / 13-এর সমতুল্য হবে এবং grid-column: 2 / span 6, grid-column: 2 / 8-এর সমতুল্য হবে।

.child-span-12 {
  grid-column: 1 / span 12;
}

০৭. RAM (রিপিট, অটো, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))

এই সপ্তম উদাহরণের জন্য, অটোমেটিক-প্লেস করা এবং ফ্লেক্সিবল চিলড্রেন সহ একটি রেসপন্সিভ লেআউট তৈরি করতে আপনি ইতিমধ্যে শিখেছেন এমন কিছু ধারণা একত্রিত করুন। বেশ ভালো। এখানে মনে রাখার মতো মূল শব্দগুলি হল repeat, auto-(fit|fill) এবং minmax()', যা আপনি RAM অ্যাক্রোনিম দ্বারা মনে রাখেন।

সব মিলিয়ে, এটি দেখতে এরকম হয়:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

আপনি আবার repeat ব্যবহার করছেন, তবে এবার, একটি স্পষ্ট সংখ্যাসূচক মানের পরিবর্তে auto-fit কীওয়ার্ড ব্যবহার করছেন। এটি এইসব চাইল্ড এলিমেন্টের অটোমেটিক প্লেসমেন্ট চালু করে। এই চাইল্ড এলিমেন্টেরও ন্যূনতম ভ্যালু 150px এবং সর্বাধিক ভ্যালু 1fr, অর্থাৎ ছোট স্ক্রিনে এগুলি সম্পূর্ণ 1fr প্রস্থ জুড়ে থাকবে এবং প্রতিটি 150px প্রস্থে পৌঁছালে, একই লাইনে ফ্লো হতে শুরু করবে।

auto-fit-এর ক্ষেত্রে, বক্সের অনুভূমিক সাইজ ১৫০ পিক্সেলের বেশি হলে, বাকি থাকা সম্পূর্ণ স্পেস পূরণ করার জন্য বক্সটি প্রসারিত হবে। তবে, আপনি এটি পরিবর্তন করে auto-fill করলে, minmax ফাংশনে তাদের বেস সাইজ অতিক্রম করলে সেগুলি প্রসারিত হবে না:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. লাইন আপ: justify-content: space-between

পরবর্তী লেআউটের জন্য, এখানে দেখানোর মূল পয়েন্ট হল justify-content: space-between, যা প্রথম এবং শেষ চাইল্ড এলিমেন্টকে তাদের বাউন্ডিং বক্সের প্রান্তে রাখে, বাকি স্পেস এলিমেন্টগুলির মধ্যে সমানভাবে ডিস্ট্রিবিউট করা হয়। এইসব কার্ডের জন্য, সেগুলি Flexbox ডিসপ্লে মোডে রাখা হয়, যার দিকনির্দেশ flex-direction: column ব্যবহার করে কলামে সেট করা হয়।

এটি পেরেন্ট কার্ডের মধ্যে একটি উল্লম্ব কলামে শিরোনাম, বিবরণ এবং ছবির ব্লক রাখে। তারপর, justify-content: space-between প্রয়োগ করলে প্রথম (শীর্ষক) এবং শেষ (ছবি ব্লক) এলিমেন্টগুলি ফ্লেক্সবক্সের প্রান্তে অ্যাঙ্কর করে এবং সেগুলির মধ্যে বর্ণনামূলক টেক্সট প্রতিটি এন্ডপয়েন্টে সমান ব্যবধানে রাখা হয়।

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. Clamping My Style: clamp(<min>, <actual>, <max>)

এখানে আমরা এমন কিছু টেকনিক নিয়ে আলোচনা করব যেগুলি লেআউট ও রেসপন্সিভ UI ডিজাইনের ক্ষেত্রে সত্যিই দারুণ প্রভাব ফেলে। এই ডেমোতে, আপনি এইভাবে ক্ল্যাম্প ব্যবহার করে প্রস্থ সেট করছেন: width: clamp(<min>, <actual>, <max>)।

এটি একটি পরম সর্বনিম্ন এবং সর্বাধিক আকার এবং একটি প্রকৃত আকার সেট করে। ভ্যালু সহ, এটি দেখতে এমন হতে পারে:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

এখানে ন্যূনতম সাইজ হল 23ch বা ২৩টি অক্ষর ইউনিট এবং সর্বাধিক সাইজ হল 46ch, ৪৬টি অক্ষর। অক্ষরের প্রস্থের ইউনিট এলিমেন্টের ফন্ট সাইজের উপর নির্ভর করে (বিশেষ করে 0 গ্লিফের প্রস্থ)। 'আসল' সাইজ হল ৫০%, যা এই এলিমেন্টের পেরেন্ট প্রস্থের ৫০% দেখায়।

এখানে clamp() ফাংশনটি যা করছে তা হল এই এলিমেন্টকে ৫০% প্রস্থ ধরে রাখতে সক্ষম করছে যতক্ষণ না ৫০% হয় 46ch-এর থেকে বেশি (আরও চওড়া ভিউপোর্টে) অথবা 23ch-এর থেকে কম (আরও ছোট ভিউপোর্টে)। আপনি দেখতে পাচ্ছেন যে আমি পেরেন্ট সাইজ বড় বা ছোট করলে, এই কার্ডের প্রস্থ তার ক্ল্যাম্প করা সর্বাধিক পয়েন্ট পর্যন্ত বাড়ে এবং ক্ল্যাম্প করা সর্বনিম্ন পয়েন্ট পর্যন্ত কমে। এটি তখন প্যারেন্ট এলিমেন্টের কেন্দ্রে থাকে কারণ আমরা এটিকে কেন্দ্রে রাখার জন্য অতিরিক্ত প্রপার্টি প্রয়োগ করেছি। এটি আরও সহজে পড়া যায় এমন লেআউট চালু করে, কারণ টেক্সট খুব চওড়া (46ch-এর বেশি) বা খুব ছোট ও সরু (23ch-এর কম) হবে না।

রেসপন্সিভ টাইপোগ্রাফি প্রয়োগ করার ক্ষেত্রেও এটি একটি দারুণ উপায়। যেমন, আপনি এইভাবে লিখতে পারেন: font-size: clamp(1.5rem, 20vw, 3rem)। এই ক্ষেত্রে, কোনও শিরোনামের ফন্ট-সাইজ সবসময় 1.5rem এবং 3rem-এর মধ্যে সীমাবদ্ধ থাকবে, তবে ভিউপোর্টের প্রস্থের সাথে মানানসই করার জন্য 20vw আসল ভ্যালুর উপর ভিত্তি করে বড় এবং ছোট হবে।

সর্বনিম্ন ও সর্বাধিক সাইজের ভ্যালু সহ পাঠযোগ্যতা নিশ্চিত করার জন্য এটি একটি দুর্দান্ত কৌশল।

১০. Respect for Aspect: aspect-ratio: <width> / <height>

এবং সবশেষে, এই শেষ লেআউটটি ছবির অ্যাস্পেক্ট রেশিও বজায় রাখার ক্ষেত্রে প্রায়শই দেখা যায় এমন সমস্যার সমাধান করে।

aspect-ratio প্রপার্টির সাহায্যে, আমি কার্ডের সাইজ পরিবর্তন করার সাথে সাথে, সবুজ ভিজ্যুয়াল ব্লক এই ১৬ x ৯ অ্যাস্পেক্ট রেশিও বজায় রাখে। আমরা aspect-ratio: 16 / 9-এর সাথে অ্যাস্পেক্ট রেশিও বজায় রাখছি।

.video {
  aspect-ratio: 16 / 9;
}

এই প্রপার্টি ছাড়া ১৬ x ৯ অ্যাস্পেক্ট রেশিও বজায় রাখতে, আপনাকে padding-top হ্যাক ব্যবহার করতে হবে এবং উপর থেকে প্রস্থের অনুপাত সেট করতে 56.25% প্যাডিং দিতে হবে। হ্যাক এড়াতে এবং শতাংশ গণনা করার প্রয়োজনীয়তা এড়াতে আমাদের কাছে শীঘ্রই এর জন্য একটি প্রপার্টি থাকবে। আপনি 1 / 1 অনুপাত সহ একটি বর্গক্ষেত্র, 2 / 1 সহ ২ থেকে ১ অনুপাত এবং এই ছবির জন্য আপনার যা প্রয়োজন তা একটি সেট সাইজ অনুপাত সহ স্কেল করতে পারেন।

.square {
  aspect-ratio: 1 / 1;
}

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

উপসংহার

CSS-এর ১০টি শক্তিশালী লাইনের মাধ্যমে এই সফর অনুসরণ করার জন্য ধন্যবাদ। আরও জানতে, সম্পূর্ণ ভিডিওটি দেখুন।