সাইডবার বলে

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

নিম্নলিখিত মান সহ grid-template-columns বৈশিষ্ট্য ব্যবহার করে এটি যোগ করুন: minmax(100px, 25%) 1fr । প্রথম কলামের আইটেমটি (এই ক্ষেত্রে সাইডবার) 25% এ 100px এর minmax পায়, এবং দ্বিতীয় আইটেমটি (এখানে main বিভাগটি) একটি একক 1fr ট্র্যাক হিসাবে বাকি জায়গা নেয়।

.parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}

<div class="parent">
    <div class="section yellow" contenteditable>
    Min: 100px / Max: 25%
    </div>
    <div class="section blue" contenteditable>
      This element takes the second grid position (1fr), meaning
      it takes up the rest of the remaining space.
    </div>
  </div>

        .parent {
  display: grid;
  grid-template-columns: minmax(100px, 25%) 1fr;
}