Académique Documents
Professionnel Documents
Culture Documents
Hoy vamos a crear una navegación off-canvas usando CSS para conseguir el
cambio (sin requerir JavaScript) y nuestro buen amigo Grid para construir la
estructura de la página. Aquí tienes la página de muestra completa de lo que
vamos a estar intentando conseguir.
LA ESTRUCTURA DE PÁGINA BÁSICA
Empecemos construyendo una página básica; estamos buscando algo como
esto:
Comienza envolviendo todos tus elementos estructurales en un elemento contenedor de algún tipo–éste
será nuestro contenedor para Grid. Yo estoy usando <div class="container"></div>.
Aquí estamos declarando que el contenedor debería ser display:grid;, que debería tener una sola columna
de una unidad fraccionaria (no estrictamente necesario en este momento, pero lo hemos añadido para ser
rigurosos) y que el espacio entre todos los elementos de la retícula debe ser 10px.
DESPUÉS AÑADE UN PAR DE ESTILOS VISUALES PARA ACLARAR LAS COSAS UN POCO MÁS:
Hacerla Responsiva
Añadamos una media query, de forma que cuando la ventana o pantalla alcancen cierta medida (nosotros
vamos a indicar 600px) la maquetación cambie.
Así que ahora, en las pantallas grandes, la retícula cambia a grid-template-columns: repeat(4, 1fr);. Esto nos da como
resultado cuatro columnas de igual anchura, así que después tendremos que indicar la anchura de cada uno de
nuestros elementos estructurales. El header, nav y footer se extenderán todos 4 (a través de cuatro columnas) mientras
que la section se extenderá a través de tres, dejando un espacio de una columna para el aside cuya anchura se
adaptará automáticamente.