Scheda delle query del container

Questa demo utilizza le query container per creare una scheda intrinseca e adattabile. La scheda passa da un layout a singola colonna con dimensioni più strette a uno a due colonne quando è più larghi.

Per creare il contenitore, imposta prima il contenitore sull'elemento padre:

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

Puoi impostare alcuni stili di base:

.desc {
  display: none;
}

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

Inoltre, aggiorna questi stili di base in base alla larghezza in linea del contenitore principale:

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

Questo significa che se lo stesso componente è presente in diverse parti dell'interfaccia utente, il componente può utilizzare la propria logica per ridimensionare e adattare al meglio il contenitore. Hai un migliore controllo sul layout della scheda rispetto a come faresti se avessi solo l'area visibile globale di cui fare affidamento. Di seguito viene illustrato ciò posizionando la scheda delle query del contenitore in una griglia con colonne di larghezza variabile:

Esplora questa demo su 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;
  }
}