如何使用 CSS Grid 制作日历

创建 HTML

使用 CSS Grid 制作日历其实很简单。我想教你如何操作。

以下是您在本文结束时将创建的内容：

创建 HTML

从图中可以看出日历包含三个部分：

月份指示器
工作日/周末指标
日期本身

构建 HTML 代码的最佳方式是遵循你认为正确的原则。我们将根据以下三个部分创建 HTML：

<div class="calendar">
  <div class="month-indicator">...</div>
  <div class="day-of-week">...</div>
  <div class="date-grid">...</div>
</div>

您还应该能够看到我们需要七列网格。

我们将重点讨论这一点.day-of-week，.date-grid因为我们只讨论网格。

构建网格

有两种方法可以创建 CSS 网格。

第一种方法是将和中的元素合并.day-of-week成.date-grid一个选择器。如果我们这样做，我们可以在中设置选择器display: grid。如果我们这样做，HTML 将会如下所示：

<div class="grid">
  <!-- Day of week -->
  <div>Su</div>
  <div>Mo</div>
  <div>Tu</div>
  <div>We</div>
  <div>Th</div>
  <div>Fr</div>
  <div>Sa</div>

  <!-- Dates -->
  <button><time datetime="2019-02-01">1</time></button>
  <button><time datetime="2019-02-02">2</time></button>
  <button><time datetime="2019-02-03">3</time></button>
  <!-- ... -->
  <button><time datetime="2019-02-28">28</time></button>
</div>

我不建议使用这种方法，因为 HTML 会失去其结构意义。如果可能的话，我更喜欢将.day-of-week和保留date-grid为单独的元素。这样我更容易阅读/理解我编写的代码。

以下是我选择的 HTML 结构：

<div class="day-of-week">
  <div>Su</div>
  <div>Mo</div>
  <div>Tu</div>
  <div>We</div>
  <div>Th</div>
  <div>Fr</div>
  <div>Sa</div>
</div>

<div class="date-grid">
  <button><time datetime="2019-02-01">1</time></button>
  <button><time datetime="2019-02-02">2</time></button>
  <button><time datetime="2019-02-03">3</time></button>
  <!-- ... -->
  <button><time datetime="2019-02-28">28</time></button>
</div>

创建具有我建议结构的 CSS 网格的最佳方法是使用 subgrid。遗憾的是，大多数浏览器尚不支持 subgrid。目前，最好的方法是创建两个独立的网格——一个用于.day-of-week，另一个用于.date-grid。

.day-of-week和都.date-grid可以使用相同的七列网格。

/* The grid */
.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

推迟日期

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 列。
第三项将被放置在下一行，即第 1 列（因为只有七列）。
第四项将放置在第二列，
等等...

因此，如果我们将 2 月 1 日放在第六列（星期五），其余日期就会正确放置。

就这么简单！

/* Positioning the first day on a Friday */
.date-grid button:first-child {
  grid-column: 6;
}

这里有一个 codepen 供您使用：

想要了解更多？

本文包含“学习 JavaScript”中一个组件（日期选择器）的一小部分。我还想向你展示更多内容。（但大部分都与 JavaScript 相关）。

例如，在“学习 JavaScript”中，我将向您展示如何：

为任意月份（和任意年份）创建日历
添加上一个/下一个按钮以在月份之间切换
单击每个日期以显示日期

它看起来是这样的：

感谢阅读。本文最初发布在我的博客上。如果您想阅读更多文章来帮助您成为更优秀的前端开发人员，请订阅我的新闻通讯。

文章来源：https://dev.to/zellwk/how-to-build-a-calendar-with-css-grid-1c46

如何使用 CSS Grid 创建日历 创建 HTML

如何使用 CSS Grid 制作日历

创建 HTML

创建 HTML

构建网格

推迟日期

想要了解更多？

如何使用 CSS Grid 创建日历创建 HTML