Pure.CSS এর Nested Grids এবং Offset এর মাধ্যমে আপনি সহজেই একটি রেসপন্সিভ এবং ফ্লেক্সিবল লেআউট তৈরি করতে পারেন। Grid System Pure.CSS-এ একটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে কলাম ভিত্তিক লেআউট ডিজাইন করতে সাহায্য করে। এই সিস্টেমে আপনি pure-g (গ্রিড কন্টেইনার) এবং pure-u-1-x (গ্রিড আইটেমের জন্য কলাম সাইজ) ক্লাস ব্যবহার করে লেআউট তৈরি করতে পারেন।
এখানে Nested Grids এবং Offset ব্যবহার করার বিস্তারিত উদাহরণ দেওয়া হলো।
1. Nested Grids in Pure.CSS
Nested Grids ব্যবহারের মাধ্যমে আপনি একাধিক গ্রিড কন্টেইনার তৈরি করতে পারেন যা অন্য গ্রিডের ভিতরে থাকে। এটি একটি কলাম ভিত্তিক লেআউট তৈরি করার জন্য ব্যবহৃত হয় যেখানে একাধিক স্তরের গ্রিড থাকতে পারে।
Example: Nested Grids
<div class="pure-g">
<!-- First Level Grid -->
<div class="pure-u-1-2">
<h3>Column 1 - First Level</h3>
<div class="pure-g">
<!-- Nested Grid Inside Column 1 -->
<div class="pure-u-1-2">
<p>Nested Column 1 - Second Level</p>
</div>
<div class="pure-u-1-2">
<p>Nested Column 2 - Second Level</p>
</div>
</div>
</div>
<div class="pure-u-1-2">
<h3>Column 2 - First Level</h3>
<p>This is the second-level content of column 2</p>
</div>
</div>
ব্যাখ্যা:
- প্রথম স্তরের গ্রিড কন্টেইনার
pure-gক্লাসের মাধ্যমে তৈরি হয়েছে, এবং তার মধ্যে দুটি কলাম রয়েছে (প্রতিটি কলামের সাইজpure-u-1-2, অর্থাৎ ৫০% প্রস্থ)। - প্রথম কলামের মধ্যে একটি nested grid তৈরি করা হয়েছে, যেখানে দুইটি সাব-কলাম রয়েছে। এটি
pure-gক্লাসের মাধ্যমে তৈরি এবং তার মধ্যেpure-u-1-2ব্যবহার করা হয়েছে, যাতে প্রতিটি কলাম ৫০% প্রস্থ নেয়।
ফলস্বরূপ:
- প্রথম স্তরের গ্রিড দুটি কলাম থাকবে, এবং প্রথম কলামের ভিতরে একটি সাব-গ্রিড থাকবে যা দুটি কলামে বিভক্ত হবে। এটি একটি Nested Grid লেআউট তৈরি করবে।
2. Offset in Pure.CSS
Offset এর মাধ্যমে আপনি একটি গ্রিড আইটেমকে একটি নির্দিষ্ট দিক থেকে সরিয়ে নিয়ে আসতে পারেন, যা গ্রিড সিস্টেমের মধ্যে ফাঁকা স্থান তৈরি করতে ব্যবহৃত হয়। Pure.CSS-এ pure-u-offset-x ক্লাস ব্যবহার করে আপনি একটি নির্দিষ্ট সংখ্যক কলাম সরাতে পারেন।
Example: Using Offset
<div class="pure-g">
<div class="pure-u-1-3">
<p>Column 1 - 1/3 width</p>
</div>
<div class="pure-u-1-3 pure-u-offset-1-3">
<p>Column 2 - 1/3 width with offset</p>
</div>
<div class="pure-u-1-3">
<p>Column 3 - 1/3 width</p>
</div>
</div>
ব্যাখ্যা:
- প্রথম কলাম
pure-u-1-3ক্লাসের মাধ্যমে ১/৩ অংশ জায়গা নিয়েছে। - দ্বিতীয় কলামেও
pure-u-1-3ক্লাস রয়েছে, তবে এটিতেpure-u-offset-1-3ক্লাস যোগ করা হয়েছে, যা কলামটিকে ১/৩ অংশ ডান দিকে সরিয়ে দিয়েছে। এর ফলে দ্বিতীয় কলামটি বাকি কলামগুলির থেকে ১/৩ জায়গা ফাঁকা রেখে চলে যাবে।
ফলস্বরূপ:
- দ্বিতীয় কলামটি প্রথম কলাম থেকে ১/৩ অংশ সরানো হয়েছে এবং ৩টি কলাম একটি নিখুঁত সমানভাবে বিভক্ত হয়ে যায়, যেখানে দ্বিতীয় কলামটি বাকি কলামগুলির সাথে সমন্বিত হতে থাকে, তবে এর জন্য এক্সট্রা অফসেট থাকবে।
3. Combination of Nested Grids and Offset
আপনি Nested Grids এবং Offset একত্রিত করে আরও জটিল এবং সুন্দর লেআউট তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে প্রথম স্তরের গ্রিডে একটি নেস্টেড গ্রিড রয়েছে এবং দ্বিতীয় স্তরের গ্রিডে offset ব্যবহার করা হয়েছে।
Example: Nested Grids with Offset
<div class="pure-g">
<div class="pure-u-1-2">
<h3>Column 1 - First Level</h3>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-offset-1-2">
<p>Nested Column 1 - Second Level with Offset</p>
</div>
</div>
</div>
<div class="pure-u-1-2">
<h3>Column 2 - First Level</h3>
<p>This is the second-level content of column 2</p>
</div>
</div>
ব্যাখ্যা:
- এখানে প্রথম স্তরের গ্রিডে
pure-u-1-2ক্লাস দিয়ে দুটি কলাম তৈরি করা হয়েছে। - প্রথম কলামের মধ্যে একটি Nested Grid রয়েছে, এবং দ্বিতীয় কলামে
pure-u-offset-1-2ক্লাস ব্যবহার করা হয়েছে, যাতে এটি প্রথম কলামটির থেকে ৫০% ডানে চলে যায়।
ফলস্বরূপ:
- দ্বিতীয় কলামটি প্রথম কলামের সাথে সমান্তরাল হতে থাকলেও, প্রথম কলামের ভিতরের নেস্টেড গ্রিডটিকে ৫০% সরানো হবে।
Pure.CSS এর Nested Grids এবং Offset সিস্টেম দিয়ে আপনি খুবই সহজে এবং কার্যকরভাবে ওয়েব পেজের লেআউট তৈরি করতে পারেন। Nested Grids ব্যবহারের মাধ্যমে আপনি একাধিক স্তরের গ্রিড তৈরি করতে পারেন, যা আরও জটিল লেআউট তৈরি করতে সহায়তা করে। এছাড়া Offset এর মাধ্যমে আপনি গ্রিড আইটেমগুলির মধ্যে ফাঁকা স্থান তৈরি করতে পারেন এবং তাদের স্থান পরিবর্তন করতে পারেন।
এই দুটি বৈশিষ্ট্য আপনাকে আরও ফ্লেক্সিবল এবং রেসপন্সিভ ওয়েব লেআউট ডিজাইন করতে সাহায্য করবে, যা বিভিন্ন স্ক্রীন সাইজে সুন্দরভাবে কাজ করবে।
Read more
