CSS গ্রিড আইটেম
- পূর্ববর্তী পৃষ্ঠা CSS গ্রিড কনটেনার
- পরবর্তী পৃষ্ঠা CSS ইনস্ট্যান্স
সাব-এলিমেন্ট (প্রকল্প)
গ্রিড কনটেনারটি গ্রিড প্রকল্প ধারণ করে
ডিফল্টভাবে, কোনও কনটেনারটির প্রত্যেক পদক্ষেপের প্রত্যেক কলামে একটি গ্রিড প্রকল্প থাকে, কিন্তু আপনি গ্রিড প্রকল্পের শৈলী নির্ধারণ করতে পারেন যাতে তারা বহুস্তম্ভ এবং/অথবা বহুপদক্ষেপে বিস্তৃত হতে পারে
গ্রিড-কলাম প্রক্রিয়াটি:
গ্রিড-কলাম প্রক্রিয়াটি নির্ধারণ করে যে, প্রকল্পটি কোনও কলামে স্থাপন করা হবে。
প্রতীকটি প্রক্রিয়াকে কোন সারিতে স্থাপন করবে তা নির্ধারণ করে。
মন্তব্য:গ্রিড-কলাম গ্রিড-কলাম-স্টার্ট এবং গ্রিড-কলাম-এন্ড প্রক্রিয়ার সংক্ষিপ্ত প্রক্রিয়া
কোনও প্রকল্প স্থাপন করার জন্য, আপনি লাইন নম্বর (line numbers) উল্লেখ করতে পারেন বা "span" শব্দটি ব্যবহার করে এই প্রকল্পটি কতটি স্তম্ভে বিস্তৃত হবে তা নির্ধারণ করতে পারেন。
ইনস্ট্যান্স
使 "item1" 从第 1 列开始并在第 5 列之前结束：
.item1 {
আমারএলা থেকে 1 সারি শুরু করে 5 সারির আগে শেষ হয়:
}
ইনস্ট্যান্স
grid-column: 1 / 5;
.item1 {
আমারএলা থেকে 1 সারি শুরু করে 3 সারি বিস্তৃত হয়:
}
ইনস্ট্যান্স
grid-column: 1 / span 3;
আমারএলা থেকে 2 সারি শুরু করে 3 সারি বিস্তৃত হয়:
.item2 {
}
grid-column: 2 / span 3;
16 grid-row প্রতীক:
প্রতীকটি প্রক্রিয়াকে কোন সারিতে স্থাপন করবে তা নির্ধারণ করে。
মন্তব্য:16 grid-row
প্রতীকটি গ্রিড-রো-স্টার্ট এবং গ্রিড-রো-এন্ড প্রতীকগুলির সংক্ষিপ্ত প্রতীক
ইনস্ট্যান্স
প্রক্রিয়া স্থাপনের জন্য আপনি সারি সংখ্যা উল্লেখ করতে পারেন বা 'span' শব্দ ব্যবহার করে এই প্রক্রিয়াকে কত সারি বিস্তৃত হবে তা নির্ধারণ করতে পারেন:
.item1 {
আমারএলা থেকে row-line 1 শুরু করে row-line 4-এ শেষ হয়:
}
ইনস্ট্যান্স
grid-row: 1 / 4;
.item1 {
আমারএলা থেকে 1 সারি শুরু করে 2 সারি বিস্তৃত হয়:
}
grid-row: 1 / span 2;
নামকৃত গ্রিড প্রক্রিয়া grid-area প্রতীক
ইনস্ট্যান্স
15
আমারএলা থেকে row-line 2 এবং column-line থেকে শুরু করে 2 সারি এবং 3 সাটা বিস্তৃত হয়: আমারএলা থেকে row-line 1 এবং column-line 2 থেকে শুরু করে row-line 5 এবং column line 6-এ শেষ হয়: }
ইনস্ট্যান্স
grid-area: 1 / 2 / 5 / 6;
আমারএলা থেকে row-line 2 এবং column-line থেকে শুরু করে 2 সারি এবং 3 সাটা বিস্তৃত হয়:
.item8 {
}
grid-area: 2 / 1 / span 2 / span 3;
নামকৃত গ্রিড প্রক্রিয়া grid-area
গ্রিড কন্টেনারের grid-template-areas প্রতীক নামকৃত গ্রিড প্রক্রিয়াকে উল্লেখ করার জন্য প্রয়োগ করা হয়。
ইনস্ট্যান্স
item1 এর নাম 'আমারএলা' এবং পাঁচটি সাটানো গ্রিড লেআউটের সকল পাঁচটি সাটানোতে বিস্তৃত হয়:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'আমারএলা আমারএলা আমারএলা আমারএলা আমারএলা';
}
প্রত্যেক সারি গোলা চুপচুপের দ্বারা নির্ধারিত হয়।
প্রত্যেক সারিতের কলা গোলা চুপচুপের মধ্যে নির্ধারিত হয়, এবং স্পেস দ্বারা বিভক্ত হয়。
মন্তব্য:গোলা নামকরণ হয়নি গ্রিড আইটেমের জন্য।
ইনস্ট্যান্স
যদি 'myArea' পাঁচটি গ্রিড লেআউটের দুই কলা পার্শ্ববর্তী করতে হয়, তবে (গোলা দ্বারা নামকরণ হয়নি):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
যদি দুই সারি নির্ধারণ করতে হয়, তবে আরেকটি গোলা চুপচুপের মধ্যে দ্বিতীয় সারির কলা নির্ধারণ করুন:
ইনস্ট্যান্স
যদি 'item1' দুই কলানোটি এবং দুই সারি পার্শ্ববর্তী করতে হয়, তবে:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
ইনস্ট্যান্স
সমস্ত আইটেমকে নামকরণ করুন এবং একটি সর্বদা ব্যবহার্য ওয়েবসাইট টেমপ্লেট তৈরি করুন:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
আইটেমের ক্রম
গ্রিড লেআউট আমাদেরকে প্রযুক্তি কোনো অবস্থানে আইটেম স্থাপন করতে দেয়。
HTML কোডের প্রথম আইটেমটি গ্রিডের প্রথম আইটেম হিসাবে প্রদর্শিত হতে হবে না。
ইনস্ট্যান্স
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
আপনি মিডিয়া কোয়াইয়ার ব্যবহার করে কিছু স্ক্রিন আকারের ক্রমবিন্যাস পুনর্গঠন করতে পারেন:
ইনস্ট্যান্স
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
- পূর্ববর্তী পৃষ্ঠা CSS গ্রিড কনটেনার
- পরবর্তী পৃষ্ঠা CSS ইনস্ট্যান্স
