grid-template-areas আপনাকে অঞ্চলগুলির নাম দিয়ে একটি গ্রিড ভিজ্যুয়ালি রাখতে দেয়, জটিল পৃষ্ঠা লেআউটগুলিকে পাঠযোগ্য এবং প্রতিক্রিয়াশীলভাবে পুনর্বিন্যাস করা সহজ করে তোলে।
{
: grid;
: fr;
: auto fr auto;
:
;
: ;
}
{ : header; }
{ : sidebar; }
{ : main; }
{ : footer; }
ASCII-আর্ট grid-template-areas হল লেআউট — আপনি এক নজরে কাঠামো দেখতে পারেন, এবং একটি নাম পুনরাবৃত্তি করা একটি অঞ্চলকে কোষ জুড়ে বিস্তৃত করে তোলে।
@media (max-width: 600px) {
.layout {
grid-template-columns: 1fr; /* single column */
grid-template-areas:
"header"
"main" /* main now ABOVE sidebar on mobile */
"sidebar"
"footer";
}
}
মোবাইলের জন্য সম্পূর্ণ লেআউট পরিবর্তন করতে, আপনি শুধু অঞ্চলের মানচিত্র পুনরায় লিখুন — HTML এবং grid-area নিয়োগ একই থাকে। এটি প্রতিটি উপাদানকে আলাদাভাবে পুনর্স্থাপন করার চেয়ে অনেক পরিষ্কার।
main রাখার জন্য অ্যাক্সেসযোগ্যতার জন্য ভাল, তবুও ভিজ্যুয়ালি পাশের বার প্রথম প্রদর্শন করা)।নামকৃত গ্রিড অঞ্চলগুলি পৃষ্ঠা-স্তরের লেআউটগুলি (শীর্ষ/পাশের বার/প্রধান/পাদদেশ) পাঠযোগ্য এবং তুচ্ছভাবে প্রতিক্রিয়াশীল উভয়ই করে তোলে — পুনর্গঠন একটি ASCII মানচিত্র সম্পাদনের বিষয় মাত্র, অবস্থানগুলি পুনরায় সংযোগ করা নয়।
এটি CSS যে সবচেয়ে স্পষ্ট, সবচেয়ে রক্ষণাবেক্ষণযোগ্য লেআউট কৌশলগুলি অফার করে তার মধ্যে একটি।