5 geniales generadores de cuadrícula CSS

No hay duda de que CSS Grid es una herramienta increíblemente poderosa y emocionante para los diseñadores web. Ha abierto un montón de nuevas posibilidades en términos de diseño. Sin embargo, entender la sintaxis puede ser un desafío, por decir lo menos. Si tiene dificultades, los generadores de cuadrícula CSS están aquí para ayudarlo. Con ellos, puede crear un diseño de cuadrícula visualmente, y escupirán el código correcto (o para simplificar aún más las cosas, use un top Creador de sitios web ).

Han aparecido muchas herramientas de este tipo y realmente son útiles, especialmente si no eres un experto en la sintaxis. A continuación, echamos un vistazo a las mejores opciones. ¿Querer aprender más? Mira nuestro guía completa de CSS Grid , consulte nuestra guía para alojamiento web servicios, para asegurarse de que tiene el correcto para las capacidades de su sitio, y si tiene muchos archivos multimedia, asegúrese de hacer una copia de seguridad en almacenamiento en la nube .

01. Layoutit! Generador de cuadrícula CSS

Layoutit! Generador de cuadrícula CSS



¡Comenzando nuestra lista está este generador de cuadrícula CSS de Layoutit! Con esta herramienta, selecciona interactivamente sus áreas de cuadrícula, usa botones para agregar columnas y filas, nombra sus áreas de cuadrícula. Luego puede descargar el código o guardar el diseño como un enlace permanente para compartir.

02. cssgr.id

cssgr.id

cssgr.id ofrece características similares a la herramienta anterior, pero un estilo de interfaz diferente (el que prefiera probablemente dependerá de sus gustos personales). Una característica útil de esta herramienta es que puede agregar texto de Lorem Ipsum. Es el trabajo del desarrollador con sede en Londres Dan Netherton.

03. Generador de plantillas de cuadrícula CSS

Generador de plantillas de cuadrícula CSS

Esta demostración de CodePen del desarrollador creativo Anthony Dugois es una opción bastante única en nuestra lista. Le permite crear el diseño de la cuadrícula principalmente utilizando una cadena que edita y luego coloca en su CSS como un valor para el áreas de plantilla de cuadrícula propiedad.

04. CSS Gridish

CSS Gridish

Este proyecto del equipo de IBM toma especificaciones de diseño de la cuadrícula de su producto y crea varios recursos para que los utilice su equipo. Estos recursos incluyen un archivo Sketch con mesas de trabajo y configuraciones de cuadrícula / diseño, código CSS / SCSS que usa CSS Grid con un respaldo de CSS flexbox, y también una extensión de Chrome.

05. Generador de diseño de cuadrícula CSS

Esta es una herramienta relativamente nueva de Dmitrii Bykov. Empiece creando 'pistas' (columnas y filas), luego agregue elementos y luego exporte el código. Se necesita un poco para acostumbrarse: el screencast de un minuto anterior es útil para ayudarlo a comenzar.

Generar nueva york

Generate, la galardonada conferencia para diseñadores web, regresa a Nueva York del 24 al 25 de abril. Haga clic en la imagen para reservar boletos

Este artículo fue publicado originalmente en neto , la revista más vendida del mundo para diseñadores y desarrolladores web. Comprar número 316 o suscribir .

Leer más: