¿CSS Grid es una idea nueva? La evolución de la especificación

Es increíble hasta dónde llegó CSS Grid, las cosas que podemos hacer con CSS Grid hoy en día son demasiadas! Trabajar con posicionamiento antes con CSS era horrible, me acuerdo del float, era horrible :c
.
Empecé a trabajar con Bootstrap por su Grid System, luego descubrí CSS Grid y adió Bootstrap, algo genial de CSS Grid es que hoy en día frameworks como Tailwind CSS ya empiezan a usar directamente CSS Grid 😄

CSS es la prueba pura de que todo lleva su proceso.
Nada sale de la noche a la mañana.
Es cuestión de tiempo, de días, meses o años llevar a cabo una idea hasta el día de su lanzamiento y dé ahi su mejora constante.
Me siento muy agradecido por vivir en una época donde tenemos estas herramientas que nos facilitan mucho el trabajo.

📊 ¿CSS Grid es una idea nueva? La evolución de la especificación

CSS comenzó como algo muy simple.

Era solo una forma de crear una vista de un documento en una pantalla pequeña muy simple en ese momento.

Hace veinte años, las pantallas eran muy pequeñas. Entonces, cuando vimos que podíamos hacer una hoja de estilo para documentos, pensamos: …

Bueno, ¿qué más podemos hacer ahora que tenemos un sistema para hacer hojas de estilo?

• Cuando comenzaron en CSS pensaron tomar un diseño similar a las revistas

  • Las imágenes, textos, pie de páginas tenían ciertos lugares
  • Todo el documento tenía un sentido

• Se tenía la idea de un sistema de layout

• Microsoft necesitaba urgentemente una herramienta de diseño robusto y flexible para la web si la web iba a ser una opción para el desarrollo de aplicaciones nativas en windows

• Hubo 3 ideas fundamentales

  1. Idea de Microsoft
  2. Diseño avanzado de Bos
  3. Adición de líneas de cuadricula de Linss

• Antes de que una recomendación candidata (Borrador Final) pueda convertirse en una recomendación propuesta, la W3C necesita ver al menos dos implementaciones independiendientes e interoperables

• Hubo un cambio fundamental con CSS Grid

  • Jen Simmons ⇒ Colocó muchas demostraciones que creó para CSS Grid en la web

• Sin el entusiasmo de los desarrolladores, proveedores de navegadores son reacios a gastar dinero para ver si la idea gana terreno

• Los navegadores empezaron a sacar su compatible con los navegadores

RESUMEN: La adopción de CSS Grid fue progresiva, fue algo que se tenía la idea de crear un layout de este tipo. Gracias al gran recibimiento que tuvo los proveedores de navegadores decidieron invertir en esta característica.

CSS Grid es un nuevo módulo dentro del lenguaje CSS. No es un “framework”, ni un “hack”, ni es JavaScript y no es una técnica que se apropia de herramientas hechas para otro fin. Es el primer módulo oficial de CSS creado específicamente para diagramar usando una retícula. Es un cambio tan grande como pasar de tablas a CSS o responsive.
Con CSS Grid definimos una retícula real: describimos el comportamiento de columnas y filas, podemos delimitar y nombrar áreas en base a ellas. Los elementos dentro de ese espacio se posicionan dentro de esa retícula, ya sea de forma automática o implícita, o especificando explícitamente dónde deben estar.

CSS Grid es un sistema bidimensional: por primera vez tenemos control tanto del espacio vertical como horizontal. De manera nativa varias columnas podrán tener la misma altura, a pesar de que una de ellas tenga menos contenido, o posicionaremos un elemento a dos tercios de la altura de un sitio, o sobrepondremos elementos sin utilizar position: absolute.
Fuente: https://medium.com/think-by-shifta/por-qué-css-grid-liberará-la-creatividad-del-diseño-web-e61499132b41

aqui la web de Jen Simmons para que le echen un ojito 💚💚
.
https://labs.jensimmons.com/

Importante

Rachel Andrew : Fue una de las mujeres que empezó a contribuir para la comunidad de CSS alrededor del año 2012

Jen Simmons : Al igual que Rachel Andrew fue una mujer muy importante en esta comunidad, ya que coloco demasiadas contribuciones para css de Grid en la web

La idea de CSS Grid nació hace tiempo, sin embargo, hasta ahora está siendo totalmente implementada. ¿Se imaginan la cantidad de ideas que ya han nacido pero que no se usarán hasta dentro de un futuro con respecto a CSS?
.
Conozco de algo así pero con JavaScript, se llama TC39 es el comité encargado de agregar nuevos estándares, nuevas funciones a JavaScript, todas las ideas las genera la comunidad. Si alguien sabe de algo similar pero con CSS sería genial que lo comparte 😄

Rome was not built in one day

Una historia muy interesante. Es increíble saber el tiempo que se toma para crear un estándar. Que bueno estar en una época donde Grid ya es una realidad.

Contenedores Grid y Flex nacen con la llegada de CSS 3
Beneficios que trajo CSS 3

• Bordes redondeados: en CSS 2 eran difíciles de conseguir
• Gradientes de colores: aplicado a etiquetas y colores de fondo generalmente
• La maquetación es mas rapida
• Medias queries: diferentes estilos para diferentes tamaños de pantalla.

muy buena la historia, hace tiempo trabajo con bootstrap o tailwind y manejo bien su grilla pero he decidido manejar css grid para pasarme a css puro

¿CSS Grid es una idea nueva?

Es el resultado de todas los diferentes métodos de solución en cuanto al posicionamiento de elementos.

CSS al inicio solo estaba enfocado a otorgar colores, tipografías e imágenes, sin embargo bert bos empezó a tomar tecnicas de desarrollo de diseño de revistas e implementaron a css.

En 2005 bert bos presenta ante la W3C un documento donde presenta la idea de un sistema de layout. Solo hasta el 2016 se dio una robustez a esta idea inicial sin ser presentado o implementado ante la comunidad.

Microsoft ante la necesidad de tener una herramienta de diseño robusta y flexible para la creación de vistas enfocadas al desarrollo de aplicaciones nativas toma el sistema de grillas.

Rachek andrew en el 2012 escribe un articulo relacionado a css grid dando mas detalle del funcionamiento y creación de grillas.

Grid nace atrás vez de 3 ideas o propuestas:

• Inicialmente Microsoft
• Diseño Avanzado de bos
• Adición de líneas de cuadrícula de linss

Jen Simmons Colocó muchas demostraciones que creó para css grid en la web. El hecho de que la idea inicial de css grid para ser usada como un estándar no es suficiente como para darle ese titulo, debe de cumplirse varios factores como existir varias implementaciones de la misma, que la comunidad de desarrolladores la use y sea bien recibida, y por ultimo que se convierta en una solución a una necesidad.

Para 2017 Google consigue una implementación de CSS grid para chrome dos días después que firefox realizara su propia implementación y a ellos se le sumaron opera y safari. El ultimo en sumarse fue edge de microsoft.

CSS Grid se ha tomado como un método de diseño robusto en el que se puede trabajar sin preocuparse de otras implementaciones.

Repositorio de mis a puntes

Por si son curiosos aquí esta el articulo del 2012 de Rachel Andrew que menciona por si quieren darle un vistazo.

Giviig Content Priority with CSS3 Grid Layout

aqui el post de Rachel Andrews que vimos en el video => https://24ways.org/2012/css3-grid-layout/

Jen Simmons tiene su propio canal de youtube, su contenido es muy bueno

https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag

Muy interesante es todo esto, en verdad lo estoy disfrutando.

Jen Simmons baja muchisima data en su canal de YT:
https://www.youtube.com/c/LayoutLand
Super recomendado!

Que tal campeon, buen dia… increible dato… la historia es necesario para empezar a eventuarnos en este mundo de creacion de paginas web, me gusta. sigamos campeon.

moi interesante!! la verdad que las mujeres marcaron el destino de Css!

he tomado cursos de HTML y CSS. responsive desinge. Ahora quiero aprender sobre GRID ;D

Wow, me ha encantado toda la intro de este curso! 👌🏻

CSS Grid: La evolución de la especificación.

Es increíble todo el tiempo que pasó para que la idea de este sistema de layout de cuadrículas al fin saliera para css. Sería interesante ver parte de la historia también pero del sistema Flexbox.

Hola, Bootstrap 5 ya soporta el css grid.

CSS grid empezó a popularizarse porque a los programadores les entusiasmo todo lo que esto podía hacer. ¿Cuál será la próxima gran innovación?
Desde mi punto de vista, creo que los diseños en 3D dan una gran experiencia al usuario en paginas web y estaría cool que uno de los estudiantes en platzi fuera el pionero en un estándar para algo así.

CSS se basó en el sistema de maquetación editorial normal.

Realmente me encanta saber qué hay detrás de las tecnologías que usamos todos los días y por qué fueron creadas.

bootstrap bill turner, lo unico que se me viene a la cabeza de bootstrap, nunca me a llamado la atencion de aprender eso, yo soy solo html, css y javascript
seguimos

CSS grid is an amazing output of a large process

En las hojas de estilo en cascada, el diseño de cuadrícula CSS crea diseños web complejos y receptivos de manera más fácil y consistente en todos los navegadores. Ha habido otros métodos para controlar los métodos de diseño de páginas web, como tablas, modelo de caja y flex-box de CSS.

¿Porque surgio la necesidad de trabajar en esto?

Microsoft necesitaba desesperadamente una herramienta de diseno robusta y flexible para la web, todo fue basado en una necesidad.

Rachel Andrew en 2012 fue de las primeras que empezo a trabajar en este proyecto. Todo esto basado en las 3 ideas fundamentales:

• Idea de Microsoft
• Diseno avanzado de Bos
• Adicion de lineas de cuadricula de Linss.

Antes de que una recomendacion candidata (Borrador Final) pueda convertirse en una recomendacion propuesta (Coloquialmente “estandar”), la W3C necesita ver al menos dos implementaciones independientes e interoperables.

Hubo un cambio fundamental en CSS con grid. Google consiguio su implementacion de CSS Grid en Chromium 56 para android en enero de 2017. Google consiguio su implementacion de Chrome a principios de marzo, solo dos dias despues de que Mozilla enviara su propia implementacion en Firefox. Y antes de que terminara el mes, Opera y Safari tambien habian enviado soporte para CSS Grid.

Wow, it’s amazing when you can see all the moments when an idea was had up to the day it was adopted.

Me gusta como la profesora nos deja documentos para que podamos profundizar más sobre el tema, gracias porfe Estefany, es la mejor

Bos
CSS comenzó como algo muy simple.

Era solo una forma de crear una vista de un documento en una pantalla pequeña muy simple en ese momento.

Hace veinte años, las pantallas eran muy pequeñas. Entonces, cuando vimos que podíamos hacer una hoja de estilo para documentos, pensamos: …

Bueno, ¿qué más podemos hacer ahora que tenemos un sistema para hacer hojas de estilo?

• Cuando comenzaron en CSS pensaron tomar un diseño similar a las revistas

  • Las imágenes, textos, pie de páginas tenían ciertos lugares
  • Todo el documento tenía un sentido.

• Se tenía la idea de un sistema de layout

  ¿Por qué surgió la necesidad de trabajar en esta especificación?

• Microsoft necesitaba urgentemente una herramienta de diseño robusto y flexible para la web si la web iba a ser una opción para el desarrollo de aplicaciones nativas en windows

• Hubo 3 ideas fundamentales

  1. Idea de Microsoft
  2. Diseño avanzado de Bos
  3. Adición de líneas de cuadricula de Linss

• Antes de que una recomendación candidata (Borrador Final) pueda convertirse en una recomendación propuesta, la W3C necesita ver al menos dos implementaciones independiendientes e interoperables

• Hubo un cambio fundamental con CSS Grid

  • Jen Simmons ⇒ Colocó muchas demostraciones que creó para CSS Grid en la web

• Sin el entusiasmo de los desarrolladores, proveedores de navegadores son reacios a gastar dinero para ver si la idea gana terreno

• Los navegadores empezaron a sacar su compatible con los navegadores

RESUMEN: La adopción de CSS Grid fue progresiva, fue algo que se tenía la idea de crear un layout de este tipo. Gracias al gran recibimiento que tuvo los proveedores de navegadores decidieron invertir en esta característica.

.