Sådan oprettes et simpelt Gantt-diagram ved hjælp af CSS Grid

Et Gantt-diagram er en praktisk type søjlediagram, der bruges i projektledelse til fremvisning af en tidsplan for opgaver. Dette diagram visualiserer projektaktiviteter som kaskaderende vandrette bjælker med bredde, der viser projektets varighed.

Som front-end webdesigner eller udvikler kan du bruge Gantt-diagrammer til at styre projekter og forbedre produktiviteten i dit team.

I denne artikel vil jeg vise dig, hvordan du opretter et simpelt Gantt-diagram ved hjælp af CSS Grid Layout-systemet - ingen eksterne biblioteker eller andet fnug, bare ren CSS.

Du kan henvise til denne vejledning for at forstå, hvordan du bruger layoutsystemet til at anvende CSS-regler.

Diagrammet viser en typisk softwareudviklings livscyklusproces fra januar til december.

Her er et skærmbillede af, hvordan Gantt-diagrammet ser ud i slutningen af ​​denne vejledning:

Lad os komme igang!

Trin 1: Opret en container div

Lad os starte med at oprette et container div- element til Gantt-diagrammet:

Lad os tilføje nogle CSS-styling til det:

.container { max-width: 1200px; min-width: 650px; margin: 0 auto; padding: 50px; }

Trin 2: Opret et diagram div

Lad os oprette en div inde i den overordnede containerog navngiv det. Det er her, alle de resterende handlinger skal finde sted.

Lad os tilføje nogle CSS-styling til det:

.chart { display: grid; border: 2px solid #000; position: relative; overflow: hidden; } 

Bemærk, at jeg har indstillet visningsegenskaben for klassen til gitter. Derfor bliver alle dens direkte børn automatisk gitterartikler .

Trin 3: Opret diagrammets rækker

Lad os starte med at oprette den første række, som vil være overskriften på Gantt-diagrammet.

 JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember 

Bemærk, at jeg har leveret 12 span- elementer, der krydser hele rækken og viser månederne for projektets varighed - fra januar til december.

Her er dens 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; }

Bemærk, at jeg brugte   gitter-skabelon-kolonnegenskaben til at specificere bredden og antallet af kolonner i gitterlayoutet.

Lad os se, hvordan det ser ud i en browser indtil videre:

Lad os derefter tilføje linjer, der kører i hele diagrammet i en kasselignende stil, som hjælper med at fremvise varigheden af ​​hvert projekt.

Jeg brugte også 12 span- elementer til oprettelse af linjerne.

Her er dens 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); }

Lad os se output i en browser:

Trin 4: Tilføj postelementer

Lad os endelig tilføje de emner, der illustrerer en årelang proces med at oprette noget software.

For eksempel er her, hvordan jeg tilføjede det første postelement:

 1 
    
  • Planning

Let me describe what is happening in the code above:

  • First, the encompassing div element has a class of chart-row, which I illustrated earlier.
  • The div with a class of chart-row-item is used for numbering the entry items on the Gantt chart. Here is its 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; }
  • To show tasks on the Gantt chart, I created an unordered list and styled it to display a horizontal bar, with its length showing the duration of the task.

Here is the CSS styling for the chart-row-bars class:

.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; }
  • The entry item is defined in the li tag. Here is its CSS styling:
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; }

Notice that I’ve used the grid-column property to specify the duration of the project.

For example, a property of  grid-column: 3/9; like the “Development” entry, spans a task across the grid from March to August.

Here is how the first entry item looks in a browser:

I added the other entries on the chart following the same process as the first entry. Ultimately, it resulted into a nice-looking Gantt chart, just like the image I showed earlier.

Wrapping up

That’s it! You can view the entire code for this tutorial on CodePen:

As you’ve seen, creating a Gantt chart using CSS Grid is not complicated. With this type of chart, you can manage your web development projects effectively and ensure that everyone is on track toward accomplishing the stipulated objectives.

Desuden kan Gantt-diagrammer også bruges i andre industrier til at styre projekter. For eksempel, hvis du sælger komposttoiletter, kan du bruge Gantt-diagrammer til at fremvise antallet af salg, der er foretaget over en periode.

Selvfølgelig har jeg lige skrabet overfladen om de ting, du kan opnå med Gantt-diagrammer.

Der er flere andre justeringer, du kan lave til Gantt-diagrammer, der passer til dine specifikke krav og projektets mål. For eksempel kan du bruge dem til at vise forholdet mellem forskellige opgaver, og hvordan færdiggørelsen af ​​en er afhængig af en anden, vise hvordan ressourcer kan tildeles til succes for projekter og vise klare projektkrav, der sikrer, at alle er på samme side.

Har du spørgsmål eller kommentarer?

Kontakt os via Twitter nedenfor, så gør jeg mit bedste for at svare.