Los diseños de macros describen la organización de la interfaz más grande y que abarca toda la página.
Antes de aplicar cualquier diseño, debes asegurarte de que el flujo de tu contenido tenga sentido. Este orden predeterminado de una sola columna es lo que tendrá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 la página, tienes que diseñar un diseño macro: una vista de alto nivel de tu página. A través de las 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 CSS es una excelente herramienta para aplicar diseño a tu página. En el ejemplo anterior, supongamos que deseas 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 tenga el ancho suficiente, usa una consulta de medios para definir los estilos de cuadrícula sobre un punto de interrupción específico.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
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 separada para describir cuánto espacio debe ocupar. En el ejemplo de 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 se aplican cambios a algunos elementos pero si el diseño necesita actualizarse mucho, tus consultas de medios podrían quedar de control con muchos puntos de interrupción.
Supongamos que tienes una página llena de componentes de tarjetas.
Las tarjetas nunca son más anchas que 15em, y quieres colocar tantas tarjetas en una línea como quepan.
Podrías escribir consultas de medios con puntos de interrupción de 30em, 45em, 60em,
pero es bastante tedioso y difícil de mantener.
En cambio, puedes aplicar reglas para que las tarjetas ocupen automáticamente la cantidad adecuada 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 última fila, las tarjetas restantes se estirarán para llenar el espacio disponible en lugar de alinearse en columnas. Si deseas alinear filas y columnas, usa cuadrícula.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Al aplicar algunas reglas inteligentes en Flexbox o Cuadrícula es posible crear diseños de macro dinámicos con un CSS mínimo y sin consultas de medios. Eso es menos trabajo para ti, sino que haces que el navegador haga los cálculos. Para ver algunos ejemplos de diseños modernos de CSS que son fluidos sin necesidad de consultas de medios, consulta 1linelayouts.com.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los diseños de 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 diseños de macros a nivel de página, presta atención a los componentes de la página. Este es el dominio de microdiseños.