کارت پرس و جو کانتینر

این نسخه ی نمایشی از پرس و جوهای کانتینر برای ایجاد یک کارت ذاتی و پاسخگو استفاده می کند. کارت از طرح تک ستونی در اندازه‌های باریک‌تر به طرح‌بندی دو ستونی در اندازه‌های گسترده‌تر تبدیل می‌شود.

برای ایجاد کانتینر، ابتدا محتویات را روی والد تنظیم کنید:

/* 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;
  }
}

این بدان معناست که اگر دقیقاً این مؤلفه را در قسمت‌های مختلف رابط کاربری خود داشته باشید، می‌تواند از منطق خود برای تغییر اندازه و بهترین تناسب با ظرف خود استفاده کند. شما کنترل بهتری روی طرح کارت نسبت به زمانی که فقط نمای کلی برای تکیه داشتید دارید. موارد زیر این موضوع را با قرار دادن کارت پرس و جو ظرف در یک شبکه با عرض ستون های مختلف نشان می دهد:

این نسخه آزمایشی را در Codepen کاوش کنید

<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;
  }
}