<div class="calendar-wrapper">
<h1>December 2020</h1>
<ol class="calendar">
<li class="day-name">Sun</li>
<li class="day-name">Mon</li>
<li class="day-name">Tue</li>
<li class="day-name">Wed</li>
<li class="day-name">Thu</li>
<li class="day-name">Fri</li>
<li class="day-name">Sat</li>
<li class="first-day">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ol>
</div>
.calendar-wrapper {
max-width: 280px;
font: 100% system-ui;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
.first-day {
grid-column-start: 3;
}
.day-name {
background: #eee;
}
h1 {
text-align: center;
}
ol {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
padding: 2px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.