Как сохранить центрирование Div, не перемещаясь при заполнении или удалении других элементов div вокруг него? ⇐ CSS

[Anonymous]

Пыталась держать карточку Plus по центру с помощью сетки, но это не помогло, также пробовала абсолютное положение, но карточки помещались под ней. Необходимо, чтобы элементы div, которые добавляются или удаляются, обходили элемент div, который постоянно центрирован. Цель — добавить новые заметки или удалить заметки с помощью JavaScript, но протестировать дизайн с помощью CSS.

• All
• Recent
• Pinned
• Search

Notes
Notes
+
Notes
Notes
Notes
Notes






* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:Arial, Helvetica, sans-serif;
}
body {
width: 100%;
background-color: #ffffff;
color: black;
width: 100vw;
height: 100vh;
border: #008f4b solid 6px;
}

.nav_container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;

}

.nav {
width: 300px;
height: 40px;
text-decoration: none;
}

ul {
list-style-type: none;
margin: auto;
padding: 0px;
overflow: hidden;
background-color:#008f4b;
border-radius: 20px;
display: flex;
align-items: center;
padding-left: 10px ;
padding-right: 10px;
border: #024731 solid 3px;
}

li {
display: inline-block;
color: white;
text-align: center;
padding: 10px 16px;
text-decoration: none;
cursor: pointer;
height: 100%;
width: 100%;
margin-top: -5px;
margin-bottom: -5px;

}

li:hover {
color: white;
background-color:#00b85f ;
}

.search_container {
margin-left: 10px;
}

.notes_container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 50vw;
margin: auto;
}

.notes_wrapper {
display: grid;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
height: 100%;
grid-template-areas:
"note note add_note note note",
"note note note note note",
;
}
.note_card {
grid-area:'note';
padding: 6px 6px 6px 6px;
width: 200px;
margin: 20px;
height: 40px;
background-color: #ebebeb;
font-size: 24px;
}

.add_card {
grid-area:'add_note';
padding: 40px 20px;
width: 200px;
margin: 20px;
font-size: 100px;
text-align: center;
background-color: #ebebeb;
cursor: pointer;
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... her-divs-a