En las hojas de estilo en cascada , el diseño de cuadrícula CSS o la cuadrícula CSS crea diseños de diseño web complejos y receptivos de manera más fácil y consistente en todos los navegadores. [6] Ha habido otros métodos para controlar los métodos de diseño de páginas web, como tablas , modelo de caja y caja flexible CSS . La cuadrícula CSS no es actualmente un estándar oficial (es una recomendación candidata del W3C ) aunque ha sido adoptada por la mayoría de los principales navegadores. [2]
Módulo de diseño de cuadrícula CSS, nivel 1 | |
Nombre nativo | Módulo de diseño de cuadrícula CSS, nivel 1 |
---|---|
Estado | Borrador de recomendación del candidato del W3C |
Publicado por primera vez | 7 de abril de 2007 [1] |
Ultima versión | Nivel 1 18 de diciembre de 2020 [2] |
Versión de vista previa | Nivel 2 11 de marzo de 2021 [3] |
Organización | W3C |
Comité | Grupo de trabajo CSS |
Editores | [3] |
Estándares básicos | CSS |
Dominio | CSS |
Abreviatura | Cuadrícula, diseño de cuadrícula |
Sitio web | www |
Motivación
La cuadrícula CSS puede crear diseños más asimétricos que la cuadrícula anterior y opciones de diseño como flotantes CSS . También permite un código más estandarizado que funciona en todos los navegadores. Esto contrasta con depender de hacks específicos del navegador o soluciones complicadas. [2]
Un problema con la explotación de flotadores en CSS es que si el contenido se agrega 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. [2] Aunque CSS flex box admite diseños flexibles y proporciona la flexibilidad de crear diseños complejos, falla cuando surge la necesidad de crear diseños receptivos en un espacio bidimensional.
Soporte del navegador
A partir de octubre de 2017, Chrome, Firefox, Safari y Edge son compatibles con la cuadrícula CSS sin prefijos de proveedor. [7] [8] [9] IE 10 y 11 admiten la cuadrícula CSS pero con una especificación desactualizada. En dispositivos móviles, todos los navegadores modernos admiten la cuadrícula CSS, excepto Opera Mini y Brave Browser. Los desarrolladores web que se dirigen a navegadores más antiguos pueden utilizar Modernizr 3.5.0 para detectar y degradar la página web según sea necesario. [10]
Utilización en frameworks
Tailwind CSS incorpora la cuadrícula CSS en sus utilidades para controlar el tamaño y la ubicación de los elementos. [11] Sin embargo, muchos otros marcos web actuales no incorporan la cuadrícula CSS, como Bootstrap 4 y Foundation 6. [12]
la unidad fr
La unidad "fr" se usa a menudo con el diseño de cuadrícula CSS. [13] [14] [15] La unidad "fr", parte de la especificación de diseño de cuadrícula CSS, representa una fracción del espacio sobrante en el contenedor de cuadrícula. [2]
Ejemplos de
Disposición del "Santo Grial"
El siguiente es un ejemplo del diseño del "santo grial" :
HTML | Producción |
---|---|
< html > < estilo > div { borde : sólido de 1 px ; } cuerpo { pantalla : cuadrícula ; columnas de plantilla de cuadrícula : 10 em automático 10 em ; grid-template-areas : "header header header" "izquierda medio derecha" "footer footer footer" ; } style > < body > < div style = "grid-area: header" > El encabezado div > < div style = "grid-area: footer" > El pie de página div > < div style = "grid -area: left " > El panel izquierdo div > < div style = " grid-area: middle; height: 200px " > El área de contenido principal div > < div style = " grid-area: right " > El panel derecho div > body > html > |
Tabla de valores
El siguiente es un ejemplo de una tabla de valores:
HTML | Producción |
---|---|
< html > < estilo > . envoltorio { pantalla : cuadrícula ; columnas de plantilla de cuadrícula : 1 fr 1 fr 1 fr ; brecha de cuadrícula : 0,5 em ; } div { borde : 1 px sólido ; } estilo > < cuerpo > < div class = "envoltorio" > < h3 > Encabezado1 h3 > < h3 > Encabezado2 h3 > < h3 > Encabezado3 h3 > < div > valor11 div > < div > valor12 div > < div > valor13 div > < div > valor21 div > < div > valor22 div > < div > valor23 div > < div > valor31 div > < div > valor32 div > < div > valor33 div > < div > valor41 div > < div > valor42 div > < div > valor43 div > < div > valor51 div > < div > valor52 div > < div > valor53 div > < div > valor61 div > < div > valor62 div > < div > valor63 div > < div > valor71 div > < div > valor72 div > < div > valor73 div > div > cuerpo > html > |
Referencias
- ^ "Historial de publicaciones de nivel 1 del módulo de diseño de cuadrícula CSS - W3C" . W3C . nd . Consultado el 9 de abril de 2021 .
- ^ a b c d e Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (18/12/2021). "Nivel 1 del módulo de diseño de cuadrícula CSS" . W3C . Grupo de trabajo del W3C . Consultado el 9 de abril de 2021 .
- ^ a b Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (2021-03-11). "Módulo de diseño de cuadrícula CSS Nivel 2" . W3C . Grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ Mogilevsky, Alex; Cupp, Phil; Mielke, Markus; Glazman, Daniel, eds. (7 de abril de 2011). "Diseño de cuadrícula" . W3C . Grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ Mogilevsky, Alex; Mielke, Markus, eds. (5 de septiembre de 2007). "Módulo de posicionamiento de cuadrícula CSS Nivel 3" . W3C . Grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ "CSS Grid - El diseño de la tabla está de vuelta. Esté allí y sea cuadrado" . Desarrolladores de Google . Enero de 2017 . Consultado el 9 de abril de 2021 .
- ^ Anderson, Kareem (13 de septiembre de 2017). "El navegador más nuevo de Microsoft recibe un impulso significativo con EdgeHTML 16" . Consultado el 7 de octubre de 2017 .
- ^ Protalinski, Emil (9 de marzo de 2017). "Chrome 57 llega con CSS Grid Layout y mejoras de API | VentureBeat" . VentureBeat . Consultado el 7 de octubre de 2017 .
- ^ "Diseño de cuadrícula CSS" . Puedo usar . nd . Consultado el 9 de abril de 2021 .
- ^ Ateş, Faruk (13 de abril de 2017). "Modernizr 3.5.0" . Novedades Modernizr . Consultado el 9 de abril de 2021 .
- ^ "Inicio / fin de columna de cuadrícula - Tailwind CSS" . Consultado el 13 de abril de 2021 .
- ^ Goetter, Raphael (16 de febrero de 2017). "Rejillas y marcos Flexbox" . GitHub Gist . Archivado desde el original el 16 de febrero de 2017 . Consultado el 9 de abril de 2021 .
- ^ Alligator.io (3 de septiembre de 2020). "Diseño de cuadrícula CSS: la unidad Fr" . DigitalOcean . DigitalOcean . Consultado el 9 de abril de 2021 .
- ^ Marcotte, Ethan (18 de julio de 2018). "Fraccional. - Ethan Marcotte" . Ethan Marcotte . Consultado el 9 de abril de 2021 .
- ^ Rendle, Robin (12 de junio de 2017). "Introducción a la unidad CSS` fr` " . Trucos CSS . Consultado el 9 de abril de 2021 .
enlaces externos
- Módulo de diseño de cuadrícula CSS, nivel 1
- CSS Grid vs Flexbox