我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

A calendar built with CSS Grid

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

这个月的指标
工作日和周末的指标
日期自己

构建HTML的最佳方法是使用感觉正确的内容。我们将根据以下三个部分创建HTML:

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

您还应该能够看到，我们需要7列作为网格。

Seven columns required for the grid

我们将讨论.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网格的最好方法是使用子网格。不幸的是，大多数浏览器还不支持子网格。同时，最好的方法是创建两个单独的网格—一个用于.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);
}

1 Feb 2019 begins on a Friday

放日期

2019年2月从周五开始。如果我们希望日历是正确的，我们需要确保:

2019年2月1日是周五

2019年2月2日是周六

2019年2月3日是周日

等等……

有了CSS Grid，这部分很简单。

CSS网格的布局算法遵循以下规则(如果你没有设置网格自动流密集):

首先放置具有明确的网格列或网格行的项

根据最后一项填写剩余部分

这意味着:

如果第一项落在第6栏

第二项将放在第7栏。

第三项将放在下一行的第1列中(因为只有7列)。

第四项放在第二栏，

等等……

因此，如果我们将2月1日放在第六栏(星期五)，那么其余的日期将被正确地放置。

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

1 Feb 2019 begins on a Friday

如何建立一个日历

结构化网格

放日期