javascript - 每次我用JS添加新的div时，网格div都会变大

Question

每当我向日历中添加任务时，我都会使用javascript添加新的div。
此刻，每当我添加任务时，div空间就会变大，日历看起来会很尴尬。我对网格还比较陌生，可以使用一些帮助吗？ :)

var button = document.getElementById("save-task")
var closeButton = document.getElementById("close")
var input = document.getElementById("add-new-task")
var startTime = document.getElementById("time-stamp")
var endTime = document.getElementById("time-stamp-finish")
var eventElement = document.querySelectorAll(".event")
var firstEvent = document.getElementById("event-1-1")
var secondEvent = document.getElementById("event-8-1")
var thirdEvent = document.getElementById("event-15-1")
var arrows = document.querySelector('.fas')
var timeInput = document.getElementById("add-time")
var timeBar = document.querySelectorAll(".hours")
var eventDate = document.getElementById("event-date")
var taskEvent = document.createElement('div')
taskEvent.style.background = "#000000"
taskEvent.style.border = "1px solid black"
taskEvent.style.color = "white"
taskEvent.style.padding = "30px"


for (var i = 0; i < eventElement.length; i++) {
  eventElement[i].addEventListener('click', () => {
    document.getElementById('task-input').classList.toggle('new-task');
    console.log(event)
  })
}

function removeButton() {
  document.getElementById('task-input').classList.toggle('new-task');
}

button.addEventListener('click', () => {
  function inputAdd() {
    tasksManager.add(input.value)
    taskEvent.innerHTML = input.value
  }
  if (startTime.value === "04:00" && endTime.value === "05:00") {
    inputAdd()
    firstEvent.appendChild(taskEvent)
    secondEvent.style.border = "none"
  } else if (startTime.value === "05:00" && endTime.value === "06:00") {
    inputAdd()
    secondEvent.appendChild(taskEvent)
  } else if (startTime.value === "06:00" && endTime.value === "07:00") {
    inputAdd()
    thirdEvent.appendChild(taskEvent)

  }
  removeButton()
})

body,
html {
  font-family: 'Tomorrow', sans-serif;
}

h1 {
  text-align: center;
}

h1 {
  animation-duration: 20s;
  animation-delay: 0s;
  animation-iteration-count: 1;
}


/* The grid */

#day-of-week,
.grid-container-events {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  cursor: pointer;
}

.day,
.grid-container-events>div {
  border: 1px solid grey;
  text-align: center;
}

#day-of-week {
  padding-left: 57.5px;
}

.grid-container-events>div {
  padding: 20px 20px 20px 30px;
  cursor: pointer;
}

.new-task {
  display: none;
  flex-direction: column;
  padding: 20px;
}

.fas {
  margin-top: 10px;
  cursor: pointer;
  font-size: 25px;
}

.fas:hover {
  transform: scale(1.2);
}

.fa-angle-left {
  padding-right: 15px;
}

.full-date {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 30px;
}

#month-today,
#month-seven,
#day-today {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
}

.day {
  padding: 10px 50px 10px 30px;
}

.hours {
  float: left;
}

.hours div {
  padding-right: 10px;
  padding-bottom: 17.7px;
  border-bottom: 2px solid grey;
}

#task-input {
  position: absolute;
  background-color: black;
  border-radius: 20px;
  padding: 50px 60px 50px 60px;
  float: left;
  color: white;
  text-align: center;
  z-index: 1;
}

#close {
  color: white;
  font-size: 20px;
  background: none;
  border: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  outline: none;
  margin-left: 250px;
  margin-bottom: 30px;
  cursor: pointer;
}

#close:hover {
  background: white;
  color: black;
}

#task-input>div {
  padding: 10px;
}

.save-task {
  border: 2px solid black;
  border-radius: 10px;
  padding: 15px;
  background: white;
  cursor: pointer;
}

.week {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 40px;
}

.week-text,
#year {
  padding-top: 5px;
  padding-left: 8px;
}

#week {
  margin-left: 10px;
  background: black;
  color: white;
  padding: 5px;
}

.side-bar {
  float: right;
  margin-right: 10px;
  border: 2px solid black;
  height: 1005px;
  width: 380px;
}

<h1 class="animated lightSpeedIn">ProdPlus+ 💪</h1>
<div class="dropdown-menu">

</div>

<div class="full-date">
  <i class='fas fa-angle-left' id="prev"></i>
  <div id="month-today"></div>
  <div id="month-seven"></div>
  <div id="day-today"></div>
  <div id="date-today"></div>
  <i class='fas fa-angle-right' id="next"></i>
</div>

<div class="week">
  <div class="week-text">Week</div>
  <div id="week"></div>
  <div class="week-text">of</div>
  <div id="year"></div>
</div>
<div class="new-task" id="task-input">
  <button onclick="removeButton()" id="close">x </button>
  <p>Did you decide not to suck today? &#128513</p>
  <div>Task: <input id="add-new-task" type="text"></div>
  <div id="add-time">
    <label>Time</label>
    <select id="time-stamp">
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="05:00">05:00</option>
      <option value="06:00">06:00</option>
      <option value="07:00">07:00</option>
      <option value="08:00">08:00</option>
      <option value="09:00">09:00</option>
      <option value="10:00">10:00</option>
      <option value="11:00">11:00</option>
      <option value="12:00">12:00</option>
      <option value="13:00">13:00</option>
      <option value="14:00">14:00</option>
      <option value="15:00">15:00</option>
      <option value="16:00">16:00</option>
      <option value="17:00">17:00</option>
      <option value="18:00">18:00</option>
      <option value="19:00">19:00</option>
      <option value="20:00">20:00</option>
      <option value="21:00">21:00</option>
      <option value="22:00">22:00</option>
      <option value="23:00">23:00</option>
    </select>
    -
    <select id="time-stamp-finish">
      <option value="00:00">00:00</option>
      <option value="01:00">01:00</option>
      <option value="02:00">02:00</option>
      <option value="03:00">03:00</option>
      <option value="04:00">04:00</option>
      <option value="05:00">05:00</option>
      <option value="06:00">06:00</option>
      <option value="07:00">07:00</option>
      <option value="08:00">08:00</option>
      <option value="09:00">09:00</option>
      <option value="10:00">10:00</option>
      <option value="11:00">11:00</option>
      <option value="12:00">12:00</option>
      <option value="13:00">13:00</option>
      <option value="14:00">14:00</option>
      <option value="15:00">15:00</option>
      <option value="16:00">16:00</option>
      <option value="17:00">17:00</option>
      <option value="18:00">18:00</option>
      <option value="19:00">19:00</option>
      <option value="20:00">20:00</option>
      <option value="21:00">21:00</option>
      <option value="22:00">22:00</option>
      <option value="23:00">23:00</option>
    </select>
  </div>
  <div id="date-stamp">
    Date:
    <input type="date" id="event-date" name="bday" max="2030-12-31"><br>
  </div>
  <button class="save-task" id="save-task" onclick="">Save task</button>
</div>
<div class="side-bar">
  <h1>How am I doing this week?</h1>
</div>
<div class="calendar">
  <div id="day-of-week">
    <div class="day" id="Monday">Monday</div>
    <div class="day" id="Tuesday">Tuesday</div>
    <div class="day" id="Wednesday">Wednesday</div>
    <div class="day" id="Thursday">Thursday</div>
    <div class="day" id="Friday">Friday</div>
    <div class="day" id="Saturday">Saturday</div>
    <div class="day" id="Sunday">Sunday</div>
  </div>
  <div class="hours">
    <div>
      <option value="04:00">04:00</option>
    </div>
    <div>
      <option value="05:00">05:00</option>
    </div>
    <div>
      <option value="06:00">06:00</option>
    </div>
    <div>
      <option value="07:00">07:00</option>
    </div>
    <div>
      <option value="08:00">08:00</option>
    </div>
    <div>
      <option value="09:00">09:00</option>
    </div>
    <div>
      <option value="10:00">10:00</option>
    </div>
    <div>
      <option value="11:00">11:00</option>
    </div>
    <div>
      <option value="12:00">12:00</option>
    </div>
    <div>
      <option value="13:00">13:00</option>
    </div>
    <div>
      <option value="14:00">14:00</option>
    </div>
    <div>
      <option value="15:00">15:00</option>
    </div>
    <div>
      <option value="16:00">16:00</option>
    </div>
    <div>
      <option value="17:00">17:00</option>
    </div>
    <div>
      <option value="18:00">18:00</option>
    </div>
    <div>
      <option value="19:00">19:00</option>
    </div>
    <div>
      <option value="20:00">20:00</option>
    </div>
    <div>
      <option value="21:00">21:00</option>
    </div>
    <div>
      <option value="22:00">22:00</option>
    </div>
    <div>
      <option value="23:00">23:00</option>
    </div>
    <div>
      <option value="00:00">00:00</option>
    </div>
    <div>
      <option value="01:00">01:00</option>
    </div>
    <div>
      <option value="02:00">02:00</option>
    </div>
    <div>
      <option value="03:00">03:00</option>
    </div>
  </div>
  <div class="main-grid-container">
    <div class="grid-container-events">
      <div class="event" id="event-1-1"></div>
      <div class="event" id="event-2-2"></div>
      <div class="event" id="event-3-3"></div>
      <div class="event event-4"></div>
      <div class="event event-5"></div>
      <div class="event event-6"></div>
      <div class="event event-7"></div>
    </div>
    <div class="grid-container-events">
      <div class="event" id="event-8-1"></div>
      <div class="event event-9-2"></div>
      <div class="event event-10"></div>
      <div class="event event-11"></div>
      <div class="event event-12"></div>
      <div class="event event-13"></div>
      <div class="event event-14"></div>
    </div>
    <div class="grid-container-events">
      <div class="event" id="event-15-1"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>
    <div class="grid-container-events">
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
      <div class="event"></div>
    </div>

  </div>
</div>
<div id="dates">

</div>

任何帮助，以便每当我添加div时都保留相同的填充会很好

谢谢

Answer 1

您是否已经尝试过网格自动行？

grid-auto-rows: 1fr

Documentation。