Los diseños macro describen la organización más grande de tu interfaz, 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 el que se mostrará en 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, diseñas un diseño macro, es decir, una vista de alto nivel de tu página. Con las consultas de medios, puedes proporcionar reglas en CSS que describan cómo se debe ajustar esta vista a diferentes tamaños de pantalla.
Cuadrícula
La cuadrícula 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 por encima de un punto de interrupción especificado.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Para este diseño específico, también podrías usar flexbox. Los diseños 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 de flexbox requiere más CSS. Cada columna tiene una regla independiente 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 media query?
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, tus consultas de medios podrían salirse 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 como 30em, 45em y 60em, pero eso es bastante tedioso y difícil de mantener.
En su lugar, puedes aplicar reglas para que las tarjetas ocupen automáticamente la cantidad de espacio adecuada.
.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 Grid, es posible diseñar diseños de macro dinámicos con un mínimo de CSS y sin ninguna consulta de medios. Esto te ahorra trabajo, ya que el navegador realiza los cálculos. Para ver algunos ejemplos de diseños CSS modernos que son fluidos sin necesidad de consultas de medios, consulta 1linelayouts.com.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los diseños generales.
¿Qué oración describe mejor los diseños de macro?
¿Los diseños de macro siempre usan consultas de medios para adaptarse a diferentes tamaños de pantalla?
Ahora que tienes algunas ideas para los diseños de macros a nivel de la página, enfócate en los componentes dentro de la página. Este es el ámbito de los diseños micro.