stringtranslate.com

Diseño de cuadrícula CSS

En las hojas de estilo en cascada , el diseño de cuadrícula CSS o cuadrícula CSS crea diseños de cuadrícula de diseño web responsivo complejos de manera más fácil y consistente en todos los navegadores. [6] Históricamente, ha habido otros métodos para controlar los métodos de diseño de páginas web, como tablas , flotantes y, más recientemente, el diseño de caja flexible CSS (flexbox). Actualmente, la cuadrícula CSS no es un estándar oficial (es una recomendación candidata del W3C ) aunque ha sido adoptada por las versiones recientes de todos los navegadores principales actuales. [7]

Motivación

La cuadrícula CSS puede crear diseños más robustos y flexibles que las opciones anteriores, como los flotantes CSS . También permite un código más estandarizado que funciona en todos los navegadores. Esto contrasta con la dependencia de trucos específicos del navegador o soluciones alternativas complicadas. [2]

Un problema con la explotación de elementos flotantes en CSS es que si se agrega contenido 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 flexbox admite diseños flexibles y brinda la flexibilidad de crear diseños complejos, falla cuando surge la necesidad de crear diseños responsivos en un espacio bidimensional.

Historia

El primer borrador completo de un diseño de cuadrícula para CSS fue creado por Phil Cupp en Microsoft en 2011 e implementado en Internet Explorer 10 detrás de un -ms- prefijo de proveedor . La sintaxis fue reestructurada y refinada aún más a través de varias iteraciones en el Grupo de Trabajo CSS , dirigido principalmente por Elika Etemad y Tab Atkins Jr. La característica fue ampliamente adoptada por los desarrolladores web después de la evangelización liderada principalmente por Rachel Andrew y Jen Simmons . [8]

Compatibilidad con navegadores

A partir de octubre de 2017, Chrome, Firefox, Safari y Edge admiten la cuadrícula CSS sin prefijos de proveedor. [9] [10] [11] IE 10 y 11 admiten la cuadrícula CSS, pero con una especificación obsoleta. En dispositivos móviles, todos los navegadores modernos admiten la cuadrícula CSS, excepto Opera Mini . [12] Los desarrolladores web que utilizan navegadores más antiguos pueden utilizar Modernizr 3.5.0 para detectar y degradar la página web según sea necesario. [13]

Utilización en marcos

Tailwind CSS incorpora una cuadrícula CSS en sus utilidades para controlar cómo se dimensionan y se colocan los elementos. [14] Sin embargo, muchos otros marcos web actuales no incorporan una cuadrícula CSS, como Bootstrap 4 y Foundation 6. [15]

La unidad fr

La unidad "fr" se utiliza a menudo con el diseño de cuadrícula CSS. [16] [17] [18] La unidad "fr", parte de la especificación del diseño de cuadrícula CSS, representa una fracción del espacio restante en el contenedor de la cuadrícula. [2]

Ejemplos

Disposición del "Santo Grial"

El siguiente es un ejemplo del diseño del "santo grial" :

Tabla de valores

A continuación se muestra un ejemplo de una tabla de valores:

Referencias

  1. ^ "Historial de publicación del módulo de diseño de cuadrícula CSS de nivel 1 - W3C". W3C . nd . Consultado el 9 de abril de 2021 .
  2. ^ abcd Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil; Mielke, Markus, eds. (18 de diciembre de 2021). "Módulo de diseño de cuadrícula CSS nivel 1". W3C . Grupo de trabajo del W3C . Consultado el 9 de abril de 2021 .
  3. ^ ab Atkins Jr., Tab; J. Etemad, Elika; Atanassov, Rossen, eds. (14 de marzo de 2023). "Módulo de diseño de cuadrícula CSS nivel 2". W3C . Grupo de trabajo CSS . Consultado el 26 de marzo de 2023 .
  4. ^ 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 .
  5. ^ 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 .
  6. ^ "CSS Grid: el diseño de tablas ha vuelto. Esté presente y sea cuadrado". Google Developers . Enero de 2017 . Consultado el 9 de abril de 2021 .
  7. ^ "Diseño de cuadrícula CSS (nivel 1) | ¿Puedo usar... Tablas de soporte para HTML5, CSS3, etc." caniuse.com . Consultado el 12 de enero de 2022 .
  8. ^ Gustafson, Aaron (19 de octubre de 2017). "La historia de CSS Grid, de sus creadores". A List Apart . Consultado el 12 de enero de 2022 .
  9. ^ 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 .
  10. ^ 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 .
  11. ^ "Diseño de cuadrícula CSS". ¿Puedo usar . nd . Consultado el 9 de abril de 2021 .
  12. ^ ""grid" | ¿Puedo usar... Tablas de soporte para HTML5, CSS3, etc".
  13. ^ Ateş, Faruk (13 de abril de 2017). "Modernizr 3.5.0". Noticias Modernizr . Consultado el 9 de abril de 2021 .
  14. ^ "Inicio/Fin de columna de cuadrícula - Tailwind CSS" . Consultado el 13 de abril de 2021 .
  15. ^ Goetter, Raphael (16 de febrero de 2017). «Cuadrículas y estructuras de Flexbox». GitHub Gist . Archivado desde el original el 16 de febrero de 2017. Consultado el 9 de abril de 2021 .
  16. ^ 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 .
  17. ^ Marcotte, Ethan (18 de julio de 2018). «Fraccional. — Ethan Marcotte». Ethan Marcotte . Consultado el 9 de abril de 2021 .
  18. ^ Rendle, Robin (12 de junio de 2017). "Introducción a la unidad CSS 'fr'". CSS-Tricks . Consultado el 9 de abril de 2021 .

Enlaces externos