Los diseños macro describen la organización más amplia de toda la página de tu interfaz.
Antes de aplicar un diseño, debes asegurarte de que el flujo de tu contenido tenga sentido. El orden predeterminado de esta columna única es lo que obtendrán las pantallas más pequeñas.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Cuando organizas estos componentes individuales a nivel de página, estás diseñando un diseño macro, es decir, una vista de alto nivel de tu página. Usando consultas de medios, puedes proporcionar reglas en CSS que describan cómo esta vista debe ajustarse a diferentes tamaños de pantalla.
Cuadrícula
La cuadrícula de CSS es una excelente herramienta para aplicar un diseño a tu página. En el ejemplo anterior, supongamos que quieres un diseño de dos columnas una vez que haya suficiente ancho de pantalla disponible. Para aplicar este diseño de dos columnas una vez que el navegador sea lo suficientemente ancho, usa una consulta de medios para definir los estilos de cuadrícula sobre un punto de interrupción especificado.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Caja flexible
Para este diseño específico, también puedes usar flexbox. Los estilos se verían de la siguiente manera:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Sin embargo, la versión Flexbox requiere más CSS. Cada columna tiene una regla diferente para describir cuánto espacio debe ocupar. En el ejemplo de la cuadrícula, esa misma información se encapsula en una regla para el elemento contenedor.
¿Necesitas una consulta de medios?
Es posible que no siempre necesites usar una consulta de medios. Las consultas de medios funcionan bien cuando aplicas cambios a algunos elementos, pero si el diseño necesita actualizarse mucho, es posible que tus consultas de medios se descontrolen con muchos puntos de interrupción.
Supongamos que tienes una página llena de componentes de tarjetas.
Las tarjetas nunca serán más anchas que 15em, y querrás poner todas las tarjetas que quepan en una línea.
Se pueden escribir consultas de medios con puntos de interrupción de 30em, 45em, 60em, etc., pero es bastante tedioso y difícil de mantener.
En cambio, puedes aplicar reglas para que las tarjetas ocupen automáticamente la cantidad correcta de espacio.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Puedes lograr un diseño similar con Flexbox. En este caso, si no hay suficientes tarjetas para llenar la fila final, las tarjetas restantes se estirarán para llenar el espacio disponible en lugar de alinearse en columnas. Si deseas alinear filas y columnas, usa la cuadrícula.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Si aplicas algunas reglas inteligentes en flexbox o cuadrícula, es posible diseñar diseños macro dinámicos con un CSS mínimo y sin consultas de medios. Eso implica menos trabajo para ti, ya que harás que el navegador haga los cálculos. Para ver algunos ejemplos de diseños de CSS modernos que son fluidos sin requerir consultas de medios, visita 1linelayouts.com.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los diseños macro.
¿Qué oración describe mejor los diseños macro?
¿Los diseños macro siempre usan consultas de medios para adaptarse a diferentes tamaños de pantalla?
Ahora que tienes algunas ideas para los diseños macro a nivel de la página, concéntrate en los componentes dentro de la página. Este es el dominio de los microdiseños.