CSS Calender

css-calender.markdown

CSS Calender

A Pen by pnmensah on CodePen.

License.

index.html

<div class="calendar-wrapper">
  <h1>Decemeber</h1>
  <ul class="calendar">
    <li class="weekday">Sun</li>
    <li class="weekday">Mon</li>
    <li class="weekday">Tue</li>
    <li class="weekday">Wed</li>
    <li class="weekday">Thu</li>
    <li class="weekday">Fri</li>
    <li class="weekday">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>
  </ul>
</div>

style.css

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.first-day {
  grid-column-start: 3;
}


.calendar-wrapper {
  width: 280px;
}
.weekday {
  background: #eee;
}
h1 {
  text-align: center;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}