使用 CSS 网格作为日历

Question

After researching on the alternatives available to draw an HTML calendar in a page, I ended up that the easiest way to do it, with by far the less CSS and HTML markup possible is the CSS grid layout. 问题是我以前从未使用过网格，也不知道如何实现 100% 的需求。 所以，我想出了以下内容，即其中的80％......

 .calendar { width: 400px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }.day { padding: 5px 30px 30px 5px; color: white; background-color: #0074d9; }.weekday { padding: 10px 30px; color: white; background-color: #333; } span {display:block;border-radius: 4px;border: 1px solid #fff;margin-bottom: 4px;}

 <div class="calendar"> <div class="weekday">Mon</div> <div class="weekday">Tue</div> <div class="weekday">Wed</div> <div class="weekday">Thu</div> <div class="weekday">Fri</div> <div class="weekday">Sat</div> <div class="weekday">Sun</div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="day">1</div> <div class="day">2</div> <div class="day">3</div> <div class="day">4</div> <div class="day">5</div> <div class="day">6</div> <div class="day">7</div> <div class="day">8</div> <div class="day">9</div> <div class="day">10</div> <div class="day">11</div> <div class="day">12</div> <div class="day">13</div> <div class="day">14<span>11:00</span><span>12:00</span><span>13:00</span><span>14:00</span></div> <div class="day">15</div> <div class="day">16</div> <div class="day">17</div> <div class="day">18</div> <div class="day">19</div> <div class="day">20</div> <div class="day">21</div> <div class="day">22</div> <div class="day">23</div> <div class="day">24</div> <div class="day">25</div> <div class="day">26</div> <div class="day">27</div> <div class="day">28</div> <div class="day">29</div> <div class="day">30</div> <div class="day">31</div> </div>

rest 20% 是第一行（在工作日之上，使用相同的 5px 间隔），这将是一个月，例如 2022 年 10 月，它显然应该跨越第一行的所有 7 列，然后是一种显示一些几天内的几个小时，比如 12:00，然后是 13:00，然后是 14:00（它们不应该超过 5-6 次）......也许这些时间每个都可以出现在一个漂亮的矩形中带有圆角的边框......就像每次在不同的跨度中一样，跨度会堆叠一个到另一个，等等......我所描述的所有这些，通常对于 CSS 来说是完全可行的，但是把它们放在一个到目前为止，网格布局的单元格让我很难过......

任何帮助将不胜感激。

编辑：与此同时，我离我想要的更近了一点，但它仍然看起来并不完美......

Answer 1

实现这一目标“rest 20% 是第一行（在工作日之上，使用相同的 5px 间隔），这将是一个月，例如 2022 年 10 月”

做这个

<div class="calendar">

 <div class="month-year">October 2022</div>

  <div class="weekday">Mon</div>
  <div class="weekday">Tue</div>
  <div class="weekday">Wed</div>
  <div class="weekday">Thu</div>
  <div class="weekday">Fri</div>
  <div class="weekday">Sat</div>
  <div class="weekday">Sun</div>
  <div></div>
  <div></div>
  .
  .
  .

css

.month-year{
   grid-column: 1 / 8;
}

它将把这个div从第一列跨越到最后一列