Kolumny w grid'zie

Question

#main-container {
    position: absolute;
    display: grid;
    grid-template-columns: 320px 340px 320px;
    grid-template-rows: 300px 146px;
    grid-gap: 18px;
}

#server-list {
    width: 320px;
    height: 462px;
    display: flex;
    flex-direction: column;
}

#user-menu {
    width: 340px;
    height: 462px;
}

#profile-menu {
    width: 320px;
    height: 144px;
}

#skin-list {
    width: 320px;
    height: 300px;
}

.main-boxes {
    border-radius: 3px;
    background-color: #161616;
    box-shadow: 0 0 4px 1px #0a0a0a;
    border: 1px solid rgb(17, 17, 17);
}

<div id="main-container">
                <div id="server-list" class="main-boxes">
                    <div class="tabs"></div>
                </div>
                <div id="user-menu" class="main-boxes">
                    <div class="tabs"></div>
                </div>
                <div id="skin-list" class="main-boxes" class="scrollbar"></div>
                <div id="profile-menu" class="main-boxes"></div>
            </div>   

Jak div'a zaznaczonego na czerwono przenieść zaznaczone na niebiesko za pomocą grid'a?

Answer 1

<div id="main-container">
                <div id="server-list" class="main-boxes">
                    <div class="tabs"></div>
                </div>
                <div id="user-menu" class="main-boxes">
                    <div class="tabs"></div>
                </div>
                <div id="skin-list" class="main-boxes" class="scrollbar"></div>
                <div id="profile-menu" class="main-boxes"></div>
            </div>

Html bez zmian .

#main-container {
    position: absolute;
    display: grid;
    grid-template-columns: 320px 340px 320px;
    grid-template-rows: 300px 146px;
    grid-gap: 18px;
}
 
#server-list {
    width: 320px;
    height: 462px;
    display: flex;
    flex-direction: column;
}
 
#user-menu {
    width: 340px;
    height: 462px;
}
 
#profile-menu {
    width: 320px;
    height: 144px;
    grid-column: 3;
    grid-row: 2;
}
 
#skin-list {
    width: 320px;
    height: 300px;
}
 
.main-boxes {
    border-radius: 3px;
    background-color: #161616;
    box-shadow: 0 0 4px 1px #0a0a0a;
    border: 1px solid rgb(17, 17, 17);
}

Css Dwie nowe Linie do selectora #profile-menu

grid-column: 3;

grid-row: 2;

Pozdrawiam i Powodzenia

Ucz się

Comments

działa :)
bardzo dziękuję za poświęcony czas

---

Nie ma sprawy   działaj !

Miłego

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas