CSS grid layout
# CSS grid layout

CSS grid layout o CSS grid es una técnica de las Hojas de Estilo en Cascada que permite a los desarrolladores web crear diseños complejos y adaptables con mayor facilidad en todos los navegadores. Ha habido otros métodos para controlar los métodos de diseño de páginas web, como las tablas, el modelo de caja, y CSS flex. CSS grid no es actualmente un estándar oficial (es una W3C Candidate Recommendation) aunque ha sido adoptada por la mayoría de los principales navegadores.

## Motivación

CSS grid puede crear diseños más asimétricos como el layout anterior y opciones de diseño como CSS floats. También permite un código más estandarizado que funciona en todos los navegadores. Esto es en contraste con confiar en los atajos específicos de los navegadores o en complicadas soluciones.

Un problema con la explotación de floats en CSS es que si el contenido se añade a una parte de la página podría interrumpir el flujo de la página y romper el diseño. Esto se debe a las diferentes alturas de los elementos de diseño. Aunque CSS flex soporta diseños flexibles y proporciona la flexibilidad de crear diseños complejos, falla cuándo surge la necesidad de crear diseños sensibles en un espacio bidimensional.

## Soporte en navegadores

A partir de octubre de 2017, Chrome, Firefox, Safari y Edge soportan CSS grid sin prefijos. IE 10 y 11 soportan CSS grid pero con una especificación obsoleta. En móviles, todos los navegadores modernos soportan CSS grid excepto Opera Mini y UC Browser. Los desarrolladores web orientados a navegadores más antiguos pueden utilizar Modernizr 3.5.0 para detectar y degradar con gracia la página web según sea necesario.

## Utilización en frameworks

No hay frameworks web que incorporen CSS grid en contraste con CSS flex que se utiliza en frameworks como Bootstrap 4 y Foundation 6.

## La unidad fr

La unidad fr se utiliza a menudo con el diseño de grid. La unidad fr, que forma parte de la especificación de la disposición de CSS grid, representa una fracción del espacio sobrante en el contenedor grid.

## Ejemplos

Ejemplo del holy grail layout:

Aquí hay un ejemplo de una tabla de valores:

