Unable To Change Element/div Size : Webdev

Greetings,

I’m working on a CSS Grid exercise using a calendar as an example. However, one of the goals of this exercise is to apply a custom measurement to one of it’s elements (in this case, I chose the day 20); I want the “20” to occupy four “boxes” (20, 21, 27 and 28).

So I used grid-column: 6 / 8 and grid-row: 3 / 5 on that element (a div with id=”20″). For my surprise, neither this or using span (ex.: grid-column: 6 / span 2) worked, as the div size remained unchanged.

Any idea about how to solve this?

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS Grid Exercise</title>
    <link href="" type="text/css" rel="stylesheet">
  </head>
  <body>
    <h1>February</h1>
    <div id="container">
      <div id="1">1</div>
      <div id="2">2</div>
      <div id="3">3</div>
      <div id="4">4</div>
      <div id="5">5</div>
      <div id="6">6</div>
      <div id="7">7</div>
      <div id="8">8</div>
      <div id="9">9</div>
      <div id="10">10</div>
      <div id="11">11</div>
      <div id="12">12</div>
      <div id="13">13</div>
      <div id="14">14</div>
      <div id="15">15</div>
      <div id="16">16</div>
      <div id="17">17</div>
      <div id="18">18</div>
      <div id="19">19</div>
      <div id="20">20</div>
      <div id="21">21</div>
      <div id="22">22</div>
      <div id="23">23</div>
      <div id="24">24</div>
      <div id="25">25</div>
      <div id="26">26</div>
      <div id="27">27</div>
      <div id="28">28</div>
      <div id="29">29</div>
    </div>
  </body>
</html>

CSS:

body{
  font-family: Helvetica; text-align: center;
}

#container{
  width: 350px;
  margin: auto;
  display: grid;
  grid-template: repeat(5, 40px)/repeat(7,40px);
  grid-gap: 10px;
  grid-auto-rows: 50px;
}

#container div:nth-child(-n+7){
  background-color: #A1D2DA;
  padding: 10px;
}

#container div:nth-child(n+8):nth-child(-n+14){
  background-color: #C392D0;
  padding: 10px;
}

#container div:nth-child(n+15):nth-child(-n+21){
  background-color: #7D8DC2;
  padding: 10px;
}

#container div:nth-child(n+22):nth-child(-n+28){
  background-color: #726EA6;
  padding: 10px;
}

#container div:nth-child(n+29){
  background-color: #B6366A;
  padding: 10px;
}

#20{
  grid-column: 6 / 8;
  grid-row: 3 / 5;
}

Source link