Блог

Я возился с сеткой CSS, чтобы протестировать вещи и особенно области сетки, и мне не удается выполнить эту простую вещь :

Я пытаюсь получить содержимое во всю ширину устройства шириной 1500 пикселей. Я почти уверен, что мне не хватает очень простой вещи, поэтому, если кто-то знает, пожалуйста, не стесняйтесь помочь 🙂

https://codepen.io/N3G/pen/jOMLPMz

 <div class="main-wrapper">
  <div class="menu">
    <ul>
      <li><a href="#">Lien du menu</a></li>
      <li><a href="#">Lien du menu</a></li>
      <li><a href="#">Lien du menu</a></li>
      <li><a href="#">Lien du menu</a></li>
    </ul>
  </div>
  <div class="left">
    Left
  </div>
  <main class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </main>
  <aside class="right">
    Right
  </aside>
  <footer class="footer">
    Footer
  </footer>
</div>
 

 *, ::before, ::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 15px;
}

.main-wrapper {
  height: 100vh;
  width: 100%;
  display: grid;
  gap: 15px;
  grid-template-rows: 80px 1fr 80px;
  grid-template-columns: 250px 1fr 250px;
  grid-template-areas: 
    "menu menu menu"
    "left content right"
    "footer footer footer"
}

@media screen and (max-width: 1500px) {
  .main-wrapper {
    grid-template-rows: 1fr 250px 80px;
    grid-template-columns: 250px 1fr 1fr;
    grid-template-areas: 
      "menu content content"
      "menu left right"
      "footer footer footer"
  }
}

.menu {
  grid-area: menu;
  background: grey;
}

.menu ul {
  display: flex;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
}

@media screen and (max-width: 1500px) {
  .menu ul {
    flex-direction: column
  }
}

.main-wrapper > * {
  padding: 15px;
  border: 1px solid #999;
}

.left {
  grid-area: left;
  background: #ccc
}

.right {
  grid-area: right;
  background: #ccc
}

.content {
  grid-area: content
}

.footer {
  grid-area: footer;
  background: darkgrey
}
 

Спасибо, ребята.

У вас неверный селектор, который не соответствует вашему HTML

 .content {
  grid-area: content
}
 

должно быть

 .main {
  grid-area: content
}
 

В вашем HTML-разделе, который вы назвали «main», измените класс на content вместо main.

 <main class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</main>
 

У вас нет класса с именем main в вашем CSS.