লেআউট

সিএসএস পডকাস্ট - 009: লেআউট

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

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

লেআউট: একটি সংক্ষিপ্ত ইতিহাস

ওয়েবের প্রারম্ভিক দিনগুলিতে, একটি সাধারণ নথির চেয়ে জটিল ডিজাইনগুলি <table> উপাদানগুলি দিয়ে তৈরি করা হয়েছিল। 90 এর দশকের শেষের দিকে ব্রাউজারদের দ্বারা CSS ব্যাপকভাবে গৃহীত হলে ভিজ্যুয়াল শৈলী থেকে এইচটিএমএল আলাদা করা সহজ হয়ে যায়। CSS ডেভেলপারদের জন্য দ্বার উন্মুক্ত করেছে যাতে HTML-কে স্পর্শ না করেই একটি ওয়েবসাইটের চেহারা এবং অনুভূতি সম্পূর্ণরূপে পরিবর্তন করতে সক্ষম হয়৷ এই নতুন সক্ষমতা সিএসএস জেন গার্ডেন- এর মতো প্রকল্পগুলিকে অনুপ্রাণিত করেছে, যা আরও বিকাশকারীদের এটি শিখতে উত্সাহিত করার জন্য CSS-এর শক্তি প্রদর্শন করার জন্য তৈরি করা হয়েছিল।

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

লেআউট: বর্তমান এবং ভবিষ্যত

আধুনিক CSS-এর অসাধারণ শক্তিশালী লেআউট টুলিং রয়েছে। লেআউটের জন্য আমাদের ডেডিকেটেড সিস্টেম রয়েছে এবং পরবর্তী মডিউলগুলিতে ফ্লেক্সবক্স এবং গ্রিডের আরও বিশদে খনন করার আগে আমাদের হাতে কী আছে তা আমরা উচ্চ-স্তরের দিকে নজর দেব।

display বৈশিষ্ট্য বোঝা

display বৈশিষ্ট্য দুটি জিনিস করে। এটি প্রথম জিনিসটি নির্ধারণ করে যে বাক্সটি এটি প্রয়োগ করা হয় তা ইনলাইন বা ব্লক হিসাবে কাজ করে।

.my-element {
  display: inline;
}

ইনলাইন উপাদান একটি বাক্যে শব্দের মত আচরণ করে। তারা ইনলাইন দিকে একে অপরের পাশে বসে। উপাদান যেমন <span> এবং <strong> , যা সাধারণত <p> (অনুচ্ছেদ) এর মতো উপাদানগুলির মধ্যে পাঠ্যের টুকরো স্টাইল করতে ব্যবহৃত হয়, ডিফল্টরূপে ইনলাইন থাকে। তারা আশেপাশের সাদা স্থানও সংরক্ষণ করে।

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

.my-element {
    display: block;
}

ব্লক উপাদান একে অপরের পাশাপাশি বসতে না. তারা নিজেদের জন্য একটি নতুন লাইন তৈরি করে। অন্যান্য CSS কোড দ্বারা পরিবর্তন না করা হলে, একটি ব্লক উপাদান ইনলাইন মাত্রার আকারে প্রসারিত হবে, তাই একটি অনুভূমিক লেখার মোডে সম্পূর্ণ প্রস্থ বিস্তৃত হবে। একটি ব্লক উপাদানের সব দিকের মার্জিনকে সম্মান করা হবে।

.my-element {
    display: flex;
}

display প্রপার্টিও নির্ধারণ করে যে একটি উপাদানের বাচ্চাদের কীভাবে আচরণ করা উচিত। উদাহরণস্বরূপ, display বৈশিষ্ট্য display: flex বাক্সটিকে একটি ব্লক-স্তরের বাক্সে পরিণত করে এবং এর বাচ্চাদের ফ্লেক্স আইটেমগুলিতে রূপান্তর করে। এটি ফ্লেক্স বৈশিষ্ট্যগুলিকে সক্ষম করে যা প্রান্তিককরণ, ক্রম এবং প্রবাহ নিয়ন্ত্রণ করে।

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

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

ফ্লেক্সবক্স

.my-element {
    display: flex;
}

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

আইটেম একই অক্ষে থাকবে এবং স্থান ফুরিয়ে গেলে মোড়ানো হবে না। পরিবর্তে তারা একে অপরের মতো একই লাইনে স্কোয়াশ করার চেষ্টা করবে। align-items , justify-content এবং flex-wrap বৈশিষ্ট্য ব্যবহার করে এই আচরণ পরিবর্তন করা যেতে পারে।

ফ্লেক্সবক্স শিশু উপাদানগুলিকে ফ্লেক্স আইটেম হিসাবে রূপান্তরিত করে, যার অর্থ আপনি একটি ফ্লেক্স পাত্রের ভিতরে কীভাবে আচরণ করে তার উপর নিয়ম লিখতে পারেন। আপনি একটি পৃথক আইটেমের প্রান্তিককরণ, ক্রম এবং ন্যায্যতা পরিবর্তন করতে পারেন। আপনি flex সম্পত্তি ব্যবহার করে এটি কীভাবে সঙ্কুচিত বা বৃদ্ধি পায় তাও পরিবর্তন করতে পারেন।

.my-element div {
    flex: 1 0 auto;
}

flex প্রপার্টি হল flex-grow , flex-shrink এবং flex-basis সংক্ষিপ্ত বিবরণ। আপনি এই মত উপরের উদাহরণ প্রসারিত করতে পারেন:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

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

গ্রিড

.my-element {
    display: grid;
}

ফ্লেক্সবক্সের সাথে গ্রিড অনেক উপায়ে একই রকম, তবে এটি একক-অক্ষ বিন্যাস (উল্লম্ব বা অনুভূমিক স্থান) এর পরিবর্তে বহু-অক্ষ বিন্যাস নিয়ন্ত্রণ করার জন্য ডিজাইন করা হয়েছে।

গ্রিড আপনাকে এমন একটি উপাদানের উপর লেআউট নিয়ম লিখতে সক্ষম করে যাতে display: grid , ​​এবং লেআউট স্টাইলের জন্য কয়েকটি নতুন আদিম প্রবর্তন করে, যেমন repeat() এবং minmax() ফাংশন। একটি দরকারী গ্রিড ইউনিট হল fr ইউনিট - যা অবশিষ্ট স্থানের একটি ভগ্নাংশ - আপনি 3টি CSS বৈশিষ্ট্য সহ প্রতিটি আইটেমের মধ্যে একটি ফাঁক রেখে ঐতিহ্যগত 12টি কলাম গ্রিড তৈরি করতে পারেন:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

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

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

grid-row এবং grid-column বৈশিষ্ট্যগুলি গ্রিডের প্রথম উপাদানটিকে চতুর্থ কলামের শুরুতে, প্রথম কলাম থেকে, তারপর প্রথম সারি থেকে তৃতীয় সারিতে স্প্যান করার নির্দেশ দেয়।

ফ্লো লেআউট

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

ইনলাইন ব্লক

মনে রাখবেন কিভাবে পার্শ্ববর্তী উপাদানগুলি একটি ইনলাইন উপাদানে ব্লক মার্জিন এবং প্যাডিংকে সম্মান করে না? inline-block দিয়ে আপনি এটি ঘটতে পারেন ।

p span {
    display: inline-block;
}

inline-block ব্যবহার করা আপনাকে একটি বাক্স দেয় যেটিতে একটি ব্লক-স্তরের উপাদানের কিছু বৈশিষ্ট্য রয়েছে, কিন্তু তবুও পাঠ্যের সাথে ইনলাইনে প্রবাহিত হয়।

p span {
    margin-top: 0.5rem;
}

ভাসছে

আপনার যদি এমন একটি চিত্র থাকে যা পাঠ্যের একটি অনুচ্ছেদের মধ্যে বসে থাকে, তাহলে কি সেই পাঠ্যটির পক্ষে সেই চিত্রটির চারপাশে মোড়ানো কি সুবিধাজনক হবে না যেমন আপনি একটি সংবাদপত্রে দেখতে পাচ্ছেন? আপনি floats সঙ্গে এটি করতে পারেন.

img {
    float: left;
    margin-right: 1em;
}

float প্রপার্টি একটি উপাদানকে নির্দেশিত নির্দেশে "ভাসতে" নির্দেশ করে। এই উদাহরণের চিত্রটিকে বাম দিকে ভাসতে নির্দেশ দেওয়া হয়েছে, যা তারপরে ভাইবোন উপাদানগুলিকে এটির চারপাশে "মোড়ানো" করতে দেয়৷ আপনি একটি উপাদানকে left , right বা inherit ভাসানোর নির্দেশ দিতে পারেন।

মাল্টিকলাম লেআউট

যদি আপনার কাছে উপাদানগুলির একটি সত্যিই দীর্ঘ তালিকা থাকে, যেমন বিশ্বের সমস্ত দেশের তালিকা, তাহলে এটি ব্যবহারকারীর জন্য প্রচুর স্ক্রলিং এবং সময় নষ্ট করতে পারে। এটি পৃষ্ঠায় অতিরিক্ত হোয়াইটস্পেসও তৈরি করতে পারে। CSS মাল্টিকলামের সাহায্যে, আপনি এই দুটি সমস্যায় সাহায্য করার জন্য এটিকে একাধিক কলামে বিভক্ত করতে পারেন।

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

এটি স্বয়ংক্রিয়ভাবে সেই দীর্ঘ তালিকাটিকে দুটি কলামে বিভক্ত করে এবং দুটি কলামের মধ্যে একটি ফাঁক যোগ করে।

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

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

পজিশনিং

লেআউট মেকানিজমের এই ওভারভিউতে শেষ হল পজিশনিং। নথির স্বাভাবিক প্রবাহে একটি উপাদান কীভাবে আচরণ করে এবং এটি অন্যান্য উপাদানের সাথে কীভাবে সম্পর্কযুক্ত তা position বৈশিষ্ট্য পরিবর্তন করে। উপলব্ধ বিকল্পগুলি relative , absolute , fixed এবং sticky এবং ডিফল্ট মান static ।

.my-element {
  position: relative;
  top: 10px;
}

এই উপাদানটিকে নথিতে এর বর্তমান অবস্থানের উপর ভিত্তি করে 10px নিচে নাজ করা হয়েছে, কারণ এটি নিজের সাথে সম্পর্কিত। position: relative এটিকে position: absolute । এর মানে হল যে এটির সন্তানকে এখন এই বিশেষ উপাদানে স্থানান্তরিত করা হবে, শীর্ষস্থানীয় আপেক্ষিক পিতামাতার পরিবর্তে, যখন এটিতে একটি পরম অবস্থান প্রয়োগ করা হবে।

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

আপনি যখন absolute position সেট করেন, তখন এটি বর্তমান নথির প্রবাহ থেকে উপাদানটিকে ভেঙে দেয়। এর অর্থ দুটি জিনিস:

1. আপনি এই উপাদানটিকে আপনার কাছের আপেক্ষিক প্যারেন্টে top , right , bottom এবং left ব্যবহার করে যেখানে খুশি অবস্থান করতে পারেন।
2. একটি পরম উপাদানের আশেপাশের সমস্ত বিষয়বস্তু সেই উপাদানটির অবশিষ্ট স্থান পূরণ করতে রিফ্লো হয়।

fixed position মান সহ একটি উপাদান absolute এর অনুরূপ আচরণ করে, যার মূল হল মূল <html> উপাদান। আপনার সেট করা top , right , bottom এবং left মানগুলির উপর ভিত্তি করে স্থির অবস্থানের উপাদানগুলি উপরের বাম থেকে নোঙ্গরযুক্ত থাকে।

আপনি sticky ব্যবহার করে relative এর নোঙ্গর করা, fixed স্থির দিক এবং আরও অনুমানযোগ্য নথির প্রবাহ-সম্মানজনক দিকগুলি অর্জন করতে পারেন। এই মানের সাথে, ভিউপোর্ট উপাদানটি অতিক্রম করার সাথে সাথে, এটি আপনার সেট করা top , right , bottom এবং left মানগুলিতে নোঙরযুক্ত থাকে৷

শেষ করি

CSS লেআউটের সাথে অনেক পছন্দ এবং নমনীয়তা রয়েছে। CSS ফ্লেক্সবক্স এবং গ্রিডের শক্তিতে আরও ডুব দিতে, পরবর্তী কয়েকটি মডিউলে চালিয়ে যান।

আপনার উপলব্ধি পরীক্ষা করুন

লেআউট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন