日历是管理时间的重要工具，无论是个人用途还是专业用途。它们既用于 Web 应用程序，也用于现实生活中的情况。
在您的个人生活中，日历可以帮助您跟踪生日、周年纪念日和约会等重要日期。在专业环境中，日历可以帮助团队协调会议和截止日期。
例如，假设您在一家广告公司工作。您可以使用日历在特定日期和时间为不同平台计划和安排社交媒体帖子。这可确保您的内容保持一致，并在最佳时间发布，以获得最大的参与度。
另一个示例是使用日历来管理项目时间线。想象一下，您正在为客户构建一个网站。日历可以帮助您计划和安排项目的每个阶段，从设计到开发再到测试和启动。这可确保您的项目保持在正轨上并按时交付。
在这篇文章中，我们将向您展示如何使用 CSS 网格创建日历。我们的日历将仅显示给定月份的工作日和日期，固定日期不会动态更改。
然而，值得注意的是，在现实中，JavaScript 可用于动态确定给定月份的开始和结束日期，并将它们填充到日历中。
创建包含表格的日历布局
在深入研究使用 CSS 网格的现代方法之前，让我们先看一下表格创建日历的传统方法。
将日历视为由两个主要部分组成：工作日和日期。我们可以使用表头来显示工作日，并使用表正文来显示日期。
下面是使用表格创建日历布局的简单示例：
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<!-- Week 1 -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<!-- Week 2 -->
<!-- Continue with the rest of the days in the month -->
</tbody>
</table>
在此示例中，我们使用 thead and tbody 标记将表头与正文分开。该 thead 标签在不同单元格中显示工作日。另一方面，标签 tbody 具有不同的行，一周中的每一天都有单元格。我们可以将一些单元格留空几天，这些天不属于该月。
要使所有日期单元格的宽度相等，我们可以在 CSS 中使用该 width 属性。我们将宽度设置为 calc(100% / 7) ，这意味着每个单元格将占用其容器中可用空间的七分之一。这可确保所有单元格都具有相同的宽度，无论其内容如何。
td {
width: calc(100% / 7);
}
还有另一种方法可以确保单元格具有相同的宽度，即使用固定的表格布局。这意味着每个单元格在表格中占用的空间相等，无论它包含的内容如何。
table {
table-layout: fixed;
width: 100%;
}
当我们设置为 table-layout fixed 时，我们告诉浏览器使用一致性算法来布局表格，这会导致大小均匀且对齐的单元格。
为了使桌子适应不同的屏幕尺寸，我们可以将其宽度 100% 设置为填充其容器。这允许轻松创建响应式布局。
请看下面的演示：
虽然表格曾经是布局设计的热门选择，但不再推荐用于现代 Web 开发。相反，我们将在下一节中使用 CSS Grid 来创建日历布局。
使用 CSS 网格创建日历
为了使用 CSS 网格创建日历，我们将首先用简单 div 元素替换上一节中的表格及其单元格。
<div class="calendar">
<div class="calendar__days">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="calendar__dates">
<!-- Week 1 -->
<div></div>
<div></div>
<div></div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<!-- Week 2 -->
<!-- Continue with the rest of the days in the month -->
</div>
</div>
在上一节中，我们使用空单元格 （ td ） 来表示不属于该月的日期。现在，让我们通过为这些日期保留空 div 元素来将相同的方法应用于我们的网格。
为了以网格格式显示一周中的几天，我们将使用 calendar__days 类。首先，我们将使用 display: grid 将工作日容器转换为网格容器。接下来，我们将使用 grid-template-columns 定义网格列。我们想重复 7 列宽度相等的列，这样我们就可以用作 repeat(7, 1fr) 我们的值。这将创建 7 列，每列在我们的网格容器中占用相同的空间。
下面是该类的 CSS 声明：
.calendar__days {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
我们可以使用类似的方法来创建给定月份的日期网格。请看下面的演示：
结论
在这篇文章中，我们学习了如何使用 CSS 网格构建日历。首先，我们解决了使用表格创建布局的老式方法。然后，我们转向 CSS 网格，这让我们在设计现代 Web 布局时具有更大的灵活性。
这篇文章专门展示了如何使用 repeat 功能。这是在网格布局中创建相等宽度的简单而有效的方法。通过简单地传入我们想要重复的列数和每列所需的宽度，我们可以创建一个适应不同屏幕尺寸的响应式网格。
使用 repeat 的最大优点是，它使更改网格中的列数变得超级简单，而无需重新计算每列的宽度。这节省了我们的时间，使我们的代码更易于维护。
