• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kolumny w grid'zie

Object Storage Arubacloud
+1 głos
181 wizyt
pytanie zadane 1 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
#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?

2 odpowiedzi

+1 głos
odpowiedź 1 kwietnia 2021 przez niezalogowany
<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 wink

Ucz się yes

komentarz 1 kwietnia 2021 przez Nearr Obywatel (1,890 p.)
działa :)
bardzo dziękuję za poświęcony czas
komentarz 1 kwietnia 2021 przez niezalogowany

Nie ma sprawy wink  działaj !

Miłego smiley

0 głosów

Podobne pytania

+2 głosów
2 odpowiedzi 202 wizyt
pytanie zadane 13 listopada 2020 w HTML i CSS przez lacki530 Nowicjusz (140 p.)
0 głosów
1 odpowiedź 246 wizyt
pytanie zadane 12 kwietnia 2018 w HTML i CSS przez barteku12 Obywatel (1,340 p.)
0 głosów
2 odpowiedzi 322 wizyt
pytanie zadane 7 sierpnia 2017 w HTML i CSS przez jankowa1ski Gaduła (3,560 p.)

92,703 zapytań

141,616 odpowiedzi

320,180 komentarzy

62,062 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...