Responsywna strona z grid'em

pytanie zadane 12 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)
edycja 12 kwietnia 2021 przez Nearr

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Naxis.io</title>
    <meta name="description" content="A game where you eat other players and get bigger to eat even more players" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=deive-width, initial-scale=2.0, initial-scale=1.0">

    <link rel="stylesheet" href="main.css"/>
</head>

<body>

    <div id="overlay">
        <div class="main-box">
            <div id="profile-menu" class="user-boxes" ></div>
            <div id="skin-list" class="user-boxes" ></div>
            <div id="user-menu" class="user-boxes" ></div>
            <div id="server-list" class="user-boxes" ></div>
        </div>
    </div>

</body>
</html>

body {
    background-color: rgb(36, 36, 36);
}

* {
    box-sizing: border-box;
}

#overlay {
    width: 1000px;
    padding: 10px;
    margin: auto;
}

.main-box {
    position: absolute;
    display: grid;
    grid-template-columns: 320px 340px 280px;
    grid-template-rows: 70px 146px 302px 250px;
    grid-gap: 14px;
    top: 16%;
}

#server-list {
    width: 280px;
    height: 462px;
    grid-column: 3;
    grid-row: 2;
  }
  
  #user-menu {
    width: 340px;
    height: 462px;
    grid-column: 2;
    grid-row: 2;
    
  }
  
  #profile-menu {
    width: 320px;
    height: 146px;
    grid-column: 1;
    grid-row: 2;
  }
  
  #skin-list {
    width: 320px;
    height: 302px;
    grid-column: 1;
    grid-row: 3;
  }
  
  .user-boxes {
    border-radius: 3px;
    background-color: rgba(20, 20, 20, 0.918);
    box-shadow: 0 0 4px 1px #0a0a0a;
  }
  

@media screen and (max-width: 1024px) {
    #overlay {
        width: 100%;
    }

    .main-box {
        width: 100%;
    }

    .user-boxes {
        width: 100%;
        margin: 10px 0px;
        color: #fff;
    }
}

Witam,

Robię grę, i postanowiłem od nowa zrobić strukturę strony, że uczynić ją responsywną.

Z grid'a bardzo fajnie mi się korzysta, ale niestety nie wiem jak zrobić responsywną stronę z jego użyciem.

Przed dodaniem grid'a struktura strony była responsywna, niestety po dodaniu już nie.

2 odpowiedzi

odpowiedź 12 kwietnia 2021 przez VBService Ekspert (252,740 p.)
edycja 12 kwietnia 2021 przez VBService

Najlepsza

Tak jak wspomniał @niezalogowany -> @media

<div class="grid-container">
  <div class="box-left"><p><-- Przesuń belkę</p></div>
  <div class="box-middle"></div>
  <div class="box-right"></div>
</div>

* {
  box-sizing: border-box;  
}
html, body, .grid-container {
  margin: 0;
  height: 100vh;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1em;
  grid-template-areas:
    "box-left box-middle box-right";

  width: 90vw;
  margin: 0 auto;
}

.box-left { 
  grid-area: box-left;
  background-color: red;
}
.box-middle { 
  grid-area: box-middle;
  background-color: green;
}
.box-right { 
  grid-area: box-right; 
  background-color: blue;
}

@media all and (max-width: 720px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "box-left"
      "box-middle"
      "box-right";
  }
}

/* ------ prezentacja ------ */
.grid-container * {
  position: relative;
  height: 100%;
}
.grid-container *:after {
  content: attr(class);
  position: absolute;
  top: 0;
  left: 0;
}