আসল CSS Grid-এর সেলগুলোর উপর টেনে (drag করে) আইটেম বসান — শুরু করতে টাইপ করা লাইন নম্বরের দরকার নেই। ট্র্যাক যোগ করুন, fr/px/auto/minmax মিশিয়ে ব্যবহার করুন, আর দেখুন আপনার আঁকা লেআউট থেকে grid-template-areas নিজে থেকেই তৈরি হচ্ছে।
display ও visibility পাঠ পড়ুনপ্রতিটি ট্র্যাক একটি কলাম (বা সারি)-এর মাপ। fr অনুপাত অনুযায়ী বাকি জায়গা ভাগ করে; px একটি স্থির মাপ; auto কনটেন্ট অনুযায়ী মাপ নেয়; minmax(150px, 1fr) তার সর্বনিম্ন মাপের নিচে কখনো যায় না।
প্রতিটি ট্র্যাক একটি কলাম (বা সারি)-এর মাপ। fr অনুপাত অনুযায়ী বাকি জায়গা ভাগ করে; px একটি স্থির মাপ; auto কনটেন্ট অনুযায়ী মাপ নেয়; minmax(150px, 1fr) তার সর্বনিম্ন মাপের নিচে কখনো যায় না।
আইটেম তার নিজের সেলের চেয়ে সরু হলে, row অক্ষ বরাবর সেলের ভেতরে তার অবস্থান কেমন হবে।
আইটেম তার নিজের সেলের চেয়ে খাটো হলে, column অক্ষ বরাবর সেলের ভেতরে তার অবস্থান কেমন হবে।
সব ট্র্যাক মিলিয়ে কন্টেইনারের প্রস্থের চেয়ে কম হলে, পুরো ট্র্যাক-গ্রিডটি কন্টেইনারের ভেতরে কোথায় বসবে।
সব ট্র্যাক মিলিয়ে কন্টেইনারের উচ্চতার চেয়ে কম হলে, পুরো ট্র্যাক-গ্রিডটি কন্টেইনারের ভেতরে কোথায় বসবে।
খালি সেলের উপর ক্লিক করে টানুন, তারপর ছেড়ে দিলে সেখানে একটি আইটেম বসবে।
অবস্থান (গ্রিড লাইন, 1 থেকে শুরু)
grid-template-areas:
"header header header"
"main main aside";.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 16px;
}
.header {
grid-column: 1 / 4;
grid-row: 1 / 2;
}
.main {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
.aside {
grid-column: 3 / 4;
grid-row: 2 / 3;
}