La
Revue
Revue
Técnica de navegación D
CSS Grid sin hamburger
El menú no se oculta. CSS Grid reordena los elementos según el espacio disponible. Los links pasan de fila central a segunda fila completa en pantallas pequeñas.
Concepto
Grid de 3 columnas
En desktop:
grid-template-columns: 1fr auto 1fr. Brand a la izquierda, links en el centro, CTA a la derecha. Simétrico.En móvil
Segunda fila
Con
@media, los links cambian a grid-column: 1/-1; grid-row: 2. Ocupan todo el ancho como segunda fila.Ventaja
Cero JS, siempre visible
Los links nunca se ocultan. No hay estado que gestionar. Mejor para SEO y accesibilidad. Ideal para sitios con pocos ítems de navegación.
/* Desktop: grid de 3 columnas */
.nav-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto auto;
}
.nav-links-cell { grid-column: 2; grid-row: 1; }
/* Móvil: links bajan a segunda fila */
@media (max-width: 760px) {
.nav-grid { grid-template-columns: 1fr auto; }
.nav-links-cell {
grid-column: 1 / -1; /* full width */
grid-row: 2; /* segunda fila */
}
.nav-links { flex-wrap: wrap; } /* wrappea si hace falta */
}