A Quick Calendar Made With CSS Grid


by Jeremy Caudle
code

I wanted to see how quickly I could mock up a calendar using CSS grid. Using VS Code along with Emmet made it pretty easy. It's not the best layout, but I was able to put it together in about 15 minutes without too much effort. I'm looking forward to the next time I give this a shot.

Month

  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  • 11

  • 12

  • 13

  • 14

  • 15

  • 16

  • 17

  • 18

  • 19

  • 20

  • 21

  • 22

  • 23

  • 24

  • 25

  • 26

  • 27

  • 28

  • 29

  • 30

  • 31

  • 1

  • 2

  • 3

  • 4

View the code:

HTML and JS 
<h2>Month</h2>

<ul class="calendar">
        <li class="no-border">
            <h5>Sun</h5>
        </li>
        <li class="no-border">
            <h5>Mon</h5>
        </li>
        <li class="no-border">
            <h5>Tue</h5>
        </li>
        <li class="no-border">
            <h5>Wed</h5>
        </li>
        <li class="no-border">
            <h5>Thu</h5>
        </li>
        <li class="no-border">
            <h5>Fri</h5>
        </li>
        <li class="no-border">
            <h5>Sat</h5>
        </li>

        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
        </li>
        <li>
            <p>3</p>
        </li>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>5</p>
        </li>
        <li>
            <p>6</p>
        </li>
        <li>
            <p>7</p>
        </li>
        <li>
            <p>8</p>
        </li>
        <li>
            <p>9</p>
        </li>
        <li>
            <p>10</p>
        </li>
        <li>
            <p>11</p>
        </li>
        <li>
            <p>12</p>
        </li>
        <li>
            <p>13</p>
        </li>
        <li>
            <p>14</p>
        </li>
        <li>
            <p>15</p>
        </li>
        <li>
            <p>16</p>
        </li>
        <li>
            <p>17</p>
        </li>
        <li>
            <p>18</p>
        </li>
        <li>
            <p>19</p>
        </li>
        <li>
            <p>20</p>
        </li>
        <li>
            <p>21</p>
        </li>
        <li>
            <p>22</p>
        </li>
        <li>
            <p>23</p>
        </li>
        <li>
            <p>24</p>
        </li>
        <li>
            <p>25</p>
        </li>
        <li>
            <p>26</p>
        </li>
        <li>
            <p>27</p>
        </li>
        <li>
            <p>28</p>
        </li>
        <li>
            <p>29</p>
        </li>
        <li>
            <p>30</p>
        </li>
        <li>
            <p>31</p>
        </li>
        <li>
            <p class="grayed-out">1</p>
        </li>
        <li>
            <p class="grayed-out">2</p>
        </li>
        <li>
            <p class="grayed-out">3</p>
        </li>
        <li>
            <p class="grayed-out">4</p>
        </li>
    </ul>
CSS 
.calendar {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: 1.5rem repeat(5, 3.5rem);
        padding: 0;
        margin: 1rem auto;
        list-style: none;
        border: double 2px black;
    }

    .calendar li {
        border: solid 1px black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

    .calendar li h5 {
        margin: 0;
        background: red;
        color: white;
        font-size: 1rem;
        border-bottom: solid 1px black;
        text-align: center;
        height: 100%;
        padding-top: .125rem
    }

    .calendar li.no-border {
        border-top: none;
        border-left: none;
        border-right: none;
    }

    .calendar li p {
        margin: 0 auto;
        text-align: center;
        font-size: 2rem;
    }

    .grayed-out {
        color: #bbb;
    }

Tags