Accede a la cuadrícula de CSS

Alex Danilo

Cuando se compila una aplicación web, una de las primeras cosas que se necesita es una manera de diseñar el contenido de tu app.

Muchos diseñadores usan cuadrículas imaginarias para diseñar el 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 esto, produjo el Módulo de diseño de cuadrícula de CSS, que ahora está surgiendo en los navegadores.

Esta función está disponible para probarla en Chrome detrás de una función experimental experimental. También se implementa en IE a partir de la versión 10 y es probable que pronto esté disponible en la mayoría de los navegadores.

Resumen ejecutivo

  • CSS Grid Layout 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 se puede superponer (lo que permite un diseño que es imposible con otros métodos).
  • Grid Layout es rápido

Aquí encontrarás un video con una descripción general en el que se explica mucho cómo funciona el diseño de cuadrícula de CSS (aquí encontrarás las diapositivas:

Probar

El uso del diseño de cuadrícula de CSS en Chrome ahora es sencillo. 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:

Imagen de la opción de marca experimental

Simplemente haz clic en Habilitar para activar la función experimental. Se te pedirá que reinicies el navegador, como el siguiente:

Imagen del botón Reiniciar

Ahora haz clic en el botón Reiniciar ahora para reiniciar el navegador y podrás probar el diseño de cuadrícula de CSS.

Envíanos tu opinión

CSS Grid Layout es una nueva primitiva genial para el contenido web, pero, como de costumbre, a todos nos interesa saber qué opinan los desarrolladores al respecto. Existen muchas maneras de enviar comentarios: deja un comentario aquí, envía un correo electrónico a la lista del grupo de trabajo de CSS de W3C con "[css-grid]" en el asunto, registra errores o publica un tweet y tuitea lo que piensas. Esperamos ver los excelentes diseños que crees con esta nueva función súper útil.