作为前端 Web 设计人员或开发人员，你可以使用甘特图来管理项目并提高团队的工作效率。

在本文中，我将向你展示如何用 CSS 布局绘制简单的甘特图。本文只需使用纯 CSS，不需要外部库或其它杂项。

你可以参考本教程  ，学习如何使用布局系统来应用 CSS 规则。

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

以下是本课程结束时甘特图的屏幕截图：

让我们开始吧！

步骤1: 创建类名为 container 的 div 元素

首先，为甘特图创建一个类名为 container 的 div 元素：

<div class="container">

为其添加 CSS 样式：

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

创建类名为 chart 的 div 元素

在总容器里创建一个 div 元素，并将其类名设置为 chart。步骤如下：

<div class="chart">

为其添加 CSS 样式：

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

注意：我已设置 chart 类的 display 属性为 grid.  因此，其所有直接子元素将自动成为网格项。

Step 3: 为甘特图创建行

创建第一行，即甘特图的标题行。

<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>

请注意，我已经提供了 12 个 span 元素，它们将横跨整个行，显示项目持续的月份，即从 1 月到 12 月。

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

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

到目前为止，它在浏览器中显示如下：

接下来，添加一些纵向贯穿整个图表的线条，使其看上去像盒子一样，这有助于显示每个项目的持续时间。

我仍旧使用 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>

CSS 样式如下：

.chart-lines { 
    position: absolute;    height: 100%;    width: 100%;    background-color: transparent;    grid-template-columns: 50px repeat(12, 1fr);}

其在浏览器中的效果如下：

步骤 4：添加条目项

最后，让我们添加条目来说明长达一年的软件开发过程。

以下例子展示我如何添加条目 1：

<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>

让我描述一下上面代码中发生了什么：

• 首先，我在前面已经介绍过了，条目 1 中的 div 元素有一个 chart-row 类。
• 含有 chart-row-item 类的 div 用于对甘特图的条目进行编号。其样式如下：

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

• 条目项定义在 li 标签里，其样式如下：

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

请注意，我使用了 grid-column 属性来指定项目持续时间。

例如，在“开发”条目中，grid-column 属性为 grid-column: 3/9;  这使该任务从网格的 3 月横跨到 8 月。

条目 1 在浏览器中的显示效果如下：

我采用与条目 1 一样的方法将其他条目添加到图表中。最终，它生成了一个漂亮的甘特图，正如我早前展示的一样。

总结

就是这样！你可以在 CodePen 上查看本教程的全部代码：

如你所见，用 CSS 绘制甘特图并不复杂。你可以使用它来高效管理 Web 开发项目,并确保每个人都朝着规定的目标前进。

此外，甘特图也可于其它行业的项目管理。例如，如果你是一位销售员，可以使用甘特图来显示一段时期的销售数量。

当然，甘特图可以用来做很多事情，我只是触及了一些皮毛。

你还可以对甘特图稍作调整，以满足特定需求和项目目标。例如，你可以用它们来显示各种任务之间的关系、一些任务的完成如何依赖另一个任务、如何为项目的成功分配资源以及确保每个人在同一页上从而显示清晰的项目要求。

原文：How to Create a Simple Gantt Chart Using CSS Grid，作者：Alfrick Opidi

我最近在 HereWeCode 的 Instagram 账号上问了这个问题：“你想在这个账号上看到哪些编程教程？”

一位关注者回答道：“如何让编程变得有趣？”

我感到很惊讶，因为我从来不会问这样的问题。

我花了几个小时搜索让编程变得更有趣的不同方法，想要在这篇文章里和大家分享。

编程令人兴奋的原因

在我看来，总的来说，信息技术都挺令人兴奋的。计算机是我们这个世界上最重要的物品之一。

我觉得编程并不是人人都具备的技能，能够使用代码开发自己的项目是这个世界给予我们的机会。借助信息技术，一切皆有可能。而且我们处在一个关键时期：目前，开发者的数量不足以满足需求。

编程是一种创造性技能，能够参与开发一个项目总是令人兴奋。虽然移动应用程序和网站无处不在，但我与许多人交谈过，他们并不知道这些东西是如何工作的。

我说这些话的语气似乎有点夸大其词，但是这些确实就是编程令我觉得开心的原因。

这就是为什么我如此热衷于创作编程教育内容的一个原因。

如何让编程更有趣

想了一下，虽然现在我对编程充满激情，但在我的记忆中，它并不总是有趣的。

在我刚开始编程时，我常常会被一个问题困扰多日。有时我会完全失去希望，说：“编程并不适合我。我尝试过所有方案，但还是行不通。我并不那么善于编程。”

如果你面临这样的情况，我可以告诉你，这种情形每个人都经历过。

导致这种情况的原因是多种多样的，例如，当你太过频繁使用某种语言或框架而对其产生厌烦的时候。

不管怎样，不要太担心。在这里，我列出了几个小贴士，可以在你需要时给你带来一定的乐趣。

勤于练习

写代码就像打高尔夫球。开始时，它并不有趣，你需要学习很多东西：以这种方式击球应使用哪个球杆、怎样的站姿比较好......随着你进一步练习，快乐随之而来，你开始理解这些事物，并从中获得乐趣。

光阅读代码是不够的，要试着运行代码

有的人刚开始编程时，会看一些课程，然后只是简单地阅读课程中的代码，这种方式问题比较大。

在学习编程时，试着自己编写和运行代码。花点时间去做这件事吧！你会更好地理解它，并从尝试修改代码来创建程序中获得乐趣。

这里还有另一个例子：当你在 GitHub 上搜索一段代码时，为什么不试着自己写出来呢？从别人的代码中学习经验，并应用到自己的项目中，这也是一种乐趣。

为你的项目或学习生涯增添几分乐趣

当你对某种技术感到厌烦或想增加知识时，你可以学习新库、新框架或新语言。这会是一个有趣的过程，可以帮助你尝试新事物并从中获得乐趣。

但是，我不建议你只是跟着一门课程去学习，因为光是学习的话，可能几天之后你就会感到厌烦。每天或者每学完一个章节，你可以开发一些小项目来激励自己，自由发挥你的想象力。

试着找一些有趣的项目来做。例如，假设你正在学习 JavaScript 的基础知识，虽然这些技能最重要，但是学习起来没那么有趣。但是，当你知道如何获取用户输入并在控制台打印，为什么不试着创建一个回答用户问题的简单“聊天机器人”呢？

当我搜索该问题答案时，我从一个 Quora 用户那里找到了这个故事，我很喜欢。这是一个关于如何让学习更有趣的很好的例子。

“此外，最糟糕的是学习新事物，这通常充满挑战，并且你的进展会比你期望的要慢得多。为了使这一过程变得有趣，我通常会欺骗我的大脑。

例如，当我学习汇编语言时，我们要编写一个微型硬件显示程序——这非常枯燥，你必须学习硬件手册，它具有输入和输出，而你能实现的是在屏幕上显示几个字母。

但我挑战自己去掌握这个东西，为了做到这一点，我想出了自己的“特殊练习”。我没有单纯在显示器上显示  10101，而是想出了一个主意：写一些更愚蠢、更幼稚的东西。比如：现在就给我打电话，某某某。这些字在屏幕上闪烁并移动。这比课堂上布置的实际任务要高级得多。我用这种愚蠢的东西来激励自己学习汇编语言有关的所有知识，这很有用！:)” —马库斯·比尔（Marcus Biel）

经常自我挑战

开发者总是需要学习新知识，使自己不被淘汰。一切都在快速发展，你不能被抛在后面。当你不再觉得自己在成长或学习时，就会感到无聊或缺乏乐趣。

为了对抗这种感觉，你可以尝试实现你还没有达到的目标。

例如，如果你从未参加过开源项目，则可以在 GitHub 上搜索项目并首次贡献你的力量（译者注：比如你可以为 GitHub 上 star 数最多的开源项目 freeCodeCamp 做贡献）。

当你的贡献被项目团队认可时，你的满足感会倍增。如果你解决了一个以前没有人解决的问题，可能会帮助数十甚至数百人。

你也可以参加编程比赛，或使用编程网站（ HackerRank，CodingGame，或者 Project Euler）（译者注：freeCodeCamp 课程中就有 Project Euler 这部分内容） 挑战自己。

从头开始创建个人项目

作为一名开发者，如果你只是在公司项目中参与一小部分工作，你可能会感到沮丧。

也许你一直梦想做一个项目，但却从未花时间去做，为什么不尝试动手做出来呢？你会发现，创建自己梦想中的项目是很有趣的事情。养成良好的编程习惯也是一个值得追求的目标。

如果你不知道创建什么项目，请尝试找到你喜欢的主题，例如：

• 如果你喜欢电子游戏，则可以试着创建一个
• 如果你对教育感兴趣，为什么不围绕代码创建教程呢
• 如果你喜欢硬件和电子产品，为什么不构建一个 Arduino 或“树莓派”呢

“编程就像写作——主题比写作本身要重要得多。”—— lifeisstillgood

定义目标

这一点在我所有关于提高工作效率的文章中都有提到。你必须定义目标。

如果一名开发者没有目标，他会挺难感觉舒适或者从工作中感觉到快乐。

寻找导师

如果你再也找不到编程的乐趣，导师可以激励你。

导师可以给你一个可以遵循的目标，并教给你最佳实践。他们还可以帮助你提高编程技能并推动你的职业生涯发展。

也许你想知道如何让你心中的“大牛”成为你的导师。

好吧，只要发个信息就可以了。

是的，是的，就这么简单。你觉得他们足以成为你的导师，这一点会让他们感到很开心。大多数情况下，他们会很乐于陪你一起成长。

保持充足的睡眠

当你处于一个恶性循环时，编程就变得不那么有趣了。有时候，你很难在工作中取得进步并茁壮成长。

早睡几个晚上或晚起几天，一切都会有显著的改善。

展示你的作品

有什么比一位开发者一个人呆在地下室中而失去所有希望更糟糕的呢？虽然这有点陈词滥调，但是，相信我，当你长时间为一个项目独自工作、从未将它展示给任何人时，它就会变得没那么有趣了。

这条小贴士与之前的那几条相似。当你分享自己的作品时，人们会给你建议或问你问题。这将对你具有挑战性，并帮助你设置新的目标。

写在最后

我试着总结一些基本技巧，以帮助你在编程时拥有乐趣。如果你有任何其它让编程更有趣的建议，请随时发表评论或给我发送消息。

你为什么认为编程令人兴奋？你是怎样让编程变得更有趣的？

如果你喜欢这篇文章，欢迎分享。

在 Twitter 和 Instagram上关注我，以免错过我发布的内容。

你可以在我的网站 herewecode.io 上找到其他类似的文章。

想要更多内容？

• 每周可以在我的 Instagram上获得一句带有建议的励志名言、几张幻灯片的简短教程和一位开发者的照片。
• 订阅新闻邮件，以获取最新的文章、课程、教程、技巧、图书、激励和其他独家内容。

原文：How to Make Programming More Exciting and More Fun，作者：Gaël Thomas