CSS Recipes

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

Stiven Castillo
1 min readOctober 03, 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;
}

3 ways to center element

// with grid
.grid {
  display: grid;
  place-items: center;
}
// with position absolute
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
// with flex
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}