Un diagrama de Gantt es un tipo útil de diagrama de barras que se utiliza en la gestión de proyectos para mostrar un cronograma de tareas. Este gráfico visualiza las actividades del proyecto como barras horizontales en cascada, con un ancho que representa la duración del proyecto.
Como diseñador o desarrollador web front-end, puede utilizar diagramas de Gantt para administrar proyectos y mejorar la productividad dentro de su equipo.
En este artículo, le mostraré cómo crear un diagrama de Gantt simple utilizando el sistema de diseño de cuadrícula CSS, sin bibliotecas externas u otras cosas, solo CSS puro.
Puede consultar este tutorial para comprender cómo usar el sistema de diseño para aplicar reglas CSS.
El gráfico mostrará un proceso típico del ciclo de vida del desarrollo de software, de enero a diciembre.
Aquí hay una captura de pantalla de cómo se verá el diagrama de Gantt al final de este tutorial:
¡Empecemos!
Paso 1: crea un div contenedor
Comencemos creando un elemento div contenedor para el diagrama de Gantt:
Agreguemos un poco de estilo CSS:
.container { max-width: 1200px; min-width: 650px; margin: 0 auto; padding: 50px; }Paso 2: crea un div de gráfico
Creemos un div dentro del contenedor generaly nombrarlo gráfico. Aquí es donde se llevarán a cabo todas las acciones restantes.
Agreguemos un poco de estilo CSS:
.chart { display: grid; border: 2px solid #000; position: relative; overflow: hidden; } Observe que configuré la propiedad de visualización de la clase en cuadrícula. En consecuencia, todos sus hijos directos se convertirán automáticamente en elementos de la cuadrícula .
Paso 3: crea las filas del gráfico
Comencemos creando la primera fila, que será el encabezado del diagrama de Gantt.
JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember Observe que he proporcionado 12 elementos de tramo que atravesarán toda la fila, mostrando los meses de duración del proyecto, de enero a diciembre.
Aquí está su CSS:
.chart-row { display: grid; grid-template-columns: 50px 1fr; background-color: #DCDCDC; }.chart-period { color: #fff; background-color: #708090 !important; border-bottom: 2px solid #000; grid-template-columns: 50px repeat(12, 1fr); } .chart-period > span { text-align: center; font-size: 13px; align-self: center; font-weight: bold; padding: 15px 0; }Observe que utilicé la propiedad grid-template-columnas para especificar el ancho y el número de columnas en el diseño de la cuadrícula.
Veamos cómo se ve en un navegador, hasta ahora:
A continuación, agreguemos líneas que se ejecutarán en todo el gráfico en un estilo de caja, lo que ayuda a mostrar la duración de cada proyecto.
También utilicé 12 elementos de tramo para crear las líneas.
Aquí está su CSS:
.chart-lines { position: absolute; height: 100%; width: 100%; background-color: transparent; grid-template-columns: 50px repeat(12, 1fr);} .chart-lines > span { display: block; border-right: 1px solid rgba(0, 0, 0, 0.3); }Veamos la salida en un navegador:
Paso 4: agregar elementos de entrada
Finalmente, agreguemos los elementos que ilustran un proceso de un año de creación de software.
Por ejemplo, así es como agregué el primer elemento de entrada:
1
- Planning
Permítanme describir lo que está sucediendo en el código anterior:
- Primero, el elemento div que lo abarca tiene una clase de fila de gráfico , que ilustré anteriormente.
- El div con una clase de elemento de fila de gráfico se utiliza para numerar los elementos de entrada en el diagrama de Gantt. Aquí está su CSS:
.chart-row-item { background-color: #808080; border: 1px solid #000; border-top: 0; border-left: 0; padding: 20px 0; font-size: 15px; font-weight: bold; text-align: center; }- Para mostrar las tareas en el diagrama de Gantt, creé una lista desordenada y le di un estilo para mostrar una barra horizontal, con su longitud mostrando la duración de la tarea.
Aquí está el estilo CSS para la clase chart-row-bars :
.chart-row-bars { list-style: none; display: grid; padding: 15px 0; margin: 0; grid-template-columns: repeat(12, 1fr); grid-gap: 10px 0; border-bottom: 1px solid #000; }- El elemento de entrada se define en la etiqueta li . Aquí está su estilo CSS:
li { font-weight: 450; text-align: left; font-size: 15px; min-height: 15px; background-color: #708090; padding: 5px 15px; color: #fff; overflow: hidden; position: relative; cursor: pointer; border-radius: 15px; } ul .chart-li-one { grid-column: 1/2; background-color: #588BAE; }Observe que he usado la propiedad grid-column para especificar la duración del proyecto.
Por ejemplo, una propiedad de grid-column: 3/9; como la entrada "Desarrollo", abarca una tarea a lo largo de la cuadrícula de marzo a agosto.
Así es como se ve el primer elemento de entrada en un navegador:
Agregué las otras entradas en el gráfico siguiendo el mismo proceso que la primera entrada. Al final, resultó en un diagrama de Gantt atractivo, como la imagen que mostré anteriormente.
Terminando
¡Eso es! Puede ver el código completo de este tutorial en CodePen:
Como ha visto, crear un diagrama de Gantt utilizando CSS Grid no es complicado. Con este tipo de gráfico, puede administrar sus proyectos de desarrollo web de manera efectiva y asegurarse de que todos estén en camino hacia el logro de los objetivos estipulados.
Además, los diagramas de Gantt también se pueden utilizar en otras industrias para gestionar proyectos. Por ejemplo, si vende inodoros de compostaje, puede utilizar diagramas de Gantt para mostrar la cantidad de ventas realizadas durante un período de tiempo.
Por supuesto, acabo de arañar la superficie sobre las cosas que puede lograr con los diagramas de Gantt.
Hay varios otros ajustes que puede realizar en los diagramas de Gantt para satisfacer sus requisitos específicos y los objetivos del proyecto. Por ejemplo, puede usarlos para mostrar la relación entre varias tareas y cómo la finalización de una se basa en otra, mostrar cómo se pueden asignar recursos para el éxito de los proyectos y mostrar requisitos claros del proyecto que garantizan que todos estén en la misma página.
¿Tienes alguna pregunta o comentario?
Póngase en contacto a través de Twitter a continuación y haré todo lo posible para responder.