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

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

Una Kravets

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

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

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

০১. সুপার সেন্টারড: 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;
}

এটি বিষয়বস্তুকে পুরোপুরি অভিভাবকের মধ্যে কেন্দ্রীভূত করতে সক্ষম করে, অভ্যন্তরীণ আকার নির্বিশেষে।

০২. ডিকনস্ট্রাক্টেড প্যানকেক: flex: <grow> <shrink> <baseWidth>

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

এই ইফেক্টের জন্য 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;
}

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

০৩. সাইডবার বলে: 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;
}

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

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

কম্পোনেন্টে display: grid যোগ করলে আপনাকে একটি একক কলামের গ্রিড দেওয়া হবে, তবে মূল এলাকাটি কেবল তার নীচের ফুটারের কন্টেন্টের সমান লম্বা হবে।

ফুটারটি নীচে আটকে রাখার জন্য, যোগ করুন:

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

এটি হেডার এবং ফুটারের কন্টেন্টকে স্বয়ংক্রিয়ভাবে তার শিশু-কিশোরদের আকার নিতে সেট করে এবং অবশিষ্ট স্থান ( 1fr ) মূল এলাকায় প্রয়োগ করে, যখন auto আকারের সারিটি তার শিশুদের-কিশোরদের ন্যূনতম সামগ্রীর আকার নেবে, যাতে সেই সামগ্রীর আকার বৃদ্ধি পায়, সারিটি নিজেই সামঞ্জস্য করতে বৃদ্ধি পাবে।

০৫. ক্লাসিক হলি গ্রেইল লেআউট: 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;
}

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

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

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

.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;
}

০৭. র‍্যাম (পুনরাবৃত্তি, স্বয়ংক্রিয়, সর্বনিম্ন সর্বোচ্চ): 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 ব্যবহার করে, বাক্সগুলি প্রসারিত হবে কারণ তাদের অনুভূমিক আকার 150px অতিক্রম করবে এবং বাকি সমস্ত স্থান পূরণ করবে। তবে, যদি আপনি এটিকে auto-fill এ পরিবর্তন করেন, তাহলে minmax ফাংশনে তাদের বেস আকার অতিক্রম করলেও তারা প্রসারিত হবে না:

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

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

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

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

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

০৯. ক্ল্যাম্পিং মাই স্টাইল: clamp(<min>, <actual>, <max>)

এখানে আমরা কিছু কৌশল সম্পর্কে জানবো যা লেআউট এবং প্রতিক্রিয়াশীল UI ডিজাইনের জন্য সত্যিই উত্তেজনাপূর্ণ প্রভাব ফেলে। এই ডেমোতে, আপনি clamp ব্যবহার করে প্রস্থ নির্ধারণ করছেন যেমন so: width: clamp(<min>, <actual>, <max>) ।

এটি একটি পরম সর্বনিম্ন এবং সর্বোচ্চ আকার এবং একটি প্রকৃত আকার নির্ধারণ করে। মানগুলির সাথে, এটি দেখতে এরকম হতে পারে:

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

এখানে সর্বনিম্ন আকার হল 23ch অথবা 23 অক্ষর ইউনিট, এবং সর্বোচ্চ আকার হল 46ch , 46 অক্ষর। অক্ষর প্রস্থ ইউনিটগুলি উপাদানের ফন্ট আকারের উপর ভিত্তি করে (বিশেষ করে 0 গ্লিফের প্রস্থ)। 'প্রকৃত' আকার হল 50%, যা এই উপাদানের মূল প্রস্থের 50% প্রতিনিধিত্ব করে।

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

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

সর্বনিম্ন এবং সর্বোচ্চ আকারের মান সহ সুস্পষ্টতা নিশ্চিত করার জন্য এটি একটি দুর্দান্ত কৌশল।

১০. দিকের প্রতি শ্রদ্ধা: aspect-ratio: <width> / <height>

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

aspect-ratio প্রোপার্টি ব্যবহার করে, আমি যখন কার্ডের আকার পরিবর্তন করি, তখন সবুজ ভিজ্যুয়াল ব্লকটি এই 16 x 9 অনুপাত বজায় রাখে। আমরা aspect-ratio: 16 / 9 দিয়ে Aspect Ratio-কে সম্মান করছি।

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

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

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

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

উপসংহার

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