Thiết kế website giá rẻ

Question

Tried to keep the Plus card centered with grid couldn’t get it to work, also tried absolute position but the cards go underneath it. Need the divs that are being added or deleted to go around the div that is permanently centered. Goal is to add new notes or delete notes with javascript but testing the design with css.

<ul>

<li>Recent</li>

<li>Pinned</li>

<li>Search</li>

</ul>

</div>

<div class="note_card"><h3>Notes</h3></div>

<div class="note_card"><h3>Notes</h3></div>

</div>

</body>

</code>

<code><body> <div class="nav_container"> <div class="nav"> <ul> <li>All</li> <li>Recent</li> <li>Pinned</li> <li>Search</li>  </ul> </div> </div> <div class="notes_container"> <div class="notes_wrapper"> <div class="note_card"><h3>Notes</h3></div> <div class="note_card"><h3>Notes</h3></div> <div class="add_card">+</div> <div class="note_card"><h3>Notes</h3></div> <div class="note_card"><h3>Notes</h3></div> <div class="note_card"><h3>Notes</h3></div> <div class="note_card"><h3>Notes</h3></div> </div> </div> <script src="notes_script.js"></script> </body> </code>

<body>
    <div class="nav_container">
        <div class="nav">
            <ul>
                <li>All</li>
                <li>Recent</li>
                <li>Pinned</li>
                <li>Search</li>
                <!-- <li class="search_container"><image src="assets/Icons/search.svg"></image></li> -->
            </ul>
        </div>
    </div>
    <div class="notes_container">
        <div class="notes_wrapper">
            <div class="note_card"><h3>Notes</h3></div>
            <div class="note_card"><h3>Notes</h3></div>
            <div class="add_card">+</div>
            <div class="note_card"><h3>Notes</h3></div>
            <div class="note_card"><h3>Notes</h3></div>
            <div class="note_card"><h3>Notes</h3></div>
            <div class="note_card"><h3>Notes</h3></div>



        </div>
    </div>
    <script src="notes_script.js"></script>
</body>

<code>* {

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;

}

</code>

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

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

Thiết kế website giá rẻ

Danh mục

How to keep Div centered without moving when populating or deleting other divs around it?