ডিকনস্ট্রাক্ট প্যানকেকের বিপরীতে, পর্দার আকার পরিবর্তন হলে এই উদাহরণটি তার বাচ্চাদের আবৃত করে না। সাধারণত একটি স্টিকি ফুটার হিসাবে উল্লেখ করা হয়, এই লেআউটটি ওয়েবসাইট এবং অ্যাপ্লিকেশন উভয়ের জন্যই ব্যবহৃত হয়, মোবাইল অ্যাপ্লিকেশন জুড়ে (ফুটারটি সাধারণত একটি টুলবার), এবং ওয়েবসাইটগুলি - বিশেষ একক পৃষ্ঠার অ্যাপ্লিকেশনগুলিতে৷
display: grid
আপনাকে একটি একক কলাম গ্রিড দেবে, তবে মূল এলাকাটি শুধুমাত্র নীচের ফুটার সহ সামগ্রীর মতো লম্বা হবে।
পাদচরণটি নীচে আটকে রাখতে, যোগ করুন:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
এটি স্বয়ংক্রিয়ভাবে তাদের বাচ্চাদের আকার নিতে শিরোনাম এবং পাদচরণ বিষয়বস্তু সেট করে, এবং অবশিষ্ট স্থান ( 1fr
) প্রধান এলাকায় প্রয়োগ করে, যখন auto
আকারের সারিটি তার বাচ্চাদের ন্যূনতম সামগ্রীর আকার নেবে, যাতে সেই সামগ্রীটি আকার বৃদ্ধি, সারি নিজেই সামঞ্জস্য বৃদ্ধি হবে.