Microdiseños

Cuando pensamos en diseños, a menudo pensamos en diseños a nivel de página. Pero los componentes más pequeños dentro de la página pueden tener sus propios diseños independientes.

Lo ideal sería que estos diseños a nivel de los componentes se ajustaran automáticamente, independientemente de su posición en la página. Puede haber situaciones en las que no sepas si un componente se colocará en la columna de contenido principal, en la barra lateral o en ambas. Sin saber con seguridad dónde terminará un componente, debes asegurarte de que el componente pueda ajustarse a su contenedor.

GRid

La cuadrícula de CSS no es solo para diseños a nivel de la página. También funciona bien para los componentes que albergan.

En este ejemplo, los seudoelementos ::before y ::after crean líneas decorativas a ambos lados de un encabezado. El encabezado en sí es un contenedor de cuadrícula. Los elementos individuales se disponen para que las líneas siempre ocupen el espacio disponible.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

Obtén más información para inspeccionar diseños de cuadrícula en las Herramientas para desarrolladores de Chrome.

Caja flexible

Como su nombre lo indica, flexbox te permite hacer que los componentes sean flexibles. Puedes declarar qué elementos de tu componente deben tener un tamaño mínimo o máximo y dejar que los demás elementos se ajusten según corresponda.

En este ejemplo, la imagen ocupa un cuarto del espacio disponible y el texto ocupa los otros tres cuartos. Pero la imagen nunca supera los 200 píxeles.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

Obtén más información para inspeccionar diseños de flexbox en las Herramientas para desarrolladores de Chrome.

Consultas de contenedores

Flexbox te permite diseñar a partir del contenido. Puedes especificar los parámetros de tus elementos (qué tan limitados que deberían ser, qué tan anchos deben ser) y dejar que el navegador determine la implementación final.

Pero el componente en sí no conoce su contexto. No sabe si se está usando en el contenido principal o en una barra lateral. Esto puede hacer que los diseños de los componentes sean más complicados que los diseños de página. Para poder aplicar estilos relevantes según el contexto, los componentes deben conocer más que el tamaño del viewport en el que se encuentran.

Con los diseños de página, sí conoces el ancho del contenedor porque este es el viewport del navegador. Las consultas de medios informan las dimensiones del contenedor de nivel de página.

Para informar las dimensiones de cualquier contenedor, usa las consultas de contenedor.

Para comenzar, define qué elementos actuarán como contenedores.

main,
aside {
  container-type: inline-size;
}

Esto significa que quieres poder consultar la dimensión intercalada. En el caso de los documentos en inglés, corresponde al eje horizontal. Cambiarás los estilos según el ancho del contenedor.

Si un componente está dentro de uno de esos contenedores, puedes aplicar estilos de una manera que es bastante similar a las consultas de medios.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

Si un objeto multimedia está dentro de un contenedor más estrecho que 25em, no se aplicarán los estilos de flexbox. La imagen y el texto aparecen ordenados verticalmente.

Sin embargo, si el elemento que lo contiene es más ancho que 25em, la imagen y el texto aparecen uno al lado del otro.

Las consultas de contenedores te permiten definir el diseño de los componentes de forma independiente. Ya no importa el ancho del viewport. Puedes escribir reglas según el ancho del elemento contenedor.

Cómo combinar consultas

Puedes usar consultas de medios para el diseño de página y consultas de contenedor para los componentes dentro de la página.

Aquí, la estructura general de la página tiene un elemento main y un elemento aside. Hay objetos multimedia dentro de ambos elementos.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

Una consulta de medios aplica un diseño de cuadrícula a los elementos main y aside cuando el viewport es más ancho que 45em.

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

La regla de consulta de contenedor para los objetos multimedia sigue siendo la misma: solo aplica un diseño horizontal de flexbox si el elemento contenedor es más ancho que 25em.

Las consultas de contenedores son un factor decisivo para los microdiseños. Tus componentes pueden ser independientes, independientemente del viewport del navegador.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre microdiseños.

Anteriormente, aprendiste sobre los diseños de macros a nivel de la página. Ahora conoces los microdiseños a nivel de los componentes. A continuación, profundizarás en los componentes básicos de tu contenido. Aprenderás a hacer que tus imágenes sean responsivas. Pero ahora exploremos la tipografía responsiva.