Kartu kueri penampung

Demo ini menggunakan kueri penampung untuk membuat kartu intrinsik yang responsif. Kartu berubah dari tata letak kolom tunggal pada ukuran yang lebih sempit menjadi tata letak dua kolom jika memiliki ukuran yang lebih lebar.

Untuk membuat penampung, pertama-tama tetapkan containment pada induk:

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

Anda dapat menetapkan beberapa gaya dasar:

.desc {
  display: none;
}

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

Dan perbarui gaya dasar tersebut sesuai dengan lebar inline penampung induk tersebut:

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

Artinya, jika Anda memiliki komponen yang sama persis di berbagai bagian UI, komponen tersebut dapat menggunakan logikanya sendiri untuk mengubah ukuran dan paling sesuai dengan container-nya. Anda memiliki kontrol yang lebih baik atas tata letak kartu daripada jika hanya menggunakan area pandang global untuk diandalkan. Hal berikut mengilustrasikan hal ini dengan menempatkan kartu kueri container dalam petak dengan lebar kolom yang bervariasi:

Pelajari Demo di Codepen ini

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