css网格_如何使用CSS网格创建简单的甘特图

css网格

A Gantt chart is a handy type of bar chart that is used in project management for showcasing a schedule of tasks. This chart visualizes project activities as cascading horizontal bars, with width depicting the project’s duration.

甘特图是一种方便的条形图，在项目管理中用于显示任务计划。 此图表将项目活动可视化为级联的水平条，宽度表示项目的持续时间。

As a front-end web designer or developer, you can make use of Gantt charts to manage projects and enhance the productivity within your team.

作为前端Web设计师或开发人员，您可以使用甘特图来管理项目并提高团队内部的生产力。

In this article, I’m going to show you how to create a simple Gantt chart using the CSS Grid Layout system—no external libraries or other fluff, just pure CSS.

在本文中，我将向您展示如何使用CSS Grid Layout系统创建简单的甘特图-无需外部库或其他绒毛，而只需使用纯CSS。

You can reference this tutorial to understand how to use the layout system for applying CSS rules.

您可以参考本教程，以了解如何使用布局系统来应用CSS规则。

The chart will show a typical software development life cycle process, from January to December.

该图表将显示从1月到12月的典型软件开发生命周期过程。

Here is a screenshot of how the Gantt chart will look at the end of this tutorial:

以下是甘特图在本教程结尾处的屏幕截图：

Let’s get started!

让我们开始吧！

步骤1：建立容器div (Step 1: Create a container div)

Let’s start by creating a container div element for the Gantt Chart:

首先，为甘特图创建一个容器div元素：

<div class="container">

</div>

Let’s add some CSS styling to it:

让我们为其添加一些CSS样式：

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

步骤2：建立图表div (Step 2: Create a chart div)

Let’s create a div inside the overarching container and name it chart. This is where all the remaining actions are going to take place.

让我们在总体容器中创建一个div 并命名为图表。 这是所有其余动作将要发生的地方。

<div class="chart">

</div>

Let’s add some CSS styling to it:

让我们为其添加一些CSS样式：

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

Notice that I’ve set the display property of the class to grid. Consequently, all its direct children will automatically become grid items.

注意，我已经将类的显示属性设置为grid。 因此，其所有直接子代将自动成为网格项 。

第3步：创建图表的行 (Step 3: Create the chart’s rows)

Let’s start by creating the first row, which will be the heading of the Gantt chart.

让我们从创建第一行开始，这将是甘特图的标题。

<div class="chart-row chart-period">
<div class="chart-row-item">
    </div><span>January</span><span>February</span>span>March</span>
    <span>April</span><span>May</span><span>June</span><span>July</span>
    <span>August</span><span>September</span><span>October</span>
    <span>November</span><span>December</span>
</div>

Notice that I’ve provided 12 span elements that will transverse the entire row, showing the months of the project’s duration—from January to December.

请注意，我提供了12个跨整个行的span元素，显示了项目持续时间的月份(从1月到12月)。

Here is its CSS:

这是它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;   
}

Notice that I used the  grid-template-columns property to specify the width and the number of columns in the grid layout.

请注意，我使用grid-template-columns属性指定了网格布局中的宽度和列数。

Let’s see how it looks in a browser, so far:

到目前为止，让我们看一下它在浏览器中的外观：

Next, let’s add lines that will run throughout the chart in a box-like style, which helps showcase the duration of each project.

接下来，让我们添加一些线条，这些线条将以类似盒子的样式贯穿整个图表，这有助于展示每个项目的持续时间。

I also used 12 span elements for creating the lines.

我还使用了12个span元素来创建线条。

<div class="chart-row chart-lines"> 
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span><span></span>
    <span></span><span></span>	<span></span>    
</div>

Here is its CSS:

这是它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);
}

Let’s see the output in a browser:

让我们在浏览器中查看输出：

步骤4：添加条目 (Step 4: Add entry items)

Finally, let’s add the items that illustrate a year-long process of creating some software.

最后，让我们添加一些项目，这些项目说明了长达一年的创建某些软件的过程。

For example, here is how I added the first entry item:

例如，这是我添加第一个条目的方式：

<div class="chart-row">  
	<div class="chart-row-item">1</div> 
	<ul class="chart-row-bars">    
		<li class="chart-li-one">Planning</li>
	</ul>
</div>

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.

  首先，包含div的元素具有一类chart-row ，我已在前面进行了说明。

• The div with a class of chart-row-item is used for numbering the entry items on the Gantt chart. Here is its CSS:

  带有一类图表行项目的div用于对甘特图上的条目进行编号。 这是它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类CSS样式：

.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标记中定义。 这是它CSS样式：

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.

注意，我已经使用grid-column属性指定项目的持续时间。

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

例如， grid-column的属性：3/9; 像“开发”条目一样，从3月到8月跨越网格。

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:

而已！ 您可以在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.

如您所见，使用CSS Grid创建甘特图并不复杂。 使用这种类型的图表，您可以有效地管理Web开发项目，并确保每个人都按计划完成目标。

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.

请通过下面的Twitter与我们联系，我会尽力答复。

翻译自: https://www.freecodecamp.org/news/create-gantt-chart-using-css-grid/

css网格