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;
}