日历是人类文明的主要工具之一。然后可以记住许多主要事宜，并从事宜的确切日期追溯到原形。
在本文中，我们将学习如何利用CSS Grid系统（最近在前端开拓职员中盛行的一种布局技能）来利用HTML和CSS设计日历。以下这天历的终极设计效果：
制作HTML
从图片中我们可以看出日历包含三个部分：月指标；事情日/周末指标；日期本身。
编写HTML的最佳方法是遵照精确的觉得。现在，我们将根据以下三个部分创建HTML：
我们还该当能够看到日历上网格的七个列的需求。
我们将重点放在上面的代码.day-of-week和.date-grid上面的代码上，由于现在我们只在评论辩论网格。
网格排列有两种创建CSS Box的方法。第一种方法是在内部组合元素.day-of-week并.date-grid 成为一个选择器。如果要这样做，我们可以安排display: grid。如果实行此操作，HTML将是什么样的：
我们该当避免这种方法，由于HTML失落去了它的构造意义，由于它结合起来，让我们考试测验保存.day-of-week并date-grid 作为一个独立的元素，如果可能的。由于这使得我们更随意马虎阅读/理解已经写入的代码。这是最好的HTML构造：
创建具有大略构造的CSS网格的最佳方法是利用子网格。但是，大多数浏览器尚不支持子网格。同时，最好的办法便是让两个独立的电网，一个是.day-of-week和一个.date-grid。因此，它可以阐明.day-of-week并.date-grid可以利用相同的七个柱网。
实际日期调度
2019年2月从星期五开始。如果我们希望日历精确无误，则须要确保：2019年2月1日为星期五；2019年2月2日为星期六；2019年2月3日是星期日等等...
利用CSS Grid，可以简化这一部分。
CSS Grid的放置算法在某种程度上遵照以下规则（如果我们未将其设置grid-auto-flow为dense）：放置具有显式grid-column或grid-row第一位的项目；根据末了放置的项目填写别的部分
这表示：如果第一项属于第6列；第二项将放置在第7列中。；第三项将放置在第一行的下一行中（由于只有七列）；第四项将放置在第2列中等等...
因此，如果我们将2月1日放置在第六列（星期五），则别的日期将精确放置。像这样的大略逻辑...
以下是全体利用的代码：源代码HTML
