بطاقة طلب بحث الحاوية

يستخدم هذا العرض التوضيحي طلبات البحث في الحاوية لإنشاء بطاقة أساسية وسريعة الاستجابة. تنتقل البطاقة من تخطيط عمود واحد بأحجام أضيق إلى تخطيط من عمودين عندما تكون بأحجام أعرض.

لإنشاء الحاوية، اضبط الاحتواء أولاً على العنصر الرئيسي:

/* 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.

HTML

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

CSS

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