Hello,
I am ‘experimenting’ with grid (new to it) and I am trying to figure out why .container-day-1 is taking up so much vertical space? (I only made the background green to see where it was).
What I actually want is an ‘entire page’ made up of sub-containers which I can style individually, but at the moment, the styling is taking up the whole page (most of it at least). I coloured ‘entire page’ blue just to see where that was, but still not sure why ‘container 1’ is taking up all that space, if anyone would know why?
Also, have tried to reproduce the first container (so, having saying ‘container 1’ and ‘container 2’ on the same page and in the same ‘entire page’ wrapper), but it has made no changes to the page. I literally copied the code from ‘container 1’ and renamed the class to ‘container 2’.
I am not sure if this is because container 1 is already taking up all that space (which seems likely, since the background col of container 1 is green), or if there is another reason.
Grateful for any insight…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>tbc</title>
</head>
<body>
<div class="entire-page-1">
<input class="date-range" placeholder="Date range" />
<div class="container-day-1">
<input class="item item-8" placeholder="Day" />
<div class="item item-1"><button class="circle-button"></button>1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<input class="day-and-date1" placeholder="Date" />
<div class="item item-9">9</div>
<div class="item item-10">10</div>
<div class="item item-11">11</div>
<div class="item item-12">12</div>
<div class="item item-13">13</div>
<div class="item item-14">14</div>
<div class="item item-15">15</div>
<div class="item item-16">16</div>
<div class="item item-17">17</div>
<div class="item item-18">18</div>
<div class="item item-19">19</div>
<div class="item item-20">20</div>
<div class="item item-21">21</div>
<div class="item item-22">22</div>
<div class="item item-23">23</div>
<div class="item item-24">24</div>
<div class="item item-1"><button class="circle-button"></button>1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
<div class="item item-11">11</div>
<div class="item item-12"></div>
<div class="item item-13">13</div>
<div class="item item-14">14</div>
<div class="item item-15">15</div>
<div class="item item-16">16</div>
<div class="item item-17">17</div>
<div class="item item-18">18</div>
<div class="item item-19">19</div>
<div class="item item-20">20</div>
<div class="item item-21">21</div>
<div class="item item-22">22</div>
<div class="item item-23">23</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
}
.container-day-1 {
display: grid;
grid-template-rows: 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px 25px;
grid-template-columns: 2fr 43fr 1fr 1fr 1fr 1fr 1fr 1fr;
/*100px 1000px 25px 25px 25px 25px 25px 25px 25px 25px;*/
border: 3px solid black;
background-color: green;
}
.entire-page-1 {
background-color: blue;
}
.item {
border: 1px solid black;
}
.day-and-date1 {
grid-row: 30px;
}
.circle-button {
height: 18px;
border-radius: 30px;
}
.entire-page-1 {
margin-left: 300px;
margin-right: 300px;
}