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 es que estos diseños a nivel de los componentes se ajusten automáticamente, sin importar 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, puedes usar flexbox para 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 otros 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 información sobre cómo 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 los 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 funcionan como contenedores.

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

Esto significa que quieres consultar la dimensión intercalada. En el caso de los documentos en inglés, ese es el eje horizontal. Vas a cambiar los diseños según el ancho del contenedor.

Si un componente está dentro de uno de esos contenedores, puedes aplicar estilos de manera similar a como aplicas 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 aplican los diseños 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 aparecerán en paralelo.

Con las consultas de contenedores, puedes diseñar componentes de forma independiente. Puedes escribir reglas según el ancho del elemento contenedor; el ancho del viewport ya no importa.

Cómo combinar consultas

Puedes utilizar 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 ya conoces los microdiseños a nivel de los componentes.

A continuación, profundizarás en los componentes básicos de tu contenido y aprenderás a hacer que tus imágenes sean responsivas. Primero, aprenderás sobre la tipografía responsiva.