Pure.CSS এর Responsive Grid System এবং Column Creation আপনাকে সহজেই রেসপন্সিভ ওয়েব লেআউট ডিজাইন করতে সাহায্য করে। Pure.CSS এর গ্রিড সিস্টেমের মাধ্যমে আপনি একটি ফ্লেক্সিবল এবং রেসপন্সিভ লেআউট তৈরি করতে পারবেন যা বিভিন্ন স্ক্রীন সাইজে ভালভাবে কাজ করবে। এখানে Pure.CSS এর গ্রিড সিস্টেম এবং কলাম তৈরি করার বিস্তারিত আলোচনা করা হলো।
Pure.CSS Responsive Grid System
Pure.CSS-এ Grid System একটি ফ্লেক্সিবল এবং সিম্পল সিস্টেম যা আপনাকে ১২ কলামের লেআউট তৈরি করতে সাহায্য করে। আপনি এই গ্রিড সিস্টেমটি ব্যবহার করে রেসপন্সিভ ওয়েব পেজ তৈরি করতে পারেন, যেটি বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে অ্যাডজাস্ট হবে। গ্রিড সিস্টেমের সিঙ্ক্রোনাইজেশন খুব সহজ এবং আপনি প্রয়োজন অনুসারে কলামগুলিকে বিভক্ত করতে পারেন।
1. Basic Grid Structure
Pure.CSS-এ Grid System তৈরি করতে হলে, আপনি .pure-g ক্লাস ব্যবহার করবেন, এবং কলামের জন্য .pure-u-{size} ক্লাস ব্যবহার করতে হবে।
এটি ১২ কলামের গ্রিড সিস্টেম অনুসরণ করে, যেখানে .pure-u-1-12 একটি কলাম, .pure-u-2-12 দুটি কলাম ইত্যাদি নির্দেশ করে।
Basic Grid Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Grid System</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Column 1 (50% width)</p>
</div>
<div class="pure-u-1-2">
<p>Column 2 (50% width)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-g: এই ক্লাসটি গ্রিড সিস্টেমের জন্য ব্যবহৃত হয়।.pure-u-1-2: এটি কলামকে ৫০% প্রস্থ দেয়, অর্থাৎ দুইটি কলামকে সমান আকারে ভাগ করবে।
2. Responsive Grid System
Pure.CSS এর গ্রিড সিস্টেম রেসপন্সিভ এবং অ্যাডজাস্টেবল। এটি বিভিন্ন স্ক্রীন সাইজে স্বয়ংক্রিয়ভাবে লেআউট পরিবর্তন করতে সাহায্য করে। আপনি .pure-u-* ক্লাসের মাধ্যমে বিভিন্ন প্রস্থের জন্য কলাম তৈরি করতে পারেন এবং প্রতিটি স্ক্রীনে কলামগুলির রূপান্তর করতে পারেন।
Responsive Grid Example (Different Column Sizes for Different Screen Widths):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Responsive Grid Example</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 1 (100% width on small, 50% on medium, 25% on large)</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 2 (100% width on small, 50% on medium, 25% on large)</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 3 (100% width on small, 50% on medium, 25% on large)</p>
</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<p>Column 4 (100% width on small, 50% on medium, 25% on large)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-u-1: ছোট স্ক্রীনে (প্রথমে মোবাইল ভিউ) এটি পূর্ণ প্রস্থ (100%) কলাম প্রদান করবে।.pure-u-md-1-2: মিডিয়াম স্ক্রীনে এটি ৫০% প্রস্থ কলাম প্রদান করবে।.pure-u-lg-1-4: বড় স্ক্রীনে এটি ২৫% প্রস্থ কলাম প্রদান করবে।- এটি রেসপন্সিভ গ্রিড সিস্টেমের একটি উদাহরণ, যেখানে আপনার কলামগুলো স্ক্রীনের আকার অনুযায়ী আউটপুট হবে।
3. Nested Grids (Nested Columns)
Pure.CSS এর গ্রিড সিস্টেমে আপনি নেস্টেড গ্রিড তৈরি করতে পারেন, অর্থাৎ এক কলামের ভিতরে আরেকটি গ্রিড তৈরি করা সম্ভব।
Nested Grid Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Nested Grid</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Column 1 (50% width)</p>
<div class="pure-g">
<div class="pure-u-1-2">
<p>Nested Column 1 (50% width)</p>
</div>
<div class="pure-u-1-2">
<p>Nested Column 2 (50% width)</p>
</div>
</div>
</div>
<div class="pure-u-1-2">
<p>Column 2 (50% width)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- এখানে প্রথম কলামে nested grid তৈরি করা হয়েছে, যাতে দুটি ছোট কলাম রয়েছে।
- প্রতিটি নেস্টেড কলামের জন্য
.pure-u-1-2ক্লাস ব্যবহার করা হয়েছে, যাতে এটি ৫০% প্রস্থ নেয়।
4. Column Offsets
Pure.CSS গ্রিড সিস্টেমে আপনি offsets ব্যবহার করতে পারেন, যার মাধ্যমে আপনি কলামকে শিফট করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি লেআউটে কিছু স্পেস বা গ্যাপ তৈরি করতে চান।
Column Offset Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<title>Pure.CSS Column Offset</title>
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-4">
<p>Column 1 (25% width)</p>
</div>
<div class="pure-u-1-2 pure-u-md-1-4">
<p>Column 2 (offset by 25%)</p>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
.pure-u-1-4প্রথম কলামটির জন্য ২৫% প্রস্থ।.pure-u-1-2দ্বিতীয় কলামটির জন্য ৫০% প্রস্থ, এবং.pure-u-md-1-4এটি ২৫% প্রস্থ হয়ে যাবে।
5. Grid Class for Containers
Pure.CSS গ্রিড সিস্টেমের জন্য আপনি containers ব্যবহার করতে পারেন, যাতে আপনি আপনার গ্রিড সিস্টেমের প্রতিটি অংশ কাস্টমাইজ করতে পারেন। .pure-g ক্লাস ব্যবহারের মাধ্যমে পুরো গ্রিডকে রেন্ডার করা হয় এবং .pure-u-{size} ব্যবহার করে কলাম তৈরি হয়।
Pure.CSS এর Responsive Grid System এবং Column Creation খুবই সহজ এবং ব্যবহারকারী-বান্ধব। এর মাধ্যমে আপনি দ্রুত এবং কার্যকরী ওয়েব লেআউট তৈরি করতে পারেন। গ্রিড সিস্টেমের মাধ্যমে আপনি কাস্টম সাইজের কলাম তৈরি করতে পারেন, এবং রেসপন্সিভ ডিজাইন তৈরি করতে পারলে ওয়েবসাইটটি সব ধরনের ডিভাইসে সুন্দরভাবে কাজ করবে। Nested grids, offsets, এবং responsive columns সহ গ্রিড সিস্টেমের সব সুবিধা ব্যবহার করে আপনি খুবই প্রফেশনাল লেআউট তৈরি করতে পারবেন।
Read more
