Container queries op de grid kaartjes toepassen

[Annevd]

DLC: Bouwen

Zoek uit hoe je container queries kan toepassen op de kaartjes in het Mondriaan grid. Sommige kaartjes zullen staand worden weergeven en sommige liggend, afhankelijk van de breedte van het vlak.

[Annevd]

Ik heb in codepen een simpel voorbeeld opgezet dat gebruik maakt van een container query. In dit voorbeeld staat de content in het kaartje standaard onder elkaar, maar zodra het breder wordt dan 20em zal de content naast elkaar staan.

li {
  container-type:inline-size;
  container-name:card;
}

div {
  display: flex;
  flex-direction: column;
}

@container card (width > 20em){ /* Als de breedte groter wordt dan 20em, zet de content dan naast elkaar */
  li div {
    flex-direction: row;
  }
}

Ik moet nu nog uitzoeken hoe ik dit misschien beter en dynamischer kan maken voor in het grid, aangezien de groottes en breedtes ten opzichte van je beeldscherm kunnen veranderen.

[Annevd]

17-9 Basic container query

Ik heb op onze website de bovenstaande basic container query code toegepast. In plaats van een <div> gebruiken we een <a> als container, aangezien de list items links zijn die naar onze klasgenoten linken.

De code (HTML)

<li>
              <a href="/person/{person.id}" class="full-link">
                <div class="picture-container">
                    {#if person.avatar}
                        <picture>
                            <source srcset="{person.avatar}?format=avif" type="image/avif" />
                            <source srcset="{person.avatar}?format=webp" type="image/webp" />
                            <img src="{person.avatar}" alt="{person.name}" on:error="{() => this.src='/path/to/fallback-avatar.svg'}" />
                        </picture>
                    {:else}
                        <!-- Fallback -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10" fill="#ffcc00"/>
                            <circle cx="9" cy="10" r="1" fill="black"/>
                            <circle cx="15" cy="10" r="1" fill="black"/>
                            <path d="M8 16c1.333-1 2.667-1 4 0s2.667 1 4 0" fill="none" stroke="black" />
                        </svg>
                    {/if}
                </div>
                <p>{person.name}</p>
             </a>
            </li>

De code (global CSS)

li {
    position: relative;
    background-color: white;
    list-style-type: none;
    border: 5px solid black;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    container-type:inline-size; /* container query property */
    container-name:card; /* container query property */

      &:hover{
        transform: scale(1.1);
        transition: .25s;
  }
}

@container card (width > 23rem){
    li a {
      flex-direction: row;
    }
}

Nu staat er een waarde van 23rem en is dus niet dynamisch. Dit is een waarde die ik heb gekozen die er over het algemeen overal wel goed genoeg uit ziet. Dit is dus een basic container query.

Resultaat