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

Subgrid

Al anidar cuadrículas, es difícil alinear los elementos de cuadrícula anidados con la cuadrícula principal. Ahí es donde entra en juego la subcuadrícula: al establecer grid-template-columns o grid-template-rowsen subgrid, se alineará con la cuadrícula principal.

.grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}

.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}