Kuinka luoda yksinkertainen Gantt-kaavio CSS-ruudukon avulla

Gantt-kaavio on kätevä pylväsdiagrammi, jota käytetään projektinhallinnassa tehtävien aikataulun esittelyyn. Tämä kaavio havainnollistaa projektin aktiviteetteja CSS-vaakapalkkeina ja leveys kuvaa projektin kestoa.

Etupään verkkosuunnittelijana tai kehittäjänä voit käyttää Gantt-kaavioita projektien hallintaan ja tiimisi tuottavuuden parantamiseen.

Tässä artikkelissa aion näyttää, kuinka luoda yksinkertainen Gantt-kaavio CSS Grid Layout -järjestelmällä - ei ulkoisia kirjastoja tai muita fluffeja, vain puhdas CSS.

Voit viitata tähän opetusohjelmaan ymmärtääksesi, miten ulkoasujärjestelmää käytetään CSS-sääntöjen soveltamiseen.

Kaavio näyttää tyypillisen ohjelmistokehityksen elinkaariprosessin tammikuusta joulukuuhun.

Tässä on kuvakaappaus siitä, miten Gantt-kaavio näyttää tämän opetusohjelman lopussa:

Aloitetaan!

Vaihe 1: Luo säilön div

Aloitetaan luomalla kontti div- elementti Gantt-kaavioon:

Lisätään siihen CSS-muotoilu:

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

Vaihe 2: Luo kaavio div

Luodaan div kattavan astian sisäänja nimeä se kaavio. Täällä kaikki jäljellä olevat toimet tapahtuvat.

Lisätään siihen CSS-muotoilu:

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

Huomaa, että olen asettanut luokan näytön ominaisuudeksi ruudukon. Näin ollen kaikista sen suorista lapsista tulee automaattisesti ruudukko-osia .

Vaihe 3: Luo kaavion rivit

Aloitetaan luomalla ensimmäinen rivi, joka on Gantt-kaavion otsikko.

 JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember 

Huomaa, että olen toimittanut 12 span- elementtiä, jotka poikittaavat koko rivin ja osoittavat projektin keston kuukaudet - tammikuusta joulukuuhun.

Tässä on sen 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; }

Huomaa, että käytin   ruudukko-malli-sarakkeita -ominaisuutta määritelläksesi ruudukon asettelun leveyden ja sarakkeiden lukumäärän.

Katsotaanpa, miltä se näyttää selaimessa toistaiseksi:

Seuraavaksi lisätään rivit, jotka kulkevat koko kaaviossa laatikkomaisella tyylillä, mikä auttaa esittelemään kunkin projektin keston.

Käytin myös 12 span- elementtiä viivojen luomiseen.

Tässä on sen 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); }

Katsotaanpa tuotos selaimessa:

Vaihe 4: Lisää merkinnät

Lisätään lopuksi kohteet, jotka kuvaavat vuoden kestävää prosessia joidenkin ohjelmistojen luomisessa.

Esimerkiksi näin lisäsin ensimmäisen merkinnän kohteen:

 1 
    
  • Planning

Haluan kuvata, mitä yllä olevassa koodissa tapahtuu:

  • Ensinnäkin kattavalla div- elementillä on kaavio-riviluokka , jonka kuvasin aiemmin.
  • Div jossa luokan kaavio-rivin-erä käytetään numerointia merkintä kohteet janakaaviota. Tässä on sen 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; }
  • Jotta voin näyttää tehtäviä Gantt-kaaviossa, loin järjestämättömän luettelon ja muotoilin sen näyttämään vaakapalkin, jonka pituus osoittaa tehtävän keston.

Tässä on CSS-muotoilu kaavion rivirivipalkkeille:

.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; }
  • Merkintäkohde määritetään li- tagissa. Tässä on sen CSS-muotoilu:
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; }

Huomaa, että olen määrittänyt projektin keston grid-column- ominaisuudella.

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.

Lisäksi Gantt-kaavioita voidaan käyttää myös muilla teollisuudenaloilla projektien hallinnassa. Jos esimerkiksi myyt kompostikäymälöitä, voit näyttää Gantt-kaavioiden avulla tietyn ajanjakson aikana tehtyjen myyntien määrän.

Tietenkin olen juuri naarmuuntunut pintoihin asioista, jotka voit saavuttaa Gantt-kaavioilla.

Gantt-kaavioihin on useita muita parannuksia, jotka sopivat sinun erityistarpeisiisi ja projektisi tavoitteisiin. Voit esimerkiksi käyttää niitä osoittamaan suhdetta eri tehtävien välillä ja kuinka yhden suorittaminen riippuu toisesta, kuinka resursseja voidaan kohdentaa projektien menestykseen, ja näyttää selkeät projektivaatimukset, jotka varmistavat, että kaikki ovat samalla sivulla.

Onko sinulla kysyttävää tai kommentteja?

Ota yhteyttä alla olevan Twitterin kautta ja teen parhaani vastata.