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

[Anonymous]

Я пытался разместить карту Plus по центру сетки, но не смог заставить ее работать. Я также пробовал позицию: Absolute, но карточки идут под ней.
Мне нужны элементы div, которые добавляются или удаляются, чтобы обойти div, который постоянно центрирован. Цель состоит в том, чтобы добавлять новые заметки или удалять заметки с помощью Javascript, но тестировать дизайн с помощью CSS.

Код: Выделить всё

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

Код: Выделить всё

[list]
[*]All
[*]Recent
[*]Pinned
[*]Search

[/list]





Notes

Notes

+

Notes

Notes

Notes

Notes

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