Hello,
I have some (very) draft code but am having a problem with reducing the number of columns in a grid. The ‘test’ data currently in each final cell is only to prevent everything else from moving out of alignment. I only want there to be 8 columns (I set the file up with 9 and have been unable to change this (I tried grid-template-columns and tried deleting the data from the final (furthest column) cells, in case that column had been implicitly created.
Does anyone know how I can get rid of this final (9th) column completely please?
<!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="space">SPACE</div>
<div classs="day">Monday<input class="date" placeholder="date" /></div>
<div class="container-day-1">
<div class="item-2 btn"><button class="circle-button"></button></div>
<input class="task task-1 item-12" />
<button class="pomodoro-btn btn-1 item-4"></button>
<!--<div class="item item-2">2</div>-->
<button class="pomodoro-btn btn-2 item-5"></button>
<button class="pomodoro-btn btn-3 item-6"></button>
<button class="pomodoro-btn btn-4 item-7"></button>
<button class="pomodoro-btn btn-5 item-8"></button>
<button class="pomodoro-btn btn-6 item-9"></button>
<div>test</div>
<div class="item-11 btn">
<button class="circle-button"></button>
</div>
<!--<input class="date" placeholder="Date" />-->
<input class="task task-1 item-12" />
<button class="pomodoro-btn btn-7 item-13"></button>
<button class="pomodoro-btn btn-8 item-14"></button>
<button class="pomodoro-btn btn-9 item-15"></button>
<button class="pomodoro-btn btn-10 item-16"></button>
<button class="pomodoro-btn btn-11 item-17"></button>
<button class="pomodoro-btn btn-12 item-18"></button>
<div>test</div>
<div class="btn item-20">
<button class="circle-button"></button>
</div>
<input class="task task-1 item-21" />
<button class="pomodoro-btn btn-8 item-22"></button>
<button class="pomodoro-btn btn-9 item-23"></button>
<button class="pomodoro-btn btn-10 item-24"></button>
<button class="pomodoro-btn btn-11 item-25"></button>
<button class="pomodoro-btn btn-12 item-26"></button>
<button class="pomodoro-btn btn-12 item-27"></button>
<div>test</div>
<div class="item item-29 btn">
<button class="circle-button"></button>
</div>
<input class="task task-1 item-30" />
<button class="pomodoro-btn btn-8 item-31"></button>
<button class="pomodoro-btn btn-9 item-32"></button>
<button class="pomodoro-btn btn-10 item-33"></button>
<button class="pomodoro-btn btn-11 item-34"></button>
<button class="pomodoro-btn btn-12 item-35"></button>
<button class="pomodoro-btn btn-12 item-36"></button>
<div>test</div>
<div class="btn item-1 item-38">
<button class="circle-button item-39"></button>
</div>
<input class="task task-1 item-40" />
<button class="pomodoro-btn btn-8 item-41"></button>
<button class="pomodoro-btn btn-9 item-42"></button>
<button class="pomodoro-btn btn-10 item-43"></button>
<button class="pomodoro-btn btn-11 item-44"></button>
<button class="pomodoro-btn btn-12 item-45"></button>
<button class="pomodoro-btn btn-12 item-46"></button>
<!--
<div>test</div>
-->
<div>test</div>
<div class="btn item-1 item-48">
<button class="circle-button"></button>
</div>
<input class="task task-1 item-49" />
<button class="pomodoro-btn btn-8 item-50"></button>
<button class="pomodoro-btn btn-9 item-51"></button>
<button class="pomodoro-btn btn-10 item-52"></button>
<button class="pomodoro-btn btn-11 item-53"></button>
<button class="pomodoro-btn btn-12 item-54"></button>
<button class="pomodoro-btn btn-12 item-55"></button>
<input
class="gratitude gratitude-1"
placeholder="Today, I am grateful for..."
/>
<input
class="gratitude gratitude-2"
placeholder="Today, I am grateful for..."
/>
<input
class="gratitude gratitude-3"
placeholder="Today, I am grateful for..."
/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
}
.container-day-1,
.container-day-2 {
display: grid;
grid-template-rows: 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;*/
/* grid-template-columns: 1fr 43fr 1fr 1fr;*/
border: 2px solid black;
background-color: green;
}
.entire-page-1 {
background-color: blue;
}
.item {
border: 1px solid black;
}
.circle-button {
height: 20px;
width: 20px;
border-radius: 50%;
}
.entire-page-1 {
margin-left: 300px;
margin-right: 300px;
}
.Monday {
width: 70px;
/*grid-row: span 6;*/
}
.gratitude {
grid-column: span 9;
}
/*.circle-button:active {
background: blue;
}
.circle-button:focus {
background: red;
}
*/
.entire-page-1 {
margin: 20px 300px 20px 300px;
}