There is no item in the cart. If you want to buy, Please click here.
সিএসএস(CSS) টিউটোরিয়াল
. গ্রিড লেআউট
সিএসএস গ্রিড লেআউট মডিউলটি গ্রিড-ভিত্তিক লেআউট সিস্টেম সরবরাহ করে, সারি এবং কলামগুলি সহ, ফ্লোট এবং অবস্থান ব্যবহার না করে ওয়েব পৃষ্ঠাগুলি ডিজাইন করা সহজ করে তোলে।
গ্রিড উপাদানসমূহ
গ্রিড বিন্যাসে এক বা একাধিক শিশু উপাদান সহ একটি পিতামাত্ত্বিক উপাদান থাকে
উদাহরনঃ
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
প্রদর্শন সম্পত্তি
যখন তার প্রদর্শনের সম্পত্তিটি গ্রিড বা ইনলাইন-গ্রিডে সেট করা হয় তখন একটি HTML উপাদান একটি গ্রিড ধারক হয়
উদাহরনঃ
.grid-container {
display: grid;
}
গ্রিডের ধারক
এইচটিএমএল উপাদান গ্রিড ধারক হিসাবে আচরণ করতে, আপনাকে প্রদর্শন সম্পত্তিটি গ্রিড বা ইনলাইন-গ্রিডে সেট করতে হবে।
গ্রিডের পাত্রে গ্রিড আইটেমগুলি থাকে, কলাম এবং সারিগুলির ভিতরে রাখা হয়
গ্রিড-টেম্পলেট-কলামগুলির সম্পত্তি
গ্রিড-টেম্পলেট-কলামগুলির সম্পত্তি আপনার গ্রিড লেআউটে কলামগুলির সংখ্যা নির্ধারণ করে এবং এটি প্রতিটি কলামের প্রস্থ নির্ধারণ করতে পারে।
মান হ'ল একটি স্থান-বিচ্ছিন্ন-তালিকা, যেখানে প্রতিটি মান সংশ্লিষ্ট কলামের প্রস্থ নির্ধারণ করে।
যদি আপনি চান আপনার গ্রিড লেআউটে 4 টি কলাম থাকতে পারে তবে 4 টি কলামের প্রস্থ নির্দিষ্ট করুন বা সমস্ত কলামগুলির একই প্রস্থ থাকা উচিত "স্বতঃ" নির্দিষ্ট করুন।
উদাহরনঃ
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
একটি গ্রিড ধারক গ্রিড আইটেম রয়েছে।
ডিফল্টরূপে, একটি কন্টেইনারে প্রতিটি কলামে প্রতিটি কলামের জন্য একটি গ্রিড আইটেম থাকে তবে আপনি গ্রিড আইটেমগুলি স্টাইল করতে পারেন যাতে তারা একাধিক কলাম এবং / অথবা সারিগুলিকে বিস্তৃত করতে পারে।
উদাহরনঃ
.item1 {
grid-column: 1 / 5;
}
.item1 {
grid-column: 1 / span 3;
}
.item2 {
grid-column: 2 / span 3;
}
