কন্টেইনার ক্যোয়ারী কার্ড

এই ডেমো একটি অন্তর্নিহিত, প্রতিক্রিয়াশীল কার্ড তৈরি করতে ধারক প্রশ্ন ব্যবহার করে। কার্ডটি আরও সংকীর্ণ আকারে একটি একক-কলামের বিন্যাস থেকে একটি দ্বি-কলাম বিন্যাসে যায় যখন এটি বিস্তৃত আকারে থাকে।

ধারক তৈরি করতে, প্রথমে অভিভাবকের উপর কন্টেনমেন্ট সেট করুন:

/* Set containment on parent */
.container {
  container-name: myContainer;
  container-type: inline-size;
  /* You can also use the shorthand property `container: myContainer / inline-size`.
}

আপনি কিছু বেস শৈলী সেট করতে পারেন:

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

এবং সেই মূল ধারকটির ইনলাইন প্রস্থ অনুসারে সেই বেস শৈলীগুলি আপডেট করুন:

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

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

কোডপেনে এই ডেমোটি দেখুন

<div class="container">
  <div class="card">
    <div class="visual"></div>
    <div>
      <div class="meta">
        <h1>Card Title Here</h1>
        <h2 class="time">Subtitle</h2>
      </div>
        <p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
      <button>I'm a button</button>
    </div>
  </div>
</div>

        /* Set containment on parent */
.container {
  container: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* Base Styles */
.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

/* Responsive styles */

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}