日历是人类文明的重要工具之一。然后可以记住许多重要事件，并从事件的确切日期追溯到真相。

在本文中，我们将学习如何利用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