পবিত্র গ্রেইল লেআউট

এই ক্লাসিক হোলি গ্রেইল লেআউটের জন্য, একটি হেডার, ফুটার, বাম সাইডবার, ডান সাইডবার এবং প্রধান বিষয়বস্তু রয়েছে। এটি আগের লেআউটের মতো, কিন্তু এখন সাইডবার সহ!

কোডের একটি একক লাইন ব্যবহার করে এই সম্পূর্ণ গ্রিডটি লিখতে, grid-template বৈশিষ্ট্য ব্যবহার করুন। এটি আপনাকে একই সময়ে সারি এবং কলাম উভয় সেট করতে সক্ষম করে।

সম্পত্তি এবং মান জোড়া হল: grid-template: auto 1fr auto / auto 1fr auto . প্রথম এবং দ্বিতীয় স্থান-বিচ্ছিন্ন তালিকার মধ্যে স্ল্যাশ হল সারি এবং কলামের মধ্যে বিরতি।

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

শেষ উদাহরণের মতো, যেখানে হেডার এবং ফুটারে স্বয়ংক্রিয় আকারের বিষয়বস্তু ছিল, এখানে বাম এবং ডান সাইডবার স্বয়ংক্রিয়ভাবে তাদের বাচ্চাদের অন্তর্নিহিত আকারের উপর ভিত্তি করে মাপ করা হয়। তবে এবার এটি উল্লম্ব (উচ্চতা) এর পরিবর্তে অনুভূমিক আকার (প্রস্থ)।

এইচটিএমএল

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

সিএসএস

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}