Pure.CSS এর ১২-কোলাম Grid System একটি সিম্পল এবং লাইটওয়েট গ্রিড সিস্টেম, যা ওয়েব ডিজাইনে রেসপন্সিভ এবং মোবাইল-ফার্স্ট ডিজাইন তৈরি করতে সহায়তা করে। এটি modular এবং খুবই হালকা, এবং আপনি খুব সহজে রেসপন্সিভ লেআউট তৈরি করতে পারবেন। Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করার জন্য আপনাকে মাত্র কিছু ক্লাস ব্যবহার করতে হবে, যা দ্রুত এবং কার্যকরী লেআউট তৈরি করতে সক্ষম।
Pure.CSS ১২-কোলাম Grid সিস্টেম:
Pure.CSS এর গ্রিড সিস্টেম ১২টি কলামে বিভক্ত, এবং এটি Flexbox ভিত্তিক, যার মাধ্যমে আপনি সহজে বিভিন্ন স্ক্রীন সাইজে ওয়েব পেজের কন্টেন্টকে সঠিকভাবে প্রদর্শন করতে পারবেন।
গ্রিড সিস্টেমের মূল ক্লাস:
- pure-g: এটি গ্রিড কনটেইনারের জন্য ক্লাস। এর মধ্যে আপনি আপনার গ্রিডের কলামগুলি রাখবেন।
- pure-u-1-12: এটি একটি কলামের জন্য ১২-ভাগের মধ্যে ১ ভাগ প্রস্থ। আপনি এই ক্লাসের মাধ্যমে বিভিন্ন সাইজের কলাম তৈরি করতে পারবেন।
- pure-u-1-2: এটি কলামের জন্য ১২ ভাগের মধ্যে ৬ ভাগ, অর্থাৎ ৫০% প্রস্থ নির্ধারণ করবে।
- pure-u-1-3: এটি কলামের জন্য ১২ ভাগের মধ্যে ৪ ভাগ, অর্থাৎ ৩৩.৩% প্রস্থ নির্ধারণ করবে।
Pure.CSS এর ১২-কোলাম গ্রিড সিস্টেমের উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Grid System</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.grid-container {
margin: 20px;
}
.grid-item {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="grid-container pure-g">
<!-- First Column (1/12 of the width) -->
<div class="pure-u-1-12 grid-item">1</div>
<!-- Second Column (2/12 or 1/6 of the width) -->
<div class="pure-u-1-6 grid-item">2</div>
<!-- Third Column (3/12 or 1/4 of the width) -->
<div class="pure-u-1-4 grid-item">3</div>
<!-- Fourth Column (4/12 or 1/3 of the width) -->
<div class="pure-u-1-3 grid-item">4</div>
<!-- Fifth Column (5/12 of the width) -->
<div class="pure-u-5-12 grid-item">5</div>
<!-- Sixth Column (1/2 of the width) -->
<div class="pure-u-1-2 grid-item">6</div>
<!-- Seventh Column (7/12 of the width) -->
<div class="pure-u-7-12 grid-item">7</div>
<!-- Eighth Column (12/12 or full width) -->
<div class="pure-u-1 grid-item">8</div>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-g: এই ক্লাসটি গ্রিড কনটেইনারের জন্য ব্যবহৃত হয়, যার মধ্যে সমস্ত কলাম থাকবে।
- pure-u-1-12: এটি কলামটির প্রস্থ নির্ধারণ করে, যেখানে ১-১২ ভাগের মধ্যে ১ ভাগ ব্যবহার করা হয়েছে।
- pure-u-1-6: এটি কলামটির প্রস্থ ১-১২ ভাগের মধ্যে ২ ভাগ বা ১/৬ প্রস্থ নির্ধারণ করে।
- pure-u-1-2: এটি কলামটির প্রস্থ ১-১২ ভাগের মধ্যে ৬ ভাগ বা ১/২ প্রস্থ নির্ধারণ করে।
রেসপন্সিভিটি:
Pure.CSS গ্রিড সিস্টেম স্বয়ংক্রিয়ভাবে রেসপন্সিভ, অর্থাৎ এটি বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করবে। উদাহরণস্বরূপ, ছোট স্ক্রীন বা মোবাইল ডিভাইসে এটি কলামগুলিকে ভেঙে একটি একক কলামে প্রদর্শন করবে। আপনি চাইলে ম্যানুয়ালি মিডিয়া কুয়েরি যোগ করে স্ক্রীন সাইজ অনুযায়ী গ্রিড সিস্টেম কাস্টমাইজও করতে পারেন।
একটি রেসপন্সিভ গ্রিড সিস্টেম উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Responsive Grid</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.grid-container {
margin: 20px;
}
.grid-item {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
border: 1px solid #ddd;
}
/* For mobile devices */
@media (max-width: 600px) {
.pure-u-1-2, .pure-u-1-3, .pure-u-1-4 {
width: 100% !important; /* Full width for mobile devices */
}
}
</style>
</head>
<body>
<div class="grid-container pure-g">
<div class="pure-u-1-2 grid-item">Column 1</div>
<div class="pure-u-1-2 grid-item">Column 2</div>
<div class="pure-u-1-3 grid-item">Column 3</div>
<div class="pure-u-1-3 grid-item">Column 4</div>
<div class="pure-u-1-3 grid-item">Column 5</div>
</div>
</body>
</html>
এখানে:
- বড় স্ক্রীনে, প্রথম দুটি কলাম 50% প্রস্থে প্রদর্শিত হবে এবং পরবর্তী তিনটি কলাম তৃতীয় অংশে প্রদর্শিত হবে।
- মোবাইল স্ক্রীনে, সমস্ত কলাম 100% প্রস্থে প্রদর্শিত হবে, যাতে প্রতিটি কলাম পুরো স্ক্রীন এলাকা পূর্ণ করে।
Pure.CSS এর ১২-কোলাম গ্রিড সিস্টেম খুবই সহজ এবং কার্যকরী, যা ওয়েব ডিজাইনার এবং ডেভেলপারদের জন্য একটি দ্রুত এবং রেসপন্সিভ লেআউট তৈরি করতে সহায়ক। এর ছোট আকার এবং মডুলার কাঠামো আপনাকে প্রজেক্টের সাইজ কমিয়ে দ্রুত কাজ করতে সাহায্য করে, এবং একই সঙ্গে বিভিন্ন স্ক্রীন সাইজে উপযুক্তভাবে কন্টেন্ট প্রদর্শন করে। Pure.CSS-এ গ্রিড সিস্টেম ব্যবহার করে আপনি দ্রুত এবং কার্যকরী ওয়েব ডিজাইন তৈরি করতে পারবেন।
