CSS গ্রিড কনটেনার
- পূর্ববর্তী পৃষ্ঠা CSS গ্রিড লেজার মডিউল
- পরবর্তী পৃষ্ঠা CSS গ্রিড ইটেম
গ্রিড কনটেইনার
যদি আপনি চান যে HTML ইলেকট্রনিকটিকে গ্রিড কনটেইনার হিসাবে ব্যবহার করা হোক, তবে আপনাকে display এই অ্যাট্রিবিউটটি grid বা inline-grid হিসাবে নির্ধারণ করা হয়。
গ্রিড কনটেইনারটি কলাম এবং সারিতে অবস্থিত গ্রিড আইটেমদ্বারা নির্মিত হয়。
grid-template-columns অ্যাট্রিবিউট
grid-template-columns এই অ্যাট্রিবিউটটি গ্রিড লেআউটের সারিসংখ্যক নির্দেশ করে এবং প্রত্যেক সারির প্রস্থ নির্দেশ করতেও পারে。
এই মানগুলো স্পেস দিয়ে আলাদা হওয়া তালিকা, যেখানে প্রত্যেকটি মান সম্প্রতিক সারিতের প্রস্থকে নির্দেশ করে。
যদি আপনি চান যে গ্রিড লেআউটটি 4 সারি ধারণ করুক, তবে এই 4 সারির প্রস্থ নির্ধারণ করুন; যদি সকল সারির প্রস্থ একই হওয়ার দরকার, তবে "auto" হিসাবে নির্ধারণ করুন。
ইনস্ট্যান্স
চারটি সারির গ্রিড তৈরি করুন:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
নোট:যদি 4 সারির গ্রিডে 4 টিরও বেশি আইটেম থাকে, তবে গ্রিডটি স্বয়ংক্রিয়ভাবে নতুন সারি যোগ করে এই আইটেমগুলোকে সেখানে রাখে。
grid-template-columns এই অ্যাট্রিবিউটটি সারির মাপ (প্রস্থ) নির্দেশ করতেও ব্যবহৃত হয়。
ইনস্ট্যান্স
এই 4 সারির মাপ নির্ধারণ করুন:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
grid-template-rows অ্যাট্রিবিউট
grid-template-rows এই অ্যাট্রিবিউটটি প্রত্যেক সারিতের উচ্চতা নির্দেশ করে。
এই মানগুলো স্পেস দিয়ে আলাদা হওয়া তালিকা, যেখানে প্রত্যেকটি মান সম্প্রতিক সারিতের উচ্চতা নির্দেশ করে:
ইনস্ট্যান্স
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
justify-content অ্যাট্রিবিউট
justify-content এই অ্যাট্রিবিউটটি কোন্টেইনারের ভিতরে সমগ্র গ্রিডকে সামান্যতা রাখতে ব্যবহৃত হয়。
নোট:গ্রিডের মোট প্রস্থবিশিষ্ট কোন্টেইনারের প্রস্থ থেকে কম হতে হবে, তাইহত justify-content অ্যাট্রিবিউট কার্যকর হবে。
ইনস্ট্যান্স
.grid-container {
display: grid;
justify-content: space-evenly;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
justify-content: space-around;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
justify-content: space-between;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
justify-content: center;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
justify-content: start;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
justify-content: end;
}
align-content অ্যাট্রিবিউট
align-content এট্রিবিউট গ্রিডের সমগ্র কনটেনারকে উপরোক্ত অবস্থানে সাজায়
নোট:গ্রিডের মোট উচ্চতা কনটেনারের উচ্চতার কম হতে হবে, যাতে align-content এট্রিবিউট কার্যকর হয়
ইনস্ট্যান্স
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
ইনস্ট্যান্স
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
- পূর্ববর্তী পৃষ্ঠা CSS গ্রিড লেজার মডিউল
- পরবর্তী পৃষ্ঠা CSS গ্রিড ইটেম
