CSS Recipes

Técnicas y fragmentos utiles de CSS para la web.

Stiven Castillo
1 min readApril 05, 2022

Container Query

Es la habilidad de un elemento de renderizarce en diferentes formas según el tamaño de su contenedor padre.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}
@container sidebar (min-width: 400px){
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Ver más en la referencia https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

$card