Hogyan készítsünk egy egyszerű Gantt-diagramot a CSS Grid segítségével

A Gantt-diagram egy praktikus sávdiagram, amelyet a projektmenedzsmentben használnak a feladatok ütemezésének bemutatására. Ez a diagram kaszkád vízszintes sávként jeleníti meg a projekt tevékenységeit, szélességükkel a projekt időtartamát ábrázolva.

Kezelői webtervezőként vagy fejlesztőként a Gantt-diagramokat használhatja a projektek kezeléséhez és a csapat termelékenységének növeléséhez.

Ebben a cikkben bemutatom, hogyan hozhat létre egyszerű Gantt-diagramot a CSS Grid Layout rendszer használatával - nincsenek külső könyvtárak vagy egyéb bolyhok, csak tiszta CSS.

Hivatkozhat erre az oktatóanyagra, hogy megismerje, hogyan használhatja az elrendezési rendszert a CSS-szabályok alkalmazásához.

A diagram egy tipikus szoftverfejlesztési életciklus-folyamatot mutat be, januártól decemberig.

Itt van egy képernyőkép arról, hogyan fog kinézni a Gantt-diagram az oktatóanyag végén:

Kezdjük el!

1. lépés: Hozzon létre egy tároló div

Kezdjük egy konténer div elem létrehozásával a Gantt-diagramhoz:

Adjunk hozzá néhány CSS-stílust:

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

2. lépés: Hozzon létre egy diagram div

Hozzunk létre egy div-t az átfogó tartály belsejébenés nevezze el diagramnak. Itt fog történni az összes többi akció.

Adjunk hozzá néhány CSS-stílust:

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

Figyelje meg, hogy az osztály megjelenítési tulajdonságát rácsra állítottam. Következésképpen minden közvetlen gyermeke automatikusan rácselemekké válik .

3. lépés: Hozza létre a diagram sorait

Kezdjük az első sor létrehozásával, amely a Gantt-diagram címe lesz.

 JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember 

Figyelje meg, hogy 12 span elemet adtam meg , amelyek keresztezik a teljes sort, bemutatva a projekt időtartamának hónapjait - januártól decemberig.

Itt van a 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; }

Vegye figyelembe, hogy a rács-sablon-oszlopok tulajdonságot használtam   a rács elrendezésében az oszlopok szélességének és számának megadásához.

Lássuk, hogyan néz ki eddig egy böngészőben:

Ezután adjunk hozzá olyan vonalakat, amelyek a diagram egészében dobozszerű stílusban futnak, ami segít bemutatni az egyes projektek időtartamát.

A vonalak létrehozásához 12 span elemet is használtam .

Itt van a 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); }

Lássuk a kimenetet egy böngészőben:

4. lépés: Adjon meg bejegyzési tételeket

Végül tegyük hozzá azokat a tételeket, amelyek szemléltetik egy szoftver létrehozásának egy éves folyamatát.

Például így írtam hozzá az első bejegyzési tételt:

 1 
  • Planning

Hadd írjam le, mi történik a fenti kódban:

  • Először is, az átfogó div elemnek van egy diagram-sor osztálya , amelyet korábban szemléltettem.
  • A div egy diagram-sor-tétel osztályával a bejegyzési elemek számozására szolgál a Gantt-diagramon. Itt van a 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; }
  • A feladatok Gantt-diagramon való megjelenítéséhez létrehoztam egy rendezetlen listát, és egy vízszintes sáv megjelenítésére formáztam, amelynek hossza a feladat időtartamát mutatja.

Itt található a diagram-sor-sávok osztályának CSS-stílusa :

.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; }
  • A bejegyzés elemét a li tag határozza meg . Itt van a CSS stílusa:
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; }

Vegye figyelembe, hogy a rács-oszlop tulajdonságot használtam a projekt időtartamának megadásához.

Például a  grid-column tulajdonság : 3/9; a „Fejlesztés” bejegyzéshez hasonlóan, március és augusztus között a hálózaton keresztül egy feladat lefed.

Így néz ki az első bejegyzéselem a böngészőben:

A diagram többi bejegyzését az első bejegyzéssel megegyező eljárással követtem. Végül egy szép megjelenésű Gantt-diagram lett, mint a korábban bemutatott kép.

Csomagolás

Ez az! Az oktatóanyag teljes kódját a CodePen oldalon tekintheti meg:

Mint látta, a Gantt-diagram létrehozása a CSS Grid segítségével nem bonyolult. Az ilyen típusú diagramokkal hatékonyan kezelheti webfejlesztési projektjeit, és biztosíthatja, hogy mindenki jó úton haladjon a kitűzött célok elérése felé.

Furthermore, Gantt charts can also be used in other industries to manage projects. For example, if you are selling composting toilets, you can use Gantt charts to showcase the number of sales made over a period of time.

Of course, I’ve just scratched the surface about the things you can achieve with Gantt charts.

There are several other tweaks you can make to Gantt charts to suit your specific requirements and project’s goals. For example, you can use them to show the relationship between various tasks and how the completion of one relies on another, show how resources can be allocated for the success of projects, and show clear project requirements that ensure everyone is on the same page.

Do you have any questions or comments?

Please get in touch via Twitter below and I’ll do my best to respond.