Cuando compilas una aplicación web, una de las primeras cosas que se necesita 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 estado trabajando 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á emergiendo en los navegadores.
Esta función se puede probar en Chrome con una función experimental experimental. También está implementado en IE desde la versión 10 y es probable que pronto lo esté 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 pueden adaptarse para aprovechar el espacio disponible
- El orden del contenido puede ser independiente del orden de visualización del contenedor de la 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 (habilitar un diseño que es imposible con otros métodos).
- Grid Layout es rápido
Aquí hay un video de descripción general en el que se explica en detalle cómo funciona el diseño de cuadrícula de CSS (las diapositivas están aquí:
Probar
Ahora es fácil usar el diseño de cuadrícula de CSS en Chrome. 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 Habilitar funciones experimentales de la plataforma web, como se muestra a continuación:
Simplemente haz clic en Habilitar para activar la función experimental. Deberías ver un mensaje para reiniciar el navegador, que se ve de la siguiente manera:
Ahora, haz clic en el botón Reiniciar ahora para reiniciar el navegador y estarás 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 excelente primitiva nueva para el contenido web, pero, como siempre, a todos nos gustaría saber qué piensan los desarrolladores al respecto. Existen 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 un blog y tuitea lo que piensas al respecto. Esperamos ver los fantásticos diseños que crees con esta nueva función muy útil.