Container-Abfragekarte

In dieser Demo werden Containerabfragen verwendet, um eine systeminterne, responsive Karte zu erstellen. Die Karte wechselt von einem einspaltigen Layout mit schmaler Größe zu einem zweispaltigen Layout bei breiteren Formaten.

Legen Sie zum Erstellen des Containers zuerst die Begrenzung für das übergeordnete Element fest:

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

Sie können einige Basisstile festlegen:

.desc {
  display: none;
}

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

Aktualisieren Sie diese Basisstile entsprechend der Inline-Breite des übergeordneten Containers:

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

Wenn also genau dieselbe Komponente in verschiedenen Bereichen Ihrer Benutzeroberfläche vorhanden ist, kann sie ihre eigene Logik verwenden, um die Größe und den Container optimal anzupassen. Sie haben mehr Kontrolle über das Layout der Karte, als wenn Sie nur den globalen Darstellungsbereich zur Verfügung stellen würden. Im Folgenden wird dies veranschaulicht, indem die Container-Abfragekarte in einem Raster mit unterschiedlichen Spaltenbreiten platziert wird:

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