Frage zum Wiki-Artikel „Maßangaben“

[Rolf B]

Hallo nix,

das Beispiel ist schwierig nachvollziehbar, weil dein HTML nur ein <p> enthält, das Grid darin aber 3 Spalten definiert.

Deine Definition des .card Grid ist allerdings fehlerhaft, weil clamp nicht in grid-template-columns erlaubt ist. Guck in die Doku, bzw. in die ausgelagerte Beschreibung zur track-list. Die Regeln für Trackgrößen sind sehr strikt. Dein Browser dürfte Dir in den Entwicklertools ebenfalls mitteilen, dass diese Eigenschaft einen ungültigen Wert hat.

Wenn Du möchtest, dass sich der Inhalt eines div.card nach der Größe der Card richtet, musst Du das .card-Element zum Container machen. Dann kannst Du Container-Queries dafür definieren, so dass der Inhalt der Card der Card-Größe (sprich: der Trackbreite) folgt. Und in den Regeln, die den Card-Inhalt layouten, kannst Du mit cqw/cqh arbeiten.

Im Haupt-Grid musst Du lediglich sicherstellen, dass sich die Tracks über die gesamte Breite des Grid ausdehnen. Das ist mit justify-content:stretch aber bereits der Default.

Das Grid selbst (also deinen Master) zum Container zu machen, ist nur nötig, wenn Du tatsächlich die Größe des Containers verwenden musst. Aber musst Du das? Geschachtelte Container führen auch zu dem Problem, dass der Browser die cq-Einheiten auf das nächstgelegene Elternelement bezieht, das Container Size Queries akzeptiert, und nicht auf den Container, in dessen @container Query sie stehen. D.h. das Card-Innere kann sich ohnehin nicht auf cq-Einheiten des Master-Grid beziehen. Und es ist auch nicht nötig, weil das Master-Grid seine Grid-Items ja basierend auf dem Layout kontrolliert und Du darum im Card-Grid auf das Master-Grid keinen Bezug nehmen solltest.

Aber das ist etwas, worüber Matthias sich aufgeregt hat: Regeln für das Container-Element selbst kann man durch Container-Queries nicht definieren, d.h. man muss nötigenfalls ein Extra-Div drumherumlegen, das selbst keine größenabhängigen Styles braucht und die Rolle des Containers übernimmt. Ob das bei Dir nötig ist, kann ich nicht sagen. Nötig wäre es beispielsweise dann, wenn das .card Element ein Grid ist und Du das Grid-Template je nach Größe umbauen möchtest. Dann geht das nur so:

<div class="card">
   <div>
      <!-- inhalt -->
   </div>
</div>

.card { 
   container: Card / inline-size;
}
.card > div {
   display:grid;
   grid: /* schmales Layout */;
}
@container Card (width > 20em) {
   .card > div {
      display:grid;
      grid-template-columns: minmax(5em, 30cqw) 1fr;
   }
}

Du hast versucht, die contain-Eigenschaft für das .card-Element zu verwenden. Diese Eigenschaft bewirkt containment, erzeugt aber keinen Query-Container für Größenabfragen. Was wolltest Du da bezwecken?

Rolf