Cuando compilas una aplicación web, una de las primeras cosas que necesitas es una forma de diseñar el contenido de tu app.
Muchos diseñadores usan cuadrículas imaginarias para diseñar contenido, ya sea para un sitio o una aplicación. El grupo de CSS ha trabajado arduamente para facilitar los diseños y, como parte de eso, produjo el módulo de diseño de cuadrícula de CSS, que ahora está apareciendo en los navegadores.
Esta función está disponible para probarla en Chrome con una marca experimental. También se implementó en IE desde la versión 10 y es probable que pronto esté disponible en la mayoría de los navegadores.
Resumen ejecutivo
- El diseño de cuadrícula de CSS te permite definir filas y columnas para tu diseño.
- Las cuadrículas se pueden adaptar para aprovechar el espacio disponible.
- El orden del contenido puede ser independiente del orden de visualización del contenedor de cuadrícula.
- Los diseños pueden cambiar en función de las consultas de medios, lo que facilita el diseño responsivo.
- El contenido puede superponerse (lo que habilita un diseño imposible con otros métodos).
- El diseño de cuadrícula es rápido
Este es un video de descripción general en el que se explica mucho sobre cómo funciona el diseño de cuadrícula de CSS (las diapositivas están aquí:
Probar
Usar el diseño de cuadrícula de CSS en Chrome ahora es fácil. Lo primero que debes hacer es activar la marca experimental para habilitar la función.
Primero, carga la URL chrome://flags y desplázate hacia abajo hasta la opción para Habilitar funciones experimentales de la plataforma web, como se muestra a continuación:
Solo haz clic en Habilitar para activar la marca. Deberías ver un mensaje para reiniciar el navegador que se ve de la siguiente manera:
Ahora, haz clic en el botón Relaunch Now para reiniciar el navegador y estará todo listo para probar el diseño de cuadrícula de CSS.
Envíanos tu opinión
El diseño de cuadrícula de CSS es una nueva primitiva excelente para el contenido web, pero, como de costumbre, nos interesa saber qué piensan los desarrolladores al respecto. Hay muchas formas de enviar comentarios: deja un comentario aquí, envía un correo electrónico a la lista del grupo de trabajo de CSS del W3C con "[css-grid]" en el asunto, registra errores o escribe en tu blog y twittea lo que piensas al respecto. Esperamos ver los diseños increíbles que crees con esta nueva función muy útil.