CSS GRID

 

Header

Menu

CSS Grid es un sistema de maquetación web que divide una página en una cuadrícula o rejilla (grid) para posicionar los elementos de manera más sencilla, versátil y coherente. CSS Grid Layout es un recurso CSS que permite distribuir un sitio web en una cuadrícula, dando al usuario el control total sobre la posición de los elementos en las filas y columnas.

<style> .grid-container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: 80px 1fr 50px; grid-template-areas: "header header header" "menu content aside" "footer footer footer"; } .header { grid-area: header; background-color: lightgray; } .menu { grid-area: menu; background-color: lightblue; } .content { grid-area: content; background-color: white; } .aside { grid-area: aside; background-color: lightgreen; } .footer { grid-area: footer; background-color: gray; } </style> <div class="grid-container"> <div class="header">Header</div> <div class="menu">Menu</div> <div class="content">Content</div> <div class="aside">Aside</div> <div class="footer">Footer</div> </div>

En este ejemplo, hemos creado una rejilla con 3 filas y 3 columnas utilizando la propiedad grid-template-columns y grid-template-rows.

Luego, hemos utilizado la propiedad grid-template-areas para especificar las áreas de la rejilla que ocuparán cada uno de los elementos de la página.

Por ejemplo, el elemento .header ocupará el área de la rejilla que se encuentra en la fila 1, columna 1, hasta la fila 1, columna 3.

El elemento .menu ocupará el área de la rejilla que se encuentra en la fila 2, columna 1, hasta la fila 2, columna 1. Y así sucesivamente.

También hemos añadido un poco de estilo para darle un poco de color a cada elemento de la rejilla.

EL MISMO EJEMPLO PERO RESPONSIVE

El ejemplo que te di anteriormente no es responsive por sí mismo, es decir, no se adapta automáticamente al tamaño de la pantalla del dispositivo en el que se visualiza. Sin embargo, se puede hacer que la rejilla sea responsive agregando algunas reglas CSS adicionales.

Para hacer que la rejilla sea responsive, puedes utilizar la propiedad grid-template-columns y grid-template-rows con unidades de tamaño móviles, como % o vw, en lugar de unidades fijas como px o em. También puedes utilizar la propiedad grid-template-areas junto con la propiedad @media para definir diferentes diseños para diferentes tamaños de pantalla.

.grid-container { display: grid; grid-template-columns: 20% 1fr 20%; grid-template-rows: 80px 1fr 50px; grid-template-areas: "header header header" "menu content aside" "footer footer footer"; } @media (max-width: 600px) { .grid-container { grid-template-columns: 100%; grid-template-rows: 80px 1fr 50px 1fr; grid-template-areas: "header" "menu" "content" "aside" "footer"; } }

En este ejemplo, hemos utilizado la propiedad @media para definir un diseño diferente para pantallas con un ancho máximo de 600px.

En este caso, hemos cambiado la rejilla a una sola columna y hemos reubicado los elementos en filas separadas.

Link: Código en txt
Link: CSS GRID

Aside

foto

Footer