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

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

Una Kravets

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

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

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

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

02. Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

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

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

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 এর চেয়ে ছোট হয়ে যায়।

নিম্নলিখিত মান সহ গ্রিড-টেমপ্লেট-কলামগুলির একটি মান হিসাবে এটি যুক্ত করুন: 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. 12-স্প্যান গ্রিড: 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;
}

এখন আপনার কাছে একটি 12 কলামের ট্র্যাক গ্রিড আছে, আমরা আমাদের বাচ্চাদের গ্রিডে রাখতে পারি। এটি করার একটি উপায় গ্রিড লাইন ব্যবহার করে তাদের স্থাপন করা হবে। উদাহরণস্বরূপ, grid-column: 1 / 13 প্রথম লাইন থেকে শেষ (13তম) এবং 12টি কলাম পর্যন্ত স্প্যান করবে। 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;
}

07. RAM (পুনরাবৃত্তি, অটো, মিনম্যাক্স): 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));
}

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

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

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

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

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

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

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

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

এখানে আমরা কম ব্রাউজার সমর্থন সহ কিছু কৌশলে প্রবেশ করি, কিন্তু লেআউট এবং প্রতিক্রিয়াশীল UI ডিজাইনের জন্য কিছু সত্যিই উত্তেজনাপূর্ণ প্রভাব রয়েছে। এই ডেমোতে, আপনি ক্ল্যাম্প ব্যবহার করে প্রস্থ নির্ধারণ করছেন এভাবে: 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 প্রকৃত মানের উপর ভিত্তি করে বৃদ্ধি এবং সঙ্কুচিত হবে।

এটি একটি সর্বনিম্ন এবং সর্বাধিক আকারের মান সহ স্পষ্টতা নিশ্চিত করার জন্য একটি দুর্দান্ত কৌশল, তবে মনে রাখবেন এটি সমস্ত আধুনিক ব্রাউজারে সমর্থিত নয় তাই নিশ্চিত করুন যে আপনার ফলব্যাক আছে এবং আপনার পরীক্ষা করুন৷

10. দৃষ্টিভঙ্গির প্রতি শ্রদ্ধা: aspect-ratio: <width> / <height>

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

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

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

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

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

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

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

উপসংহার

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