Delete
Setting
Add New Item
Menu List
Title | Content Type | Order | Action | ||||||
---|---|---|---|---|---|---|---|---|---|
{{kb_content.name}} {{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
{{kb_content.name}} | {{setValue(content_types, kb_content.content_type)}} | {{kb_content.sort_order}} | Preview Edit Edit Content | ||||||
No record |
css-Grid
সিএসএস একটি সহজ এবং সহজ উপায়ে ওয়েব ডকুমেন্টের স্টাইল নিয়ন্ত্রণ করতে ব্যবহৃত হয়। সিএসএস হ'ল "ক্যাসকেডিং স্টাইল শীট" এর সংক্ষিপ্ত রূপ। এই টিউটোরিয়ালটি সিএসএস 1, সিএসএস 2 এবং সিএসএস 3 উভয় সংস্করণকে কভার করে এবং সিএসএসের সম্পূর্ণ ধারণা দেয়, এটির প্রাথমিক থেকে শুরু করে উন্নত ধারণাগুলি পর্যন্ত
. গ্রিড লেআউট
সিএসএস গ্রিড লেআউট মডিউলটি গ্রিড-ভিত্তিক লেআউট সিস্টেম সরবরাহ করে, সারি এবং কলামগুলি সহ, ফ্লোট এবং অবস্থান ব্যবহার না করে ওয়েব পৃষ্ঠাগুলি ডিজাইন করা সহজ করে তোলে।
গ্রিড উপাদানসমূহ
গ্রিড বিন্যাসে এক বা একাধিক শিশু উপাদান সহ একটি পিতামাত্ত্বিক উপাদান থাকে
উদাহরনঃ
<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;
}
Child Elements (Items)
একটি গ্রিড ধারক গ্রিড আইটেম রয়েছে।
ডিফল্টরূপে, একটি কন্টেইনারে প্রতিটি কলামে প্রতিটি কলামের জন্য একটি গ্রিড আইটেম থাকে তবে আপনি গ্রিড আইটেমগুলি স্টাইল করতে পারেন যাতে তারা একাধিক কলাম এবং / অথবা সারিগুলিকে বিস্তৃত করতে পারে।
উদাহরনঃ
.item1 {
grid-column: 1 / 5;
}
.item1 {
grid-column: 1 / span 3;
}
.item2 {
grid-column: 2 / span 3;
}