Microdiseños

Cuando pensamos en diseños, a menudo pensamos en diseños a nivel de la página. Sin embargo, 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, 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 certeza dónde terminará un componente, debes asegurarte de que pueda ajustarse a su contenedor.

Cuadrícula

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

En este ejemplo, los ::before y ::after seudoelementos crean líneas decorativas a cada lado de un encabezado. El encabezado en sí es un contenedor de cuadrícula. Los elementos individuales se diseñan de manera que las líneas siempre llenen 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 información para inspeccionar diseños de cuadrícula en las Herramientas para desarrolladores de Chrome.

Flexbox

Como su nombre lo indica, puedes usar flexbox para que tus componentes sean flexibles. Puedes declarar qué elementos de tu componente deben tener un tamaño mínimo o máximo, y permitir que los demás elementos se flexionen para ajustarse en consecuencia.

En este ejemplo, la imagen ocupa un cuarto del espacio disponible y el texto ocupa los tres cuartos restantes. Sin embargo, 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 para inspeccionar diseños de flexbox en las Herramientas para desarrolladores de Chrome.

Consultas de contenedores

Flexbox te permite diseñar desde el contenido hacia afuera. Puedes especificar los parámetros de tus elementos (qué tan estrechos o anchos deben ser) y permitir que el navegador determine la implementación final.

Sin embargo, el componente en sí no tiene conocimiento de su contexto. No sabe si se usa en el contenido principal o en una barra lateral. Esto puede hacer que los diseños de componentes sean más complicados que los diseños de página. Para poder aplicar estilos contextualmente relevantes, tus componentes deben saber más que el tamaño de la ventana gráfica en la que se encuentran.

Con los diseños de página, sí conoces el ancho del contenedor, ya que el contenedor es la ventana gráfica del navegador; las consultas de medios informan las dimensiones del contenedor a nivel de la página.

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

Para comenzar, define qué elementos actúan como contenedores.

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

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

Si un componente se encuentra 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 se encuentra dentro de un contenedor más estrecho que 25em, no se aplican los estilos de flexbox. La imagen y el texto aparecen ordenados verticalmente.

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

Con las consultas de contenedores, puedes diseñar componentes de forma independiente. Puedes escribir reglas basadas en el ancho del elemento contenedor; el ancho de la ventana gráfica ya no importa.

Cómo combinar consultas

Puedes usar consultas de medios para el diseño de la página y consultas de contenedores 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 la ventana gráfica es más ancha que 45em.

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

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

Las consultas de contenedores cambian las reglas del juego para los microdiseños. Tus componentes pueden ser independientes del navegador.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre los microdiseños.

Anteriormente, aprendiste sobre los macrodiseños a nivel de la página. Ahora conoces los microdiseños a nivel de los componentes.

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