Како створити једноставну Ганттову табелу помоћу ЦСС мреже

Ганттов графикон је згодан тип тракастог графикона који се користи у управљању пројектима за приказивање распореда задатака. Овај графикон приказује пројектне активности као каскадне хоризонталне траке, са ширином која приказује трајање пројекта.

Као веб дизајнер или програмер, можете да користите Ганттове табеле за управљање пројектима и повећање продуктивности у вашем тиму.

У овом чланку ћу вам показати како да направите једноставну Ганттову табелу помоћу система ЦСС Грид Лаиоут - без спољних библиотека или другог пуха, само чисти ЦСС.

Можете се позвати на овај водич да бисте разумели како се користи систем изгледа за примену ЦСС правила.

Графикон ће приказати типичан процес животног циклуса развоја софтвера, од јануара до децембра.

Ево снимка заслона како ће Ганттов графикон изгледати на крају овог водича:

Хајде да почнемо!

1. корак: Направите див контејнера

Почнимо са стварањем див елемента контејнера за Ганттову табелу:

Хајде да му додамо неколико ЦСС стилова:

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

Корак 2: Направите див графикона

Направимо див унутар свеобухватног контејнераи дај му назив графикон. Овде ће се одиграти све преостале акције.

Хајде да му додамо неколико ЦСС стилова:

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

Приметите да сам својство приказа класе поставио на мрежу. Због тога ће сва његова директна деца аутоматски постати ставке мреже .

Корак 3: Креирајте редове графикона

Почнимо са стварањем првог реда, који ће бити наслов Ганттовог графикона.

 JanuaryFebruaryspan>March AprilMayJuneJuly AugustSeptemberOctober NovemberDecember 

Приметите да сам обезбедио 12 распонских елемената који ће попречно прећи цео ред, приказујући месеце трајања пројекта - од јануара до децембра.

Ево његовог ЦСС-а:

.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; }

Приметите да сам користио   својство грид-темплате-цолумнс да одредим ширину и број колона у распореду мреже.

Да видимо како то до сада изгледа у прегледачу:

Даље, додајмо редове који ће се проводити кроз графикон у стилу у облику оквира, што помаже у приказивању трајања сваког пројекта.

Такође сам користио 12 елемената распона за стварање линија.

Ево његовог ЦСС-а:

.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); }

Погледајмо излаз у прегледачу:

Корак 4: Додајте ставке уноса

На крају, додајмо ставке које илуструју једногодишњи процес стварања неког софтвера.

На пример, ево како сам додао прву ставку:

 1 
    
  • Planning

Дозволите ми да опишем шта се дешава у коду изнад:

  • Прво, обухватајући елемент див има класу графикона , што сам раније илустровао.
  • Див са класе Цхарт-ред-тачка се користи за нумерисање улазних ставки на гантограма. Ево његовог ЦСС-а:
.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; }
  • Да бих приказао задатке на Ганттовој табели, створио сам неуређену листу и обликовао је тако да приказује водоравну траку, чија дужина показује трајање задатка.

Ево ЦСС стила за класу цхарт-ров-барс :

.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; }
  • Ставка уноса је дефинисана у ли тагу. Ево његовог ЦСС стила:
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; }

Приметите да сам користио својство грид-цолумн да одредим трајање пројекта.

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.

Даље, Гант-ове карте могу се користити и у другим индустријама за управљање пројектима. На пример, ако продајете тоалете за компостирање, можете да користите Ганттове графиконе да бисте приказали број продаја остварених током одређеног временског периода.

Наравно, управо сам огребао површину о стварима које можете постићи Ганттовим картама.

Постоји неколико других подешавања која можете направити на Ганттовим картама у складу са вашим специфичним захтевима и циљевима пројекта. На пример, можете их користити да прикажете везу између различитих задатака и како се завршетак једног ослања на други, показују како се ресурси могу доделити за успех пројеката и јасне захтеве пројекта који осигуравају да су сви на истој страници.

Имате ли питања или коментаре?

Молимо вас да ступите у контакт путем Твиттер-а доле и потрудићу се да одговорим.