CSS Grid: el diseño perfecto

Holy Grail es un patrón de diseño muy común en la web. Consta de un encabezado, un área de contenido principal con navegación de ancho fijo a la izquierda, contenido en el medio y una barra lateral de ancho fijo a la derecha y luego un pie de página.

El Santo Grial se ha logrado utilizando una variedad de métodos, probablemente el más notable recientemente con Flexbox . El diseño de cuadrícula CSS es otro método, y debería demostrar ser la forma más adecuada y directa cuando mejore la compatibilidad con los navegadores. Fue diseñado especialmente para lograr fácilmente diseños de página completa.

Demostración en vivo

Puedes ver esta demostración en acción aquí si tienes un navegador compatible. Aquí tienes instrucciones rápidas sobre cómo habilitar el diseño de cuadrícula en Fixefox y Chrome.

Margen

El marcado es realmente simple y la cantidad de elementos necesarios para crear el diseño es mínima y semántica:

div  header    !-- Header content --  /header  nav    !-- Navigation --  /nav  main    !-- Main content --  /main  aside    !-- Sidebar / Ads --  /aside  footer    !-- Footer content --  /footer/div

La rejilla

Usando áreas de cuadrícula y la unidad fr , así es como definimos la cuadrícula en el contenedor:

.container {  display: grid;  grid-template-areas:    "header header header"    "nav content side"    "footer footer footer";  grid-template-columns: 200px 1fr 200px;  grid-template-rows: auto 1fr auto;  grid-gap: 10px;  height: 100vh;}

Observe el uso dealtura: 100vh(100 % de la altura de la ventana gráfica) en el contenedor para extender la cuadrícula al menos hasta la altura completa de la ventana gráfica. La fila central de nuestra cuadrícula está configurada a una altura de 1fr para que ocupe el espacio adicional cuando sea necesario.

Elementos de la cuadrícula

Los elementos de la cuadrícula son muy fáciles de colocar en la cuadrícula con la grid-areapropiedad:

header {  grid-area: header;}nav {  grid-area: nav;  margin-left: 0.5rem;}main {  grid-area: content;}aside {  grid-area: side;  margin-right: 0.5rem;}footer {  grid-area: footer;}

Bono: Cómo hacerlo responsivo

Es fácil usar consultas de medios y cambiar solo algunas propiedades en el contenedor de la cuadrícula para contraer todo en una columna en dispositivos más pequeños:

@media (max-width: 768px) {  .container {    grid-template-areas:      "header"      "nav"      "content"      "side"      "footer";    grid-template-columns: 1fr;    grid-template-rows:      auto /* Header */      minmax(75px, auto) /* Nav */      1fr /* Content */      minmax(75px, auto) /* Sidebar */      auto; /* Footer */  }  nav, aside {    margin: 0;  }}

Cuadrícula y Flexbox

Grid no reemplaza a Flexbox y Flexbox sigue siendo la solución adecuada para la colocación unidimensional y los diseños micro. Es muy fácil combinar diseños de cuadrícula y Flexbox y están diseñados para funcionar bien juntos.

Podemos usar flexbox en nuestro encabezado, por ejemplo, para que los elementos dentro del contenedor del encabezado se distribuyan uniformemente en el eje horizontal:

header {  grid-area: header;  display: flex;  justify-content: space-between;  align-items: center;}