So erstellen Sie ein einfaches Gantt-Diagramm mithilfe des CSS-Rasters

Ein Gantt-Diagramm ist eine praktische Art von Balkendiagramm, das im Projektmanagement zur Darstellung eines Aufgabenplans verwendet wird. In diesem Diagramm werden Projektaktivitäten als kaskadierende horizontale Balken dargestellt, wobei die Breite die Projektdauer darstellt.

Als Front-End-Webdesigner oder -Entwickler können Sie Gantt-Diagramme verwenden, um Projekte zu verwalten und die Produktivität in Ihrem Team zu steigern.

In diesem Artikel werde ich Ihnen zeigen, wie Sie mit dem CSS-Grid-Layout-System ein einfaches Gantt-Diagramm erstellen - keine externen Bibliotheken oder andere Flusen, nur reines CSS.

In diesem Lernprogramm erfahren Sie, wie Sie das Layoutsystem zum Anwenden von CSS-Regeln verwenden.

Die Grafik zeigt einen typischen Lebenszyklusprozess der Softwareentwicklung von Januar bis Dezember.

Hier ist ein Screenshot davon, wie das Gantt-Diagramm am Ende dieses Tutorials aussehen wird:

Lass uns anfangen!

Schritt 1: Erstellen Sie ein Container-Div

Beginnen wir mit der Erstellung eines Container- Div- Elements für das Gantt-Diagramm:

Fügen wir etwas CSS-Stil hinzu:

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

Schritt 2: Erstellen Sie ein Diagramm div

Lassen Sie uns ein Div im übergeordneten Container erstellenund nenne es Diagramm. Hier werden alle verbleibenden Aktionen stattfinden.

Fügen wir etwas CSS-Stil hinzu:

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

Beachten Sie, dass ich die Anzeigeeigenschaft der Klasse auf Raster gesetzt habe. Folglich werden alle direkten untergeordneten Elemente automatisch zu Rasterelementen .

Schritt 3: Erstellen Sie die Zeilen des Diagramms

Beginnen wir mit der Erstellung der ersten Zeile, die die Überschrift des Gantt-Diagramms darstellt.

 JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember 

Beachten Sie, dass ich 12 Span- Elemente bereitgestellt habe , die die gesamte Zeile durchqueren und die Monate der Projektdauer anzeigen - von Januar bis Dezember.

Hier ist das 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; }

Beachten Sie, dass ich die   Eigenschaft grid-template-column verwendet habe , um die Breite und die Anzahl der Spalten im Rasterlayout anzugeben.

Mal sehen, wie es bisher in einem Browser aussieht:

Als Nächstes fügen wir Linien hinzu, die in einem kastenartigen Stil im gesamten Diagramm verlaufen, um die Dauer jedes Projekts darzustellen.

Ich habe auch 12 Span- Elemente zum Erstellen der Linien verwendet.

Hier ist das 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); }

Sehen wir uns die Ausgabe in einem Browser an:

Schritt 4: Fügen Sie Eintragselemente hinzu

Fügen wir abschließend die Elemente hinzu, die einen einjährigen Prozess zum Erstellen von Software veranschaulichen.

Hier ist zum Beispiel, wie ich den ersten Eintrag hinzugefügt habe:

 1 
  • Planning

Lassen Sie mich beschreiben, was im obigen Code passiert:

  • Erstens hat das umfassende div- Element eine Klasse von Diagrammzeilen , die ich zuvor dargestellt habe.
  • Das div mit einer Klasse von Diagrammzeilenelementen wird zum Nummerieren der Eintragselemente im Gantt-Diagramm verwendet. Hier ist das 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; }
  • Um Aufgaben im Gantt-Diagramm anzuzeigen, habe ich eine ungeordnete Liste erstellt und sie so gestaltet, dass ein horizontaler Balken angezeigt wird, dessen Länge die Dauer der Aufgabe angibt.

Hier ist das CSS-Styling für die Klasse der Diagrammzeilenleisten :

.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; }
  • Das Eintragselement wird im li- Tag definiert. Hier ist das 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; }

Beachten Sie, dass ich die Eigenschaft " Spaltenspalte" verwendet habe , um die Dauer des Projekts anzugeben.

Zum Beispiel eine Eigenschaft der  Rasterspalte: 3/9; Wie der Eintrag „Entwicklung“ erstreckt sich eine Aufgabe von März bis August über das gesamte Netz.

So sieht das erste Eintragselement in einem Browser aus:

Ich habe die anderen Einträge im Diagramm nach dem gleichen Verfahren wie beim ersten Eintrag hinzugefügt. Letztendlich ergab sich ein gut aussehendes Gantt-Diagramm, genau wie das Bild, das ich zuvor gezeigt habe.

Einpacken

Das ist es! Sie können den gesamten Code für dieses Tutorial auf CodePen anzeigen:

Wie Sie gesehen haben, ist das Erstellen eines Gantt-Diagramms mit CSS Grid nicht kompliziert. Mit dieser Art von Diagramm können Sie Ihre Webentwicklungsprojekte effektiv verwalten und sicherstellen, dass alle auf dem richtigen Weg sind, um die festgelegten Ziele zu erreichen.

Darüber hinaus können Gantt-Diagramme auch in anderen Branchen zum Verwalten von Projekten verwendet werden. Wenn Sie beispielsweise Komposttoiletten verkaufen, können Sie mithilfe von Gantt-Diagrammen die Anzahl der über einen bestimmten Zeitraum getätigten Verkäufe anzeigen.

Natürlich habe ich gerade die Oberfläche über die Dinge gekratzt, die Sie mit Gantt-Diagrammen erreichen können.

Es gibt mehrere andere Verbesserungen, die Sie an Gantt-Diagrammen vornehmen können, um Ihren spezifischen Anforderungen und Projektzielen zu entsprechen. Sie können sie beispielsweise verwenden, um die Beziehung zwischen verschiedenen Aufgaben und die Abhängigkeit einer Aufgabe von einer anderen zu zeigen, um zu zeigen, wie Ressourcen für den Erfolg von Projekten zugewiesen werden können, und um klare Projektanforderungen anzuzeigen, die sicherstellen, dass sich alle auf derselben Seite befinden.

Haben Sie Fragen oder Kommentare?

Bitte kontaktieren Sie uns unten über Twitter und ich werde mein Bestes geben, um zu antworten.