CSS Grid Calendar

calendar

<div class="calendar">
  <header><h1>2020年05月</h1></header>
  <ul class="week">
    <li><abbr title="星期一">一</abbr></li>
    <li><abbr title="星期二">二</abbr></li>
    <li><abbr title="星期三">三</abbr></li>
    <li><abbr title="星期四">四</abbr></li>
    <li><abbr title="星期五">五</abbr></li>
    <li><abbr title="星期六">六</abbr></li>
    <li><abbr title="星期天">日</abbr></li>
  </ul>
  <ul class="day">
    <li class="prev"><div>27</div><div>初五</div></li>
    <li class="prev"><div>28</div><div>初五</div></li>
    <li class="prev"><div>29</div><div>初五</div></li>
    <li class="prev"><div>30</div><div>初五</div></li>
    <li><div>1</div><div>初五</div></li>
    <li><div>2</div><div>初五</div></li>
    <li><div>3</div><div>初五</div></li>
    <li><div>4</div><div>初五</div></li>
    <li><div>5</div><div>初五</div></li>
    <li><div>6</div><div>初五</div></li>
    <li><div>7</div><div>初五</div></li>
    <li><div>8</div><div>初五</div></li>
    <li><div>9</div><div>初五</div></li>
    <li><div>10</div><div>初五</div></li>
    <li><div>11</div><div>初五</div></li>
    <li><div>12</div><div>初五</div></li>
    <li><div>13</div><div>初五</div></li>
    <li><div>14</div><div>初五</div></li>
    <li><div>15</div><div>初五</div></li>
    <li><div>16</div><div>初五</div></li>
    <li><div>17</div><div>初五</div></li>
    <li><div>18</div><div>初五</div></li>
    <li><div>19</div><div>初五</div></li>
    <li class="current"><div>20</div><div>初五</div></li>
    <li><div>21</div><div>初五</div></li>
    <li><div>22</div><div>初五</div></li>
    <li><div>23</div><div>初五</div></li>
    <li><div>24</div><div>初五</div></li>  
    <li><div>25</div><div>初五</div></li>    
    <li><div>26</div><div>初五</div></li>
    <li><div>27</div><div>初五</div></li>
    <li><div>28</div><div>初五</div></li>
    <li><div>29</div><div>初五</div></li>
    <li><div>30</div><div>初五</div></li>
    <li><div>31</div><div>初五</div></li>
    <li class="next"><div>1</div><div>初五</div></li>
    <li class="next"><div>2</div><div>初五</div></li>
    <li class="next"><div>3</div><div>初五</div></li>
    <li class="next"><div>4</div><div>初五</div></li>
    <li class="next"><div>5</div><div>初五</div></li>
    <li class="next"><div>6</div><div>初五</div></li>
    <li class="next"><div>7</div><div>初五</div></li>
  </ul>
</div>

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
.calendar{
  width:50em;
  height:50em;
  background-color:rgba(10, 10, 10, 0.85);
  color:#fff;
  padding:1em;
}
header{
  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;
  min-height:10vh;
}
ul{
  padding:0;
  margin:0 auto;
  max-width:64em;
  
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  grid-gap:1em;
}
li{
  list-style:none;
  margin-left:0;
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
ul.week{
  padding:1em 0;
}
ul.week li{
  height:4vw;
}
ul.week li abbr[title]{
  border:none;
  text-decoration:none;
  font-weight:800;
}

ul.day{

}
ul.day li{
  border:1px solid rgba(100, 100, 100, 0.5);
  padding:1em;
}
ul.day li.prev, ul.day li.next{
  border:1px solid rgba(60, 60, 60, 0.25);
  color:#888;
}
ul.day li.current{
  background-color:rgba(255, 0, 0, 0.85);
  border:3px solid #000;
  outline:3px solid #fff;
}